js Thumbnail Gallery

Can anyone advise if they know of a good js gallery that can do the following?

• List of thumbnails displayed to the left of a larger main image.
• Main image replaced by clicked or hovered thumbnail.
• Text caption displayed below image.

I am really just looking for a very simple layout that I can style myself with css.

I have spent endless days/hours searching the web and every time I find one I like I cannot use it for different reasons, e.g. does not work with older browsers, does not have text caption, don't know how to make it integrate with my site etc.

I am not experienced with js so I am afraid I would not know how to put one together myself :o

Many thanks in advance for any help...

Glenn.

Provide a list of where the thumbnail and larger images are located (URLs)
Associate the text captions to be linked with each of the larger images.

I don't mind helping, but I do not wish to put more work into the project than you do.
Would be nice if you provided the simple HTML layout you want displayed.

Thanks for your reply JMRKER,

I should have posted a link or some code in my post your right, but I was maybe thinking someone would know of an existing gallery I could just use! Probably asking too much and being a bit lazy, I know...

Anyway, I do already have a page setup but don't know how to make a text caption appear below the main image.

My sample page is here

Below is some of my html code and my js. I set this up following a guide I found somewhere as I am not at all experienced with js :o

There are multiple functions in the js as I may want to also display multiple galleries on the same page.

This is the type of gallery/layout I am looking for. Hopefully this will be enough information.

Thanks in advance...

HTML:

<div id="mainContainer">

<!-- Start rings -->

<div id="ringScroll-container">

<div id="ringScroll">

<ul>
<li><a href="images/rings/large/ring01_L.jpg" class="thumbnailRing"><img src="images/rings/thumbnails/ring01.jpg"
alt="Image 1" border="0"/></a> </li>

<li><a href="images/rings/large/ring02_L.jpg" class="thumbnailRing"><img src="images/rings/thumbnails/ring02.jpg"
alt="Thumbnail 2" border="0"/></a></li>

<li><a href="images/rings/large/ring03_L.jpg" class="thumbnailRing"><img src="images/rings/thumbnails/ring03.jpg"
alt="Image 1" border="0"/></a> </li>

<li><a href="images/rings/large/ring04_L.jpg" class="thumbnailRing"><img src="images/rings/thumbnails/ring04.jpg"
alt="Image 1" border="0"/></a> </li>

<li><a href="images/rings/large/ring05_L.jpg" class="thumbnailRing"><img src="images/rings/thumbnails/ring05.jpg"
alt="Thumbnail 2" border="0"/></a></li>

</ul>

</div>

</div>
<!-- End rings -->

<!-- Start Combined Ring -->

<div id="combinedRing"><img src="images/rings/large/ring01_L.jpg" alt="Main Image" id="mainImageRing" class="combinedRingImage"/></div>
</div>
<!-- End Combined Ring -->

js:

