Hey everyone! I'm currently busy learning jQuery and developing a jQuery slideshow and I have a few problems just with the scrolling of the thumbnails of the images. I want to click on a thumbnail to show me a 'larger' version of it and the thumbnails must scroll with buttons (left and right).
I know there are a lot of plug-ins but I want to do this without the help of any plug-in! :) You will see when you run my code that everything works except the thumbnail scrolling. I will really REALLY appreciate it if I could get help with this...
This example has a lot of plug-ins but it's what I want to achieve in the end, http://flowplayer.org/tools/demos/scrollable/gallery.htm
I attached the 1.6 jQuery lib and then my code as follow...
/////// HTML code \\\\\\\
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<title> Image gallery </title>
</head>
<body>
<div id="page">
<h1> Image gallery</h1>
<div id="gallery">
<div id="panel">
<img id="largeImage" src="images/image_01_large.jpg" />
</div>
<div id="thumbs">
<div class="scrollingHotSpotLeft"></div>
<div class="scrollingHotSpotRight"></div>
<div class="scrollWrapper">
<div class="scrollableArea">
<img src="images/image_01_thumb.jpg" />
<img src="images/image_02_thumb.jpg" />
<img src="images/image_03_thumb.jpg" />
<img src="images/image_04_thumb.jpg" />
<img src="images/image_05_thumb.jpg" />
<img src="images/image_06_thumb.jpg" />
<img src="images/image_07_thumb.jpg" />
<img src="images/image_08_thumb.jpg" />
<img src="images/image_09_thumb.jpg" />
<img src="images/image_10_thumb.jpg" />
<img src="images/image_11_thumb.jpg" />
<img src="images/image_12_thumb.jpg" />
<img src="images/image_13_thumb.jpg" />
<img src="images/image_14_thumb.jpg" />
</div>
</div>
</div>
</div>
</body>
</html>/////// CSS code \\\\\\\
body { font-family: Helvetica; font-size: 12px; color: white; background-color: black}
#page { width: 585px; margin: 30px auto; }
#thumbs { padding-top: 10px; overflow: hidden; }
#thumbs img, #largeImage { border: 1px solid gray; padding: 4px; background-color: white; cursor: pointer; }
#thumbs img { float: left; margin-right: 6px; }
#description { background: black; color: white; position: absolute; bottom: 0; padding: 10px 20px; width: 525px; margin: 5px; }
#panel {width:979px;
min-height: 96%;
height: auto !important;
height: 96%;
text-align:left;
}
h1, h2 { font-size: 30px; color: #333; text-shadow: 0px 2px 3px #c5c5c5; text-align: center; }
h2 { font-size: 20px; line-height: 30px; }
h2 a { background-color: #F5FF4C; color: #333; text-decoration: none; padding: 5px;}
h2 a:hover { background-color: #d5dd42; }/////// SCRIPT code \\\\\\\
$(document).ready(function() {
$('#thumbs').delegate('img','click', function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
$('#description').html($(this).attr('alt'));
});
});As I said I will REALLY appreciate it if anyone could help me with this!