JavaScript - Getting Next Thumbnail In Jquery

var s="attr"
var i=$(s)
// jQuery(elem).attr(attr,eval("elm"+attr));
jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this.

how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem".

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.

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

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.

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

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>

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.

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

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.

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

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>

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!

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.

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

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!