$(function() {
$('.thumbnailStrand').live('click', function() {
$('#mainImageStrand').hide();
$('#imageWrap').css('background-image', 'url(ajax-loader.gif)');
$('<img />').attr('src', this.href).load(function() {
$('#imageWrap').css('background-image', 'none');
$('#mainImageStrand').attr('src', $(this).attr('src')).fadeIn();
});
return false;
});
$('.thumbnailClasp').live('click', function() {
$('#mainImageClasp').hide();
$('#imageWrapClasp').css('background-image', 'url(ajax-loader.gif)');
$('<img />').attr('src',this.href).load(function() {
$('#imageWrapClasp').css('background-image', 'none');
$('#mainImageClasp').attr('src', $(this).attr('src')).fadeIn();
});
return false;

});
$('.thumbnailRing').live('click', function() {
$('#mainImageRing').hide();
$('#imageWrapRing').css('background-image', 'url(ajax-loader.gif)');
$('<img />').attr('src',this.href).load(function() {
$('#imageWrapRing').css('background-image', 'none');
$('#mainImageRing').attr('src', $(this).attr('src')).fadeIn();
});
return false;

$(".thumbnail").click(function() {
$("#mainImage").attr("src", $(this).attr("src"));
});

});

This version does not use the JQuery library, so it is smaller and easier to modify, IMO.
You can change the formatting (positions, size, etc.), 'baseURL' and 'imgList' array to reference your images.
Multiple galleries are easy to add, but again you will need to show your intended layout.

Code:

---

<html>
<head>
<title>Gallery</title>
<script type="text/javascript">
var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgList = [
  ['11.jpg','Exhausted'],
  ['12.jpg','Confused'],
  ['13.jpg','Ecstatic'],
  ['14.jpg','Guilty'],
  ['15.jpg','Suspicious'],
  ['21.jpg','Angry'],
  ['22.jpg','Hysterical'],
  ['23.jpg','Frustrated'],
  ['24.jpg','Sad'],
  ['25.jpg','Confident'],
  ['31.jpg','Embarrased'],
  ['32.jpg','Happy'],
  ['33.jpg','Mischievous'],
  ['34.jpg','Disgusted'],
  ['35.jpg','Frightened']          // NOTE: no comma after last entry
];

function SetImage(IDS,imgPtr) {
  var ids = '';
  var ImageList = new Array();
  if (IDS.indexOf('FC') == 0) { ImageList = imgList; ids = 'BigImage'; }
  document.getElementById(ids).src=baseURL+ImageList[imgPtr][0];
  document.getElementById(ids).alt=baseURL+ImageList[imgPtr][1];
  document.getElementById(ids+'Caption').innerHTML = ImageList[imgPtr][1];
}
function InitImage() {
  var str = '';
  for (var i=0; i<imgList.length; i++) {
    str += '<img id="FC'+i+'" src="'+baseURL+imgList[i][0]+'" alt="'+imgList[i][1]+'"'
    + 'title="'+imgList[i][1]+'" height="75" width="75" onMouseOver="SetImage(this.id,'+i+')">';
  }
  return str;
}
window.onload = function() {
  document.getElementById('SmallImages').innerHTML = InitImage();
}

</script>
</head>
<body>
<table border="0">
  <tr>
    <td style="width:100">&nbsp;</td>
    <td>
      <div style="height:95; width:300;overflow:auto;"><nobr>
      <div id="SmallImages"></div>
      </nobr></div>
    </td>
  </tr>
  <tr>
  <td>&nbsp;</td>
  <td>
    <img id="BigImage" height="425" width="600"
      src='http://www.nova.edu/hpd/otm/pics/4fun/11.jpg'
      alt='http://www.nova.edu/hpd/otm/pics/4fun/11.jpg'>
 <br><span id="BigImageCaption">Image Caption</span>
 <br>
 </td>
</tr></table>
</body>
</html>

---

Note: There are many more examples of image galleries with a 'search' of this particular forum as well as some others on the web.

Thanks for this JMRKER, I will see if I can make this work.

On the multiple galleries on one page, I have one setup here but I cannot get it to work in IE8. I have spent lots of time researching and posting questions on forums to see if I could figure out why, but never got anywhere.

This is another one I found by searching the web. I did post a comment on the source site to ask why it might not work in IE8 but never seen any reply.

I have searched the web for others but each time did not find one that works well for me. However hopefully this one you advised of will.

I will post back my results.

Cheers..

I don't think I have the images correctly positioned or if the descriptions are anywhere close.
You can easily change them to your needs.
Here's an example of how it might be done.

You could also eliminate the table positioning with a bit more CSS changes.

Code:

---

<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<script type="text/javascript">
var baseURL = 'http://www.test25.net/gems/jQueryUI/myDesign/images/';
var imgList = [
  ['IMG_8720_.jpg','color A'],
  ['IMG_9112.jpg','color B'],
  ['IMG_9158.jpg','color C'],
  ['IMG_8720_small.jpg','color A'],
  ['IMG_9112_small.jpg','color B'],
  ['IMG_9158_small.jpg','color C'],

  ['IMG_8626.png','clasp D'],
  ['IMG_8577.png','clasp E'],
  ['IMG_8583.png','clasp F']
];

function SetImage(IDS,imgPtr) {
  var ids = '';
  var ImageList = new Array();
  if (IDS.indexOf('FC') == 0) { ImageList = imgList; ids = 'BigImage'; }
  document.getElementById(ids).src=baseURL+ImageList[imgPtr][0];
  document.getElementById(ids).alt=baseURL+ImageList[imgPtr][1];
  document.getElementById(ids+'Caption').innerHTML = ImageList[imgPtr][1];
}
function InitImage(s,e) {
  var str = '';
  for (var i=s; i<e; i++) {
    str += '<img id="FC'+i+'" src="'+baseURL+imgList[i][0]+'" alt="'+imgList[i][1]+'"'
    + 'title="'+imgList[i][1]+'" height="75" width="75" onMouseOver="SetImage(this.id,'+i+')">';
    if ((i &#37; 2) == 1) { str += '<br>'; }
  }
  return str;
}
window.onload = function() {
  document.getElementById('SmallImagesLeft').innerHTML = InitImage(0,6);
  document.getElementById('SmallImagesRight').innerHTML = InitImage(6,9);
  SetImage('BigImage','0');
}

</script>
</head>
<body>
<center>
<table border="0">
  <tr>
    <td>
      <div style="height:95; width:300;overflow:auto;"><nobr>
      <div id="SmallImagesLeft"></div>
      </nobr></div>
    </td>
    <td>
      <img id="BigImage" height="425" width="600"
          src='http://www.test25.net/gems/jQueryUI/myDesign/images/IMG_8720_.jpg' alt=''>
      <div id="BigImageCaption" style="text-align:center">Image Caption</div>
    </td>
    <td>
      <div style="height:95; width:300;overflow:auto;"><nobr>
      <div id="SmallImagesRight"></div>
      </nobr></div>
    </td>
  </tr>
</table>
</center>
</body>
</html>

---

Untested in any MSIE as I'm at work now using an iMac and FF browser.
Would need to test this tonight when I'm on my home computer.

That looks like it will work very well for me.

I'll post back once I have it setup and working.

Many thanks again for your assistance JMRKER...

Can I ask you one more thing JMRKER,

How can I add two "BigImages" to my page?

Even though the 2nd "BigImage" will actually be small, how can I tell the second one to be replaced by the images that are on the right, the "SmallImagesRight" images.

So the images on the left - "SmallImagesLeft" - will replace the main "BigImage", and the images on the right - "SmallImagesRight" - replace a smaller image that is placed on top of the main image. Maybe I'd call this "BigImage2".

I have a sample page setup here

I have tried a few different things with the js but can't seem to get it right.

Cheers...

You will need to adjust your image positions for the overlapping images
but I'll wait on this for more images.

Code:

---

<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<script type="text/javascript">
// JavaScript Document

  var baseURL = 'http://www.test25.net/gems/jQueryUI/myDesign/images/';  // Needed only for remote testing
// var baseURL = 'images/';  // Normal, local directory
var imgList = [
  ['IMG_8720_.jpg','Black Strand 1'],
  ['IMG_9112.jpg','Blue Strand 1'],
  ['IMG_9158.jpg','Gold Strand 1'],         
  ['IMG_8720_.jpg','Black Strand 2'],
  ['IMG_9112.jpg','Blue Strand 2'],
  ['IMG_9158.jpg','Gold Strand 2'],
 
  ['IMG_8577.png','Black Clasp 1'],
  ['IMG_8583.png','Gold Clasp 1'],
  ['IMG_8626.png','White Clasp 1'], 
  ['IMG_8577.png','Black Clasp 1'],
  ['IMG_8583.png','Gold Clasp 1'],
  ['IMG_8626.png','White Clasp 1']  // NOTE: no comma after last entry
];

function SetImage(IDS,imgPtr) {
  var ids = '';
  if (imgPtr < (imgList.length/2)) { ids = 'BigImage1'; } else { ids = 'BigImage2'; }
  document.getElementById(ids).src=baseURL+imgList[imgPtr][0];
  document.getElementById(ids).alt=baseURL+imgList[imgPtr][1];
  document.getElementById(ids+'Caption').innerHTML = imgList[imgPtr][1];
}

function InitImage(s,e) {
  var str = '';
  for (var i=s; i<e; i++) {
    str += '<img id="FC'+i+'" src="'+baseURL+imgList[i][0]+'" alt="'+imgList[i][1]+'"'
    + 'title="'+imgList[i][1]+'" height="75" width="75" onClick="SetImage(this.id,'+i+')">';
    if ((i % 2) == 1) { str += '<br>'; }
  }
  return str;
}
window.onload = function() {
  document.getElementById('SmallImagesLeft').innerHTML = InitImage(0,6);
  document.getElementById('SmallImagesRight').innerHTML = InitImage(6,12);
  // adjust following pointers if image counts are not equal (bracelet# != clasp#)
  SetImage('BigImage1','0');
  SetImage('BigImage2','6');
}

</script>
</head>
<body>
<center>
<table border="0">
  <tr>
    <td>
      <div style="height:95; width:300;overflow:auto;"><nobr>
      <div id="SmallImagesLeft"></div>
      </nobr></div>
    </td>
    <th>
      <div id="mainImage1">
        <img id="BigImage1" src="http://www.test25.net/gems/jQueryUI/myDesign/images/IMG_8720_.jpg" alt=''>         
        <div id="BigImage1Caption" style="text-align:center">Image Caption</div>
      </div>
      <div id="mainImage2">
        <img id="BigImage2" height="75" width="75"
            src='http://www.test25.net/gems/jQueryUI/myDesign/images/IMG_8626.png' alt=''>         
        <div id="BigImage2Caption" style="text-align:center">Image Caption</div>
      </div>
    </th>
    <td>
      <div style="height:95; width:300;overflow:auto;"><nobr>
      <div id="SmallImagesRight"></div>
      </nobr></div>
    </td>
  </tr>
</table>
</center>
</body>
</html>

---

That works great, cheers for this.

I now just need to sort out my styling and I should be sorted!

You don't happen to know how I can style the images in an "ul" with "li's" do you? Because the images are provided from the js and not directly in the html I don't know how I can style these. I wan't to have them in an "ul" as list items so they are in-line and I can set a max width on the containing div and have a horizontal scroll bar not a vertical one, like on my page here.

This is my page so far - here

Same for the "Image Captions", because these are provided from the js I don't know how I can instert hypperlinks or divs into the caption.

Will this even be possible?

I'm not exactly sure what change you want to make with the 'ul' and 'li' item, so this is just a guess.

Concerning the hyperlinks, that is a small change.
Would need to know where you wanted to direct to with a particular image or caption.

Code:

---

<html>
<head>
<title>Gallery</title>
<script type="text/javascript">

//<![CDATA[
// JavaScript Document

  var baseURL = 'http://www.test25.net/gems/jQueryUI/myDesign/images/';  // Needed only for remote testing
// var baseURL = 'images/';  // Normal, local directory
var imgList = [
  ['IMG_8720_.jpg','Black Strand 1'],
  ['IMG_9112.jpg','Blue Strand 1'],
  ['IMG_9158.jpg','Gold Strand 1'],         
  ['IMG_8720_.jpg','Black Strand 2'],
  ['IMG_9112.jpg','Blue Strand 2'],
  ['IMG_9158.jpg','Gold Strand 2'],
 
  ['IMG_8577.png','Black Clasp 1'],
  ['IMG_8583.png','Gold Clasp 1'],
  ['IMG_8626.png','White Clasp 1'], 
  ['IMG_8577.png','Black Clasp 1'],
  ['IMG_8583.png','Gold Clasp 1'],
  ['IMG_8626.png','White Clasp 1']  // NOTE: no comma after last entry
];
function InitImage(s,e) {
  var str = '<ul>';
  for (var i=s; i<e; i++) {
    str += '<li><img id="FC'+i+'" src="'+baseURL+imgList[i][0]+'" alt="'+imgList[i][1]+'"'
    + 'title="'+imgList[i][1]+'" height="75" width="75" onClick="SetImage(this.id,'+i+')"></li>';
  }
  str += '</ul>';
  return str;
}
function SetImage(IDS,imgPtr) {
  alert('Change element: '+IDS+'\nwith pointer: '+imgPtr);
}
window.onload = function() {
  document.getElementById('SmallImagesLeft').innerHTML = InitImage(0,6);
  document.getElementById('SmallImagesRight').innerHTML = InitImage(6,12);
  // adjust following pointers if image counts are not equal (bracelet# != clasp#)
//  SetImage('BigImage1','0');
//  SetImage('BigImage2','6');
}

//]]>
</script>

<style type="text/css">
li { list-style-type:none; display:inline; }
</style>

</head>
<body>
<div style="height:95; width:250;overflow-y:hidden; overflow-x:scroll; white-space:nowrap;">
 <div id="SmallImagesLeft"> </div>
</div>
<p>&nbsp;</p>
<div style="height:95; width:250;overflow-y:hidden; overflow-x:scroll; white-space:nowrap;">
 <div id="SmallImagesRight"> </div>
</div>

</body>
</html>

---

That was a good guess! That is what I am looking for only I need to be able to add multiple rows of thumbnail images, like the sample I have setup on this page here.

I normally don't have any problems setting this up in html, but I am getting lost in the js. I really need to learn this language!

On the hypperlinks, I am looking to add a standard html link to another webpage in the image caption. So add a link to a page that has more details about the specific item.

Cheers...

PS. will send you a PM regarding something else, hope this is ok.