PDA

View Full Version : Image Thumbnail Viewer II - able to add scrollbars?


tortuga
05-22-2007, 06:37 AM
1) Script Title: Image THumbnail Viewer II and Swiss Army Slide Show

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

3) Describe problem: Is it possible to add a vertical scrollbar to the viewer on the thumbnail portion? This is the code I'm using and everything works. Thank you!
````````````````````````````

<script type="text/javascript" src="JS/thumbnailviewer2.js" defer="defer">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>
<script type="text/javascript">

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=false;

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["images/work/Shot5.jpg", ""];
slides[1] = ["images/work/SDSShop3.jpg", ""];
slides[2] = ["images/work/Shot21.jpg", ""];
slides[3] = ["images/work/Shot23.jpg", ""];
slides[4] = ["images/work/Shot32.jpg", ""];
//optional properties for these images:
slides.no_controls=1; // will set a slide show with no controls
slides.no_descriptions=1; //use for no descriptions displayed
slides.no_added_linebreaks=1; //use for no added line breaks in formatting of texts and controls

</script>

<script src="JS/swissarmy.js" type="text/javascript">

/***********************************************
* Swiss Army Image slide show script - © John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/

</script>
</head>

<body id="primaryContent" class="body">
<p><!-- #BeginLibraryItem "/Library/Menu.lbi" -->
<ul id="navBar">
<li><a href="index.html">HOME&nbsp;</a></li>
<li><a href="Services.html">SERVICES&nbsp;</a></li>
<li><a href="Equipment.html">EQUIPMENT&nbsp;</a></li>
<li><a href="QA.html">QA&nbsp;</a></li>
<li><a href="TheWork.html">THE WORK&nbsp;</a></li>
<li id="Contact"><a href="Contact.html">CONTACT&nbsp;</a></li>
</ul><!-- #EndLibraryItem --></p>
<div id="background" class="subBackgroundImage">
<div id="theWorkWrapper">
<div id="theWorkBorderImage" align="center">
<div id="theWorkLoadAreaImage">

<table border="0" width="600px" ellspacing="0" cellpadding="0">
<tr height="25px"></tr>
<tr>
<td width="5px">&nbsp;</td>
<td width="10px" valign="top" style="">
<a href="images/work/Shot5.jpg" rel="enlargeimage::mouseover" rev="theWorkLoadArea::http://www.cssdrive.com" title="Nuts and Bolts. OK, they aren't nuts and bolts, but something interesting. What are they exactly?"><img border="0" src="images/work/Shot5.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
<a href="images/work/SDSShop3.jpg" rel="enlargeimage::mouseover" rev="loadarea::http://www.codingforums.com" title="SDSShop 3"><img border="0" src="images/work/SDSShop3.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
<a href="images/work/Shot21.jpg" rel="enlargeimage::mouseover" rev="theWorkLoadArea::http://www.cssdrive.com" title="Shot 21"><img border="0" src="images/work/Shot21.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
<a href="images/work/Shot23.jpg" rel="enlargeimage::mouseover" rev="theWorkLoadArea::http://www.cssdrive.com" title="Shot 23"><img border="0" src="images/work/Shot23.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
<a href="images/work/Shot32.jpg" rel="enlargeimage::mouseover" rev="theWorkLoadArea::http://www.cssdrive.com" title="Shot 32"><img border="0" src="images/work/Shot32.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
<a href="images/work/Shot34.jpg" rel="enlargeimage::mouseover" rev="theWorkLoadArea::http://www.cssdrive.com" title="Helicopter Seat"><img border="0" src="images/work/Shot34.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
<a href="images/work/Shot35.jpg" rel="enlargeimage::mouseover" rev="theWorkLoadArea::http://www.cssdrive.com" title="Another part of the Helicopter Seat"><img border="0" src="images/work/Shot35.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
<a href="images/work/Shot12.jpg" rel="enlargeimage::mouseover" rev="theWorkLoadArea::http://www.cssdrive.com" title="Shot 12"><img border="0" src="images/work/Shot12.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
<a href="images/work/Shot45.jpg" rel="enlargeimage::mouseover" rev="theWorkLoadArea::http://www.cssdrive.com" title="Shot 45"><img border="0" src="images/work/Shot45.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
<a href="images/work/Shot46.jpg" rel="enlargeimage::mouseover" rev="theWorkLoadArea::http://www.cssdrive.com" title="Shot 46"><img border="0" src="images/work/Shot46.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>

<td width="80">
<div id="theWorkLoadArea">
<script type="text/javascript">
//Notes on Parameters: The only required parameter is the slides_array_name. If Width is used, so must Height.
//Interval is optional too. It is always last, either fourth after Width and Height or second after Slides_array_name.
//Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
new inter_slide(slides)
</script>
</div>
<script type="text/javascript">
document.onerror=function(){return false;};
for (var i_tem = 0; i_tem < document.links.length; i_tem++)
document.links.onmousemove=function(){
iss[0].mouseovercheck=1;
this.onmousemove=null;
}
</script>
</td>
</tr>
</table>

</div>
</div>
</div>
</div></body> <!-- end of background Div -->
Veronica
05-22-2007, 03:43 PM
In the div in which your photos are loading, set the height and width you want, and add overflow-x: hidden;overflow-y: scroll; for a vertical scrollbar, but not a horizontal one. Example:

<div id="loadarea2" style="width:170px;height:150px; overflow-x: hidden;overflow-y: scroll;"></div>
tortuga
05-22-2007, 07:59 PM
Thanks, that works on the viewer area, but I'm looking for a scroll bar on the thumbnails that are in the table above the viewer (in the code, to the left of the viewer in display). I've tried all different heights and messing with the styles.
Veronica
05-22-2007, 11:25 PM
I assume you don't want each thumbnail to have a scrollbar, right? You want the entire area that the tumbnails are in to scroll so it can match the large display area next to it? Yes?
tortuga
05-23-2007, 12:34 AM
Exactly! I need it to scroll after something like the 6th thumbnail. After that, it looks funny with more thumbnails taking up vertical space past the large image view area. Thanks!
Veronica
05-23-2007, 01:03 AM
OK, first, clean up some of your code (I'm assuming you copied it from your actual page) You've got ellspacing, which should be cellspacing. Also, you need to close the td cell that your small thumbnails are in with a </td>
After that, enclose the contents of the td with the thumbnails in a div.

<div style="width:100px;height:150px; overflow-x: hidden; overflow-y:scroll;>
<a href="images/work/Shot5......
<a href="images/work/SDSShop3.jpg....
...
<a href="images/work/Shot46.jpg...
</div>

I think that will give you the effect you want. You may need to adjust the width of the div, or the width of the td that holds it.
tortuga
05-23-2007, 01:19 AM
Woo hoo! That was it. I obviously didn't think to put the div in the <td. How cool! Thanks for catching the misses on the code. I did see the cellspacing earlier. Any chance you know how to customize the look of the scrollbar? Not the color necessarily, but the width and shape (like more rounded at the ends). I've looked around, but don't see anything too easy to implement...yet.

Thanks so much for you help!
Veronica
05-23-2007, 01:45 AM
The color, etc can only be changed in IE, not Firefox. With color change, you could make the scrollbar for this div only basically diasppear by blending into the background color, highlighting the up or down arrows.

<div style="width:100px;height:300px; overflow-x: hidden; overflow-y:scroll; scrollbar-track-color: #ffffff; scrollbar-face-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-dark-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-3d-light-color: #eaeaea; scrollbar-arrow-color: red;>

You might want to look at http://www.dynamicdrive.com/dynamicindex2/manualscroll.htm which uses links to stop or start scrolling in a div. Then you'd have to figure out how to combine the two scripts, which could be a challenge.
tortuga
05-24-2007, 07:12 AM
Thank you!