JavaScript - Horizontal Scrolling Thumbnail Gallery

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

Dear 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 Guys,

I've been progressing along ok onthe CSS side of things but am having some trouble on the javascript side of things. I've decided to jazz a site up with a scrolling gallery from a template i'm using but unfortunately I don't know how to get the main image to change on a click of the smaller one? can anybody please help a brother out!

here's the site template - http://dev.jeffking.co.uk/index.html

All i'm after is the big main image to change to the same (larger) image of the smaller one in the scrollbar below the main frame.

Many thanks!

Hi,

I need some help with getting the browser to automatically scroll to the top when the user slides horizontally. It's probably easier for you to see what I mean! http://www.zabirvalliji.co.uk This is my website (still a working progress!!). If you click the links you will see the website scrollings horizontally. If you scroll to the bottom of 'portfolio', and then click another section, you will see that the browser stays at the bottom. Basically, I want the browser to automatically slide to the top whenever the user goes to another section.

Is anyone able to help me?

Hello,

I'm Chris, welcome everyone. I'm in a need of help. I'm writing application that displays messages from users. This messages are kept in external XML file and every time user post a new message this XML document is appended.

What I want to do is to display all messages at the bottom of screen. Messages have to slide horizontally in one line. To do that I used this code:

Code:

horizontalScroll.js:
var scrllTmr;
window.onload = function(){
	document.getElementById('scroll').style.overflow = 'hidden';
	document.getElementById('scrollme').style.float = 'left';
	document.getElementById('scrollme').style.position = 'relative';

	cw = parseInt(document.getElementById('scroll').offsetWidth/2);
	w = parseInt(document.getElementById('scrollme').offsetWidth/2);
	
	lft = cw + w;
	document.getElementById('scrollme').style.left = lft + "px";
	scrollStep(cw,w,lft);
}
function scrollStep(cw,w,lft){
	if(lft == w * -1)
		lft = cw + w;
	document.getElementById('scrollme').style.left = lft + "px";
	
	if(scrllTmr)
		clearTimeout(scrllTmr);
	scrllTmr = setTimeout('scrollStep(cw,w,' + (lft - 1) + ')',10);
}

index.html:
<div id="scroll"><div id="scrollme">
<h1 style="white-space: nowrap;">Lets scroll this right here 1 | Lets scroll this right here 2 | Lets scroll this right here 3 | Lets scroll this right here 4 | Lets scroll this right here 5 | Lets scroll this right here 6 | Lets scroll this right here 7 | Lets scroll this right here 8 | Lets scroll this right here 9 | Lets scroll this right here 10 | Lets scroll this right here 11 | Lets scroll this right here  12 | Lets scroll this right here 13 | Lets scroll this right here 14 | Lets scroll this right here 15 | Lets scroll this right here 16 | Lets scroll this right here 17 | Lets scroll this right here 18 | Lets scroll this right here 19 | Lets scroll this right here 20
</h1></div></div>

The problem with that code is that at 1/3 length of text it starts from beginning and this is wrong. The text have to scroll to the very end and then start to scroll from beginning again.

Another thing, that I'm unable to deal with is refreshing/reloading the content from XML file. What I need to do is to check if XML was changed/appended and if it was then I have to add this added message to text that scrolls horizontally and view it at the end of horizontal text. I'm pretty sure I have to use Ajax here. Also, if text from XML file will be added to horizontal text page cannot refresh and start scrolling from beginning, but instead of that if have to append horizontal text and continue to scroll showing appended message at the end.

Any advices, please?


Thanks,
Chris

Hi

I'm looking for a simple ticker that scrolls horizontally across the top of the homepage of a site I'm working on. Ideally I would like one for both Twitter and RSS feeds, but either is good.

If anyone knows where I can find one that's simple to implement that would be great.

Kind Regards

So about a couple of weeks ago I decided to start learning the basics of web development and design through the w3schools website. I found no problems learning HTML/XHTML and CSS1/2/3. I decided the best way to learn these languages was to implement something from each language into a project (a website, which is currently stored locally on my laptop)

The project is a site dedicated to favourite images of my family. In it is a main image viewer, followed by a nav bar underneath displaying thumbnails of a few images. I implemented a small JS script so when I click a thumbnail, the corresponding image is displayed within the main image viewer.

I then moved onto jQuery in my development knowledge quest, and decided the next thing I wanted to do was add more images to the nav bar and be able to scroll (with two buttons) across the nav bar. This is where I've hit an end stop in being able to do this with no help.

So to begin with, this is my HTML for the thumbnail navbar:

Code:

<div class="scrollWrapper">
<div class="controlsPrev"></div>
<div class="controlsNext"></div>
		

