|
JavaScript - Photo Gallery--thumbnail Issue
Hi I have a script that is driving me slightly crazy...I need to use different images as the thumbnails on this page. I want to use specified crops of the image rather than what is there now (the larger image squeezed down). Does anyone have any idea how I could do that? Thanks a million.
http://www.annaleithauser.com/rosema...e/country.html Similar TutorialsDear Experts, I am very new for javascript so I am not even sure it is possible or not. The situation is like this, I have a page, which is actually a photo gallery with a table having 3 rows. First row shows the full screen size pic. Second row displays the Caption of that image and third row shows thumbnail view of six different images and the previous and next button. this is the sample layout: <table> <tr> <td colspan=8> Full size image will be shown in this cell </td> </tr> <tr> <td colspan=8> Caption of the image will be displayed here </td> </tr> <tr> <td>Previous Button</td> <td>Pic1 thumbnail view</td><td>Pic2 thumbnail view</td><td>Pic3 thumbnail view</td> <td>Pic4 thumbnail view</td><td>Pic5 thumbnail view</td><td>Pic6 thumbnail view</td> <td>Next Button</td> </td> </tr> My requirement is whenever the user click on the thumbnail view, which is in the 3rd row, the corresponding full screen size pic should open in 1st row of the table. As my photo gallery should be having more than 6 pics, lets take 20 pics, I want to show only 6 thumbnails in 3rd row at a time. Whenever user press "Next" button the 3rd row having 6 thumbnails should show other 6 thumbnails and previous button should show previous 6 thumbnails. I have a guess that it can be done using arrays, but how????? I have no idea. So please if you have any guesses it will be nice if you can post the entire code here as I will not be in a position to work on the hints given by you. Thanks in advance. Charles hi I am creating a gallery using my flickr feed. I have the bones of it working the only issue is with the thumbnail pulled from flickr. You get the option of small medium and large whicj Im using meduim. I want to add an image border around the thumbnails using a background image but when I add the styles it wont work. If i add a width to the img tag it will distrit the images because its being pulled from the flickr api anyone any ideas on how to get the background image working? html code is here Code: <body>
<!-- Some Content -->
<div id="gallery">
<input type='hidden' id='current_page' />
<input type='hidden' id='show_per_page' />
<div id="flickr">
</div>
<div id='page_navigation'></div>
</div>
</body>
CSS for the img is Code: [.hidden {
display: none;
}
div#flickr a.lightbox img {
border: 5px solid #b3aaa4;
margin-left: 5px;
margin-right: 5px;
margin-bottom:30px
}
and the java script is here Code: $(function() {
$.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId +
'&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?',
function(data){
var classShown = 'class="lightbox"';
var classHidden = 'class="lightbox hidden"';
$.each(data.photos.photo, function(i, rPhoto){
var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
+ rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;
var thumbPhotoURL = basePhotoURL + '_m.jpg';
var mediumPhotoURL = basePhotoURL + '.jpg';
var photoStringStart = '<a ';
var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
rPhoto.title + '"/></a>;'
var photoString = (i < showOnPage) ?
photoStringStart + classShown + photoStringEnd :
photoStringStart + classHidden + photoStringEnd;
$(photoString).appendTo("#flickr");
});
$("a.lightbox").lightBox();
});
});
anyone? Hi Everyone, I am unable to find a JavaScript picture viewer that does what I would like it to do. I have created a wrapper div of specific size for the images to be displayed in. I want the thumbnail images to be horizontally at the top of the div and the "clicked" full-size image to appear within the same div, directly below the row of thumbnails. When a visitor opens the page the first image must be loaded automatically without having to click on the thumbnail. Can anyone point me in a direction please? Anita, Cape Town. I need help finding a script where you have a main picture and then below that will be thumbnails and when you click on them they are shown where the main picture is. Thank you Plz i want to make a photo gallery of many images... i want it to be enlarged with an effect.. i have a thumbnails images and large images i want the thumbnails to be enlarged with any effect and to be displayed on the same page .. can anyone send for me a new photo gallery effect? Hello, Currently I'm looking at smooth scrolling Js scripts for thumb images which can be altered to accomodate needs. I found one here that has some desirable effects but has no navi buttons. Would it be sensible to alter and point the hovering mouse scroll function to buttons, or would it be a better idea to keep looking for exactly the right script? The 2 identical scrollers on this page are the look I want but these are flash; http://area.autodesk.com/ ps: I've no experience of Js but can pick things up pretty quickly. Hello, Do you know any HTML/Javascript/JQuery photo gallery which behave like this flash gallery? http://www.erwinolaf.com/#/portfolio..._2001/gallery/ The point is images : 1- Images does not show in a modal popup window. 2- When each thumbnail selected , current image animate to left and selected image also shown with comming from right to left. Thanks Mazdak Im new to javascript and I need to make a website for my computer science class that includes a photo gallery within a table and there has to be two buttons on top so you can scroll through the pictures.. a next and a back button. here is a link to the assignment http://montcs.bloomu.edu/110/Asns/As...-changer.shtml.. here is our teachers example http://myweb.bloomu.edu/rmontant/pictures-project.. I tried to make my website but i am stuck! heres the code for mine and if anybody could tell me what the hell im doing wrong it would be greatly appreciated.. Thanks in advance <html> <head> <title>GMC Duramax Photo Gallery</title> <style type="text/css"> p.pretty{ font-family: "Marker SD" ; font-size: 20pt ; } Img#pix { width:800px;} table {border-collapse: collapse; border: 8px inset rgb(255,140,0); width:800px; background: rgb(0,0,128); color: rgb(255,255,255); } td {border: 1px solid black; text-align: center;} </style> <script type="text/javascript"> var piclist = [ "Chevy1.jpg" , "GMC1.jpg" , "Ironhide.jpg" , "Chevy2.jpg" , "Monster.jpg" , "DenaliHD.jpg" , "DenaliHD1.jpg" , "3500HD.jpeg" , ] Var i = 0; function next() { var elt = document.getElementById "Chevy1.jpg", "GMC1.jpg", "Ironhjide.jpg", "Chevy2.jpg" el1.src = "images/" + piclist [ i ] ; el1.style.width = "800px" ; el1 = document.getElementDyId("caption") ; el1.innerHTML="number" +i+ ":" piclist[i] ; i=i+ 1;/ if (i>=piclist.length) i = 0; } function prev() { var elt = document.getElementById("pix") ; el1.src = "images/" + piclist [ i ] ; el1.style.width = "800px" ; el1 = document.getElementDyId("caption") ; el1.innerHTML="number" -i- ":" piclist[i] ; i=i+ 1;/" Comment: This counts UP, to next picture. "/ if (i>=piclist.length) i = 0; } </script> </head> <body> <p class="pretty"> GMC Trucks </p> <table> <tr><td> <button onclick="prev();"> Backward </button> <button onclick="next();"> Forward</button> </td></tr> <tr><td> <img id="chevy1.jpg" src="Chevy1.jpg"> </td></tr> <tr><td id="caption"> Lifted Chevy 2500HD</td></tr> </table> </body> </html> Hi! I've been working on a javascript photo gallery on my talent agency's website. I'm running into a bit of trouble with two things... First off, i would like it that when the mouse is removed from the thumbnail, that the image the mouse was last on would remain on screen but the thumbnail wouldnt change back. Also, i cant figure out how to make it that when an image is being displayed, the photographer and makeup artist information could also be seen under the picture. Any help in this would be GREATLY appreciated! A sample of one of the pages this is being used on is the following: http://www.cyanidenation.com/dakygallery.html The code I'm using is the following: Code: <!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
Thanks for the help! Hey all.. I just finished a semester at the local junior college in javascript programming. Didnt teach us very well, but I learned several basics. I have skills in several different aspects of programming now, but none as an expert by any means. Now, I am working on a project for my wife's non-profit that she is involved in, and an wanting to create a thumbnail sized picture 'band' at the top of my website, with images of things that she wants the user to be able to click on to pop up a bigger picture into a new window, a popup window, mind you. This 'image gallery', needs to be able to be clicked on to move the images to the left or to the right, and display, maybe 5 to seven images at a time in about a 100px height band. I have seen this on other websites before, and I have the software to do my own programming, and I 'should have' developed the skills by now, lol, but, I just need some help getting started in the right direction in knowing how to start out. Like, what do I need to accomplish to do this? I already have a div set up for the container for it. The website is using a combination of html, css, php, mysql and javascript. Thank you; Ice Can anyone recommend a good photo gallery? My client would like to be able to upload her own photos and wants to be able to add captions (a must). Can anyone recommend a good canned galley, or let me know where I could find some code? I found an exellent free gallery called "Pure Gallery" which is a front end that works with "Gallery CMS" (backend). It is actually creates an swf file and has an interface for the client, but the problem is that it leaves about a 300 pixel gap at the top of the gallery and I cannot for the life of me figure out how to change it. It is awesome, but the gap at the top makes it useless to me. Thanks much. Buffmin. PS: If anyone wants to see what "Pure Gallery looks like, you can see it at this link to my site. http://q1ofakind.com/gallerycms/gallery.php
I recently asked here about flash software for creating a gallery for my photoblog, but I now relaise I want something that's probably far more straight forward (I hope). What I want is for the first image in a set to load when the user clicks a category link (say Landscapes, for instance). Somewhere alongside the image will be a list of numbers or titles which, when hovered over with the mouse cursor, will change the image to the next in the set. Here's an example of exactly what I want: http://www.toddhido.com/ Hover over 'photographs >> homes at night >> houses' to get to one of the galleries. Is this simple coding? If it's not too much trouble, a very basic step-by-step on how I might acheive this would be very much appreciated. Hi. I am trying to set up a photo gallery on a website using the Galleria Javascript. I managed to setup one gallery but I don't know the code to setup another or another two galleries on the same one page. Can anyone help me urgently? When I try to post the code twice, it gives an error message. The java script code is below: Code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.5.min.js"></script>
</head>
<body>
<div align="center">
<div id="gallery"> <img alt="Admin team." src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo1.jpg" /> <img alt="Ladies In Session!" src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo2.jpg" /> <img alt="Ladies in Worship." src="http://www.raisingsistersconference.info/galleria/themes/classic/images/photo3.jpg" /> </div></div>
<script> Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); $("#gallery").galleria({ width: 540, height: 540 }); </script></div>
</body>
</html>
I am still new to programming and so have no idea in how to adapt this script to make two or three galleries on the same page. The website address is: http://www.raisingsistersconference....togallery.html Thanks so much. I am having a problem with making the images come back after they are hidden by the hide me css. Html Code: <div class="photo_container"> <div class="sorting"> <div> <span>Filter photos by</span> <a class="sortLink selected" data-keyword="all" href="#">All categories</a> <a class="sortLink" data-keyword="creative" href="#">Creative</a> <a class="sortLink" data-keyword="portrait" href="#">Portrait</a> <a class="sortLink" data-keyword="event" href="#">Event</a> <a class="sortLink" data-keyword="advertising" href="#">Advertising</a> <a class="sortLink" data-keyword="nature" href="#">Nature</a> <a class="sortLink" data-keyword="architecture" href="#">Architecture</a> <a class="sortLink" data-keyword="model" href="#">Model</a> <a class="sortLink" data-keyword="food" href="#">Food</a> <div class="clear-fix"></div> </div> </div> <div class="photos"> <div class="thumbnail_container"> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic fullsize.jpg" href="photography/photos/berries_fullsize.jpg" data-keywords="nature"><img src="photography/photos/berries_thumbnail.jpg"/></a> <a class="thumbnail" title="This a caption for the pic sculpture.jpg" href="photography/photos/neptune_fullsize.jpg" data-keywords="architecture"><img src="photography/photos/neptune_thumbnail.jpg"/></a> </div> </div> <div class="debug-size" style="position:absolute; bottom:0px; left:5px">debug size</div> <div class="debug-remainder" style="position:absolute; bottom:25px; left:5px">debug remainder</div> </div> Javascript Code: var thumbnailSpacing = 15; $(document).ready(function(){ $('.photo_container .sorting a.sortLink').on('click', function(e){ e.preventDefault(); $('.photo_container .sorting div a.sortLink').removeClass('selected'); $(this).addClass('selected'); var keyword = $(this).attr('data-keyword'); alert(keyword +' keywordset sort link'); sortThumbnails(keyword); }); $('.photo_container .sorting').css('margin-bottom', window.thumbnailSpacing+'px'); $('.photo_container .photos .thumbnail_container a.thumbnail').addClass('showMe'); positionThumbnails(); }); function sortThumbnails (keyword){ //alert(keyword); $('.photo_container .photos .thumbnail_container a.thumbnail').each(function(){ var thumbnailKeywords = $(this).attr('data-keywords'); //alert(thumbnailKeywords +' keyword thumbs'); if(keyword == 'all'){ $(this).addClass('showMe').removeClass('hideMe'); }else{ if(thumbnailKeywords.indexOf(keyword) != -1){ //alert(thumbnailKeywords.indexOf(keyword) +' index keyword'); $(this).addClass('showMe').removeClass('hideMe'); }else{ $(this).addClass('hideMe').removeClass('showMe'); } } }); positionThumbnails(); }; function positionThumbnails(){ /* debug */ $('.debug-remainder').html(''); $('.photo_container .photos .thumbnail_container a.thumbnail.hideMe').animate({opacity:0}, 500, function(){ $(this).css({ 'display':none, 'top':'0px', 'left':'0px' }); }); var containerWidth = $('.photo_container .photos').width(); var thumbnail_R = 0; var thumbnail_C = 0; var thumbnailWidth = $('.photo_container .photos .thumbnail_container a.thumbnail img:first-child').outerWidth() + window.thumbnailSpacing; var thumbnailHeight = $('.photo_container .photos .thumbnail_container a.thumbnail img:first-child').outerHeight() + window.thumbnailSpacing; var max_C = Math.floor(containerWidth / thumbnailWidth); $('.photo_container .photos .thumbnail_container a.thumbnail.showMe').each(function(index){ var remainder = (index%max_C)/100; var maxIndex = 0; /* debug */ $('.photo_container .debug-remainder').append(remainder+' - '); if(remainder == 0){ if(index != 0){ thumbnail_R += thumbnailHeight; } thumbnail_C = 0; }else{ thumbnail_C += thumbnailWidth; } $(this).css('display','block').animate({ 'opaciry':1, 'top':thumbnail_R+'px', 'left':thumbnail_C+'px' }, 500); var newWidth = max_C + thumbnailWidth; var newHeight = thumbnail_R + thumbnailHeight; $('.photo_container .photos .thumbnail_container').css({ 'width': newWidth + 'px', 'height': newHeight + 'px' }); }); } Thank you ahead of time for any help given... my brain hurts! I've got this little chunk of code running on my freelance portfolio site - on each page (different sections of my portfolio) I have 6 thumbnails and a full sized graphic with some descriptive info, you click the thumbnail and it switches the graphic and other info, that all works fine. But on one page I have some web stuff and I'd like to make the var 'clientinfo' into a link to go to the client's website. I know I need to add an array with the website links, but then I'm not sure how to implement it into the html, I've tried various things I've found on here but I'm not getting anywhere on my own. I know it's something pretty simple (for someone who knows what they're doing) but I just can't seem to grasp it. Can anyone help? the js is like this: $(function() { $(".image").click(function() { var image = $(this).attr("rel"); var title = $(this).attr("title"); var description = $(this).attr("content"); var clientinfo = $(this).attr("clientinfo"); $('#gallery').hide(); $('#gallery').fadeIn('slow'); $('#image').html('<img src="' + image + '"/>'); $('#title').html(title); $('#description').html(description); $('#client').html(clientinfo); return false; }); and then the HTML anchors are like this: <a href="#" rel="images/gallery/web/site1.png" title="Site One" content="This is the descriptive info for site number one" clientinfo="Site One link" class="image"><img src="images/gallery/web/t_site1thumb.png" class="thumb" border="0"/></a> Hi, I'm have set up a gallery site, pretty standard stuff with thumbnails to the right and big image to the left. I would like to add a fade in on the big image when the thumbnail is clicked and don't really know how to implement it. The big images are contained in a div called <#left> while the thumbs are within a div called <div class="gallery"> I have searched Google and these forums for a solution but haven't had any luck...can anyone help me out with this? Thanks J Hi, I am just about at wits end, and I am hoping someone here will be able to assist. I've searched and searched and have come close but to no avail. I found a nice image gallery code from "David's Kitchen" http://monc.se/kitchen/80/lightweigh...ith-thumbnails and have tweaked it to eactly what I wanted, however, I want to add an image caption of the alternate image text below the active picture. I've tried everything I could think of (with my limited knowledge) with no success. Any help would be GREATLY appreciated. Here is the code I have: Code: <html>
<head>
<style media="screen,projection" type="text/css">
/* begin gallery styling */
#jgal { list-style: none; width: 400px; position: relative; top: -12px; left: 40px; }
#jgal li { opacity: .5; float: left; display: block; width: 80px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { width: 80px; height: 60px; }
#jgal li.active img { display: block; float: left; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
</style>
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
<script type="text/javascript"> document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<script type="text/javascript">
var gal = {
init: function () {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
enlargedImg = document.createElement('img');
document.getElementById('jgal').parentNode.insertBefore(enlargedImg,document.getElementById('jgal').nextSibling);
enlargedImg.src = li[0].getElementsByTagName('img')[0].src;
li[0].className = 'active';
for (i = 0; i < li.length; i++) {
li[i].style.backgroundRepeat = 'no-repeat';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i], 'mouseover', function () {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j = 0; j < im.length; j++) {
im[j].className = '';
}
this.className = 'active';
enlargedImg.src = this.getElementsByTagName('img')[0].src;
});
}
},
addEvent: function (obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e" + type + fn] = fn;
obj[type + fn] = function () { obj["e" + type + fn](window.event); }
obj.attachEvent("on" + type, obj[type + fn]);
}
}
}
gal.addEvent(window, 'load', function () {
gal.init();
});
</script>
</head>
<body>
<ul id="gallery">
<li><a href="/bmfsweb/esg/image/Vactor Images2/industrial.htm" rel="nofollow" target="_blank"><img src="/bmfsweb/esg/image/Vactor Images2/2100_PLUS_PD_400w.jpg" alt="2100 Plus PD"></a></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/2100_Plus_Fan_400w.JPG" alt="2100 Plus Fan"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/2103_400w.jpg" alt="2103"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/F_Series_400w.jpg" alt="Front Hose Reel Jetter"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/Jetter_shrouded_400w.JPG" alt="Rear Hose Reel Jetter"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/2100_PD_400w.JPG" alt="2100 Classic PD"></li>
<li><img src="/bmfsweb/esg/image/Vactor Images2/2100_fan_400w.JPG" alt="2100 Classic Fan"></li>
</ul>
</body>
</html>
Again, any help is greatly appreciated. Thanks, Ben. I really like the the script posted at http://www.javascriptkit.com/script/...mbslider.shtml and I would like to use it, but I am having an issue making it work with version 6 of IE. In all newer versions of IE, Firefox, Chrome, Opera and Safari, it renders great, but with IE 6 all the images in the 'thumb' array display inline below the main canvas window. I know that IE6 is much out of date, but unfortunately that is the version that comes pre-loaded on XP SP3 and some of the workstations I support still use this version. Is there a way to pre-load the images, but only have the first image display in the canvas window? I have tried adjusting the CSS properties and tweaking the javascript, but have had no success after two days. I am relatively new at CSS and Javascript, so I have obviously exceeded my capability. Any suggestion would be appreciated! Thank you. I tried posting the code but it's too long... Page address: http://professorcuddlecore.com/paintings/ Problem: Click first or second photo, pops up fine, bottom text is behind the photo. You can view the JS by viewing source etc, sorry I can't fit it here. I spent 2-3 hours trying to figure out the problem but I'm new to JS and it looks like pretty convoluted code I'm using (obviously didn't write it myself, it's by "PopBox.") Thanks for any time spent helping me, pre-appreciated. Im coding with Mootools and JD Gallery I am running into a annoying Java Script Problem or CSS not sure. Here is the site www.NAFC.TV if you view it in FF it looks fine but in IE 8 you will find a space That separates the Picture From the JAVA thumbnails for the rotator making the images mispositioned and cut off. I cant figure out why that is happening can someone please help Thanks |
|||||||