<div class="scrollableArea">
		<p><input type="image" src="images/home/54.jpg" alt="Image" onclick="displayImage('images/home/54.jpg')" /></p>
		<p><input type="image" src="images/home/55.jpg" alt="Image" onclick="displayImage('images/home/55.jpg')" /></p>
		<p><input type="image" src="images/home/56.jpg" alt="Image" onclick="displayImage('images/home/56.jpg')" /></p>
		<p><input type="image" src="images/home/57.jpg" alt="Image" onclick="displayImage('images/home/57.jpg')" /></p>
		<p><input type="image" src="images/home/58.jpg" alt="Image" onclick="displayImage('images/home/58.jpg')" /></p>
		<p><input type="image" src="images/home/59.jpg" alt="Image" onclick="displayImage('images/home/59.jpg')" /></p>
		<p><input type="image" src="images/home/60.jpg" alt="Image" onclick="displayImage('images/home/60.jpg')" /></p>
		<p><input type="image" src="images/home/61.jpg" alt="Image" onclick="displayImage('images/home/61.jpg')" /></p>
		<p><input type="image" src="images/home/62.jpg" alt="Image" onclick="displayImage('images/home/62.jpg')" /></p>
		<p><input type="image" src="images/home/63.jpg" alt="Image" onclick="displayImage('images/home/63.jpg')" /></p>
		

</div>
</div>
</div>

CSS Styling (external sheet):

Code:

div.scrollWrapper
{
background-color:#252525;
width:960px;
height:115px;
display:block;
overflow:hidden;
}

div.scrollableArea
{
height:115px;
}

div.scrollableArea p
{
margin:0;
}
div.controlsPrev
{
height:115px;
width:65px;
background-color:#FFFFFF;
position:absolute;
}

div.controlsNext
{
height:115px;
width:65px;
background-color:#FFFFFF;
position:absolute;
right:195px;
}

My first problem is that now I have added further <p> elements to the navbar, they "wrap" to the next line, causing scrollableArea to be double the height.

The second problem is implementing some code to bring the navbar to life. Since it's jQuery (and I've linked the googleapis library in my html document) I thought the custom animation methods would be the best way to create this effect. Though I've thought of a few obstacles in my way, namely:

1. How to hide the right most or left most (depending on which control class eg. Prev or Next) <p> element and show the opposite <p> element at the same time, and also shift or slide all other <p> elements in view across (again depending on which control class or direction control I have clicked).

2. I want flexible code, that allows for (in the future) more <p> elements. All my code has been based around flexibility and the fact that it will be constantly changing at a fast rate. Therefore I think a function within my script to count the number of <p> elements within the scrollableArea would resolve this issue somewhat.

Any help or advice given on the subject would be greatly appreciated, if there would be another method to get the desired effect then please share. I've stayed away from plug-ins apart from the generic jQuery library provided by google, I want to be able to say I have created everything by myself and not "cheated" if you will. It doesn't take a genius to implement plug-ins into code, I see it on various websites and have seen developers use them before and claim them as their own.

I took a look at a few tutorials on the subject, but I haven't found anything specific to my cause.

Cheers dudes,

Johnny.

Code:

<ul>
<li><a href="dog.jpg"><img src="dog_t.jpg"  alt="dog" /></a></li>
<li><a href="cat.jpg"><img src="cat_t.jpg"  alt="cat" /></a></li>
<li><a href="pig.jpg"><img src="pig_t.jpg"  alt="pig" /></a></li>
<li><a href="cow.jpg"><img src="cow_t.jpg"  alt="cow" /></a></li>
</ul>

My jQuery is set up so that when I click on a thumbnail, a div opens up with the bigger image. I also want the thumbnail of the next image to appear in the same div. So if I click the cat, I want to see the large cat and the pig thumb. How do I tell it that I want the next IMG inside the next A inside the next LI?

We got our image view situation about 95% figure out, but need one last thing. How can we tell the image viewer to display 1 thumbnail, no matter the case?

When a product only has one picture, as opposed to 2-4, there is no thumbnail associated with the main image. We would like to have one thumbnail appear no matter the case, as it fits in with page design. Anyone know how to edit the code to do this?

If you want a link to check it out on our site, please pm or email me.

Here is the javascript.
Code:

<script language="javascript"><!--
//thumbnail script
var image1,image2,image3,image4,selectedimage;
var imagemaxwidth, imagemaxheight

imagemaxwidth=[image_medium_w];
imagemaxheight=0;

image1="[image1]";
image2="[image2]";
image3="[image3]";
image4="[image4]";
imagecaption1="[imagecaption1]";
imagecaption2="[imagecaption2]";
imagecaption3="[imagecaption3]";
imagecaption4="[imagecaption4]";
selectedimage='[image1]'; //pre load image1
zoom_enable=[3dzoom_enabled]; //0 = zoomify | 1 = magiczoom

function image_click(clicks)
{
if (document.getElementById('listing_main_image_link')!=undefined)
{
if (zoom_enable==1)
{
selectedimage=eval('image'+clicks);
MagicZoomPlus.update('listing_main_image_link', selectedimage, 'thumbnail.asp?file=' + selectedimage + '&maxx='+imagemaxwidth+'&maxy='+imagemaxheight, 'show-title: false');
changecontent("imagecaptiont",eval('imagecaption'+clicks));
document.getElementById('listing_main_image_link').href=this.name;
}else
{

selectedimage=eval('image'+clicks);
document.getElementById('large').src='thumbnail.asp?file=' + selectedimage + '&maxx='+imagemaxwidth+'&maxy='+imagemaxheight;
document.getElementById('listing_main_image_link').href='#';
document.getElementById('listing_main_image_link').onclick=zoomify_popup;
changecontent("imagecaptiont",eval('imagecaption'+clicks));
}}
}
function zoomify_popup()
{
popupsimple('zoomify.asp?catalogid=[catalogid]&img=' + selectedimage ,500,500);
}

function check_stock(what,partnum)
{
var soption;
var i;
var product_availability='[availability]';
var backordermode='[allowbackorder]';
var avail_instock='[productAvailability-Instock]';
var avail_outofstock='[productAvailability-Outofstock]';
var avail_backorder='[productAvailability-Backorder]';
var optionfound=0;

if (inventoryarray[catalogid].length==0) //if there is no advanced options, don't look for stock
{
return true;
}
else
{
for(i=0;i<inventoryarray[catalogid].length;i++)
{
soption=inventoryarray[catalogid][i];
field_array=soption.split("-");
//Dynamic Part for advanced options
if (typeof((idarray[catalogid])) != "undefined")
{
soptionid=idarray[catalogid][i];
aoprice=aopricearray[catalogid][i];
if (field_array[0]==partnum)
{
if (soptionid != '')
changeid(soptionid);
if (aoprice != '0')
changeprice(aoprice);
}
}

if ((field_array[0]==partnum))
{
changecontent("product_inventory",field_array[1]);
if (eval(GetValue(what,"qty-0"))>field_array[1])
{
optionfound=optionfound+1;
if (backordermode==1)
{
changecontent("availability",avail_backorder);
return true;
optionfound=optionfound+1;
}
else
{
changecontent("availability",avail_outofstock);
alert("The options you selected are not currently available.");
optionfound=optionfound+2;
return false;
}
}

}
}

if (optionfound==0)
{
changecontent("availability",product_availability);
return true;
}

if (optionfound==1)
{
changecontent("availability",avail_instock);
return true;
}
}
}


function add_wishlist()
{
document.add.action = "add_cart.asp?action=addWishList";
document.add.submit();
}

function add_giftregistry()
{
document.add.action = "add_cart.asp?action=addGiftRegistry";
document.add.submit();
}

function check_and_add(formx)
{

if (document.add.std_price==null)
{
document.add.submit();
}
else
{
var readytoadd=validateValues(formx,1)
if (readytoadd==true)
{
document.add.submit();
}
}
}

// --></script>

Hey, I have a jQuery script running on my site that makes it so when you click on a thumbnail, a different overflow:hidden div is scrolled to the anchor point that thumbnail was linking to.

I want to make it so the thumbnail that you clicked becomes selected (and all over thumbnails become unselected). This could be with a border, a shadow, an image appearing behind it, opacity - basically anything (preferably an image appearing behind it).

I'm pretty much a javascript noob, but common sense tells me that this isn't possibly with basic CSS. How do I go about doing this?

PS, if you want a clearer picture of what I'm referring to on my site, check http://bit.ly/83ftPF

Thanks a ton for your time, I really appreciate it!
-Joel

Hi,

Hope that someone can help me with a little problem I have. I building a little page that has some photos of the family. Ive created little thumbnails and large versions of each image.

What im trying to achieve is that in div a: i have each of the thumbnails and in div b: it displays a large verison on the image thats clicked.

Ive seen a few methods when searching using java and ajax etc, but i'm not sure which is the best way to do this and the most simple so that I dont have to create a new page for each image.

Thanks for your help in advance.

Hi,

Here's the slideshow embed code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<title>Slideshow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#large {width:448px; height:336px; background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;}
#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}
img {padding:1px; width:80px; height:60px;}
img:hover {background:#00F;}
</style>
</head> 
<body> 
<div id="large"></div>  
<div id="thumbs"> 
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg)';">  
<img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg)';"> 
<img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg)';">
</div> 
</body>
</html>

I wonder how I can highlight the active thumbnail so its background remains blue until I click another one.
I also like to avoid the inline JavaScript. Any feedback to improve the coding is appreciated!

Best regards
Mike

Hey guys. I am using a javascript slideshow called fadeshow. (Main code below).

I am wondering if there is a way to have thumbnail support, so I could allow the users to click on a thumbnail and have fadeshow go to that photo in the array. I have gotten a next / previous button working but also would like to add thumbnails.

How would I write an a href link to specify an image in the array? Can this be done?

Code:

<script type="text/javascript">
var mygallery2=new fadeSlideShow({
  wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
  dimensions: [1000, 665], //width/height of gallery in pixels. Should reflect dimensions of largest image
  imagearray: [
  ["images/1m.jpg"],
  ["images/2m.jpg"],
  ["images/3m.jpg"]
  ],
  displaymode: {type:'manual', pause:2500, cycles:0, wraparound:true},
  persist: false, //remember last viewed slide and recall within same session?
  fadeduration: 500, //transition duration (milliseconds)
  descreveal: "always",
  togglerid: "fadeshow2toggler"
})
</script>

<div id="fadeshow2toggler">

<a href="#" class="next"><div id="fadeshow2"></div></a><!--allows clicking the photo for next-->

<a href="#" class="prev">Previous</a>  <a href="#" class="next">Next Image</a> (&nbsp;<span class="status"></span>&nbsp;)</span>

</div><!--end fadeshow2toggler-->

<!--thumbnails i would like to work-->
<a href= # ><img src="images/thumbnail1.jpg"></a>
<a href= # ><img src="images/thumbnail2.jpg"></a>
<a href= # ><img src="images/thumbnail3.jpg"></a>

Any advice appreciated!

Hi,
I have a table with 2 colums, the left column is to preview image and the right column is for 4 small thumbnails. Iwant the preview picture to change when clicked on the individual thumbnail.
Can someone please help me on this?
Code:

<table width="816" height="303" border="1">
  <tr>
    <td width="396" height="297">&nbsp;</td>
    <td width="404" valign="top"><table width="100%" border="1">
      <tr>
        <td width="52%" height="166"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200"/> </td>
        <td width="48%"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
      </tr>
      <tr>
        <td height="174"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
        <td><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
      </tr>
    </table></td>
  </tr>
</table>

New to this, worked through the w3c tutorials and am really fascinated by some of the concepts. I'm only familiar with html, css, js (basics), so am trying to keep things as simple as I can for this.

For simplicity I'll use books.xml with a listing of books. Each book has a <title><author><year><price> and <image> element. The images are stored in a folder called "images" a path is listed in the xml document.

Using js and an array I can loop through the xml file and have it extract each node into a table, if I mouseOver a ROW in the table, it displays that listing in a DIV above and I would like it to display the image/thumbnail for that particular listing within another div called thumbnail which is in the same location regardless of which listing you mouseOver.

Quote:
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;


x=xmlDoc.getElementsByTagName("book");
i=0;

function displayBook(i)
{
title=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
author=(x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue);
price=(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
genre=(x[i].getElementsByTagName("genre")[0].childNodes[0].nodeValue);
txt="Author: "+author+"<br />Title: "+title+ "<br />Year: "+year+"<br />Price: "+price + "<br />Category: " +genre;
document.getElementById("showBook").innerHTML=txt;
}



Quote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<script type="text/javascript" src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="stylin.css" />
</head>
<body onload="displayBook(0)">
<div id="wrap" width="40%">
<div id="desc">Listing: </div>
<div id='showBook'></div><br />

<div id="thumbnail">thumbnail
<script type="text/javascript">
document.write(????????????????);
</script></div>


<script type="text/javascript">
document.write("<table border='1'; >");
document.write("<caption>Mouse over a cell to view description:</caption");
document.write("<tr><td class=top>Book Title</td><td class=top>Category</td><td class=top>Cost: </td></tr>");
for (var i=0;i<x.length;i++)
{
document.write("<tr onMouseOver='displayBook(" + i + ")'; >");
document.write("<td>");
document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("genre")[0].childNodes[0].nodeValue);
document.write("</td><td>" + "$");
document.write(x[i].getElementsByTagName("price")[0].childNodes[0].nodeValue );
document.write("</td><td>");
document.write(x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue );
document.write("</td></tr>");
}
document.write("</table>");
</script></div></div>

</body>
</html>
So the way this looks is there's a grey div. At the top it says listing, and when the body loads it lists the [0] first entry from the array. To the right of this is a small div called thumbnail that is empty and I would like it to load the relevant image from the path in the <image> tag in the xml file.

Below the listing is a table with 4 columns (title, genre, price, image) and an equal number of rows to the number of listings in the xml file. Under the "image" column it just shows the path to the image.

So how do I tie the empty thumbnail div to the listing so it'll just add the path from the xml <image> tag into a <img src="pathnamefromxmldocument">

Thanks in advance!