PDA

View Full Version : Image Thumbnail Viewer II - Popup images?



coloristmedia
12-09-2008, 03:16 AM
1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem: I'd like to know if there is a way of making the images come up in a popup when you click them. Not a new window, but an actual popup script that is fixed to be the size of the image. I know I'm probably asking for too much, but it's worth a try.

I am creating a shop for the website I am working on, and I want to use this script for users to view the different clothing items and if they want to enlarge more, the popup would be perfect.

Thanks in advance!

jscheuer1
12-09-2008, 04:30 AM
Use:

http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

or:

http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm

or:

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

coloristmedia
12-09-2008, 07:38 PM
Use:

http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

or:

http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm

or:

http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

no, John, you see... I need that script specifically. The thumbnails will be right under the main display image and I want users to hover the thumbnails so the image displays in the same box. However, if they so happen to want to enlarge the larger image even more, I'd like for it to popup. That's what I mean.

jscheuer1
12-09-2008, 08:32 PM
Something like:

http://home.comcast.net/~jscheuer1/side/vfs/vac_plain.htm

?

Which shows most of the features, not all of which must be used.

coloristmedia
12-10-2008, 03:27 AM
Something like:

http://home.comcast.net/~jscheuer1/side/vfs/vac_plain.htm

?

Which shows most of the features, not all of which must be used.

yep! thats it!

coloristmedia
12-10-2008, 06:39 AM
How can I get it...

1.) Without the buttons.
2.) Without the auto-play

?

jscheuer1
12-10-2008, 06:46 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Omni Image View, Fade, and/or Slide - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../lightbox2.04a/css/lightbox.css" type="text/css" media="screen">
<script src="../lightbox2.04a/js/prototype.js" type="text/javascript"></script>
<script src="../lightbox2.04a/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="../lightbox2.04a/js/lightbox.js" type="text/javascript"></script>
<style type="text/css">
/* All Styles Optional */
body {
color: #ddd;
background-color: #000;
margin: 0;
padding: 0;
}
.content {
margin: 15px 10px;
}
#container {
margin-top: 1em;
}
img {
vertical-align: middle;
border: none;
}
.vacthumb img {
border: 1px solid #000;
height: 56px;
width: 75px;
padding: 1ex;
margin-bottom: 1ex;
}
.vacActive img {
border: 1px solid #ccc;
}
input.vacActive {
border: 2px solid #f9a;
}
#vac {
margin: 1em;
height: 425px;
width: 400px;
float: left;
position: relative;
background-color:#666;
}
.vacCount {
position: absolute;
font: normal 80% sans-serif;
top: -1.5em;
left: -1ex;
}
.controls {
float:left;
margin-left: 1em;
}
</style>
<script type="text/javascript" src="viewfadeslide.js">

/* Omni Image View, Fade, and/or Slide Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

</script>
<script type="text/javascript">
viewfadeslide.config = { //place comma after each entry except the last
//Use true or false or {Object} containing boolean values for separate primary load areas

enableCaption : false, //Should "title" attribute of link and any paired image's 3rd parameter to be used as caption?
makeTitle : true, //Make title attribute for enlarged image from name attribute of trigger link?
hideImgMouseOut : false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)
disableOnClick : true, //Disable default onclick for mouseover triggers?
populateWithFirst : true, //Fire first link in load area group(s) onload?
enableCount : true,

//Use true or false

enableTransition : true, //Enable fade transition in browsers capable of it?

//Use true or false or {Object} containing boolean values or tag name for separate primary load areas

writeNumberButtons : false, //Also requires element with id of load_area_idNum ex: <div id="loadareaNum"></div>
writeControlButtons : false, //Also requires element with id of load_area_idControl ex: <span id="loadareaControl"></span>

useButtons : true, //Allows choosing individual Control buttons by numbers, ex: useButtons : {loadarea: {4 : true, 5 : true}},
//Works off array: 0 = 'Next', 1 = 'Previous', 2 = 'First', 3 = 'Last', 4 = 'Run', 5 = 'Stop' - otherwise just set to true

enableSlideShow : true, //Enable slide show(s) use - true/false or {load_area : delay}
startSlideShow : false,
swapControlVals : true, //true false or object with boolean values - should running/paused state affect buttons?
//Below three (only valid if slide show running) may use 'pause', 'stop' or 'none', boolean objects or global values
slideHoverBehavior : 'stop', //What happens onmouseover of larger images if slide show is running
slideTriggerBehavior : 'pause', //What happens triggers when are activated if slide show is running
slideNumberButtonsBehavior : 'stop', //What happens when numbered buttons are clicked if slide show is running

//Set to true only if using lightbox 2.04a add on and lightbox groups
enableLightBoxGroups : true //Enable writing out all lightbox group links (lightbox[groupname]) links to a display none div? (true/false only)
}; //No comma After last entry in the above (viewfadeslide.config)
</script>
</head>
<body>
<div class="content">
<div id="container"></div>

<div class="vacthumb"><a class="" href="images/image_01.jpg" name="Caribbean&nbsp;Princess" rel="vfsimage::mouseover" rev="vac::images/01_lrg.jpg::lightbox[vp]::Caribbean Princess"><img src="images/image_01_tbn.jpg" alt=""></a><a class="" href="images/image_02.jpg" name="Heidi&nbsp;&amp;&nbsp;Heather" rel="vfsimage::mouseover" rev="vac::images/02_lrg.jpg::lightbox[vp]::Heidi &amp; Heather"><img src="images/image_02_tbn.jpg" alt=""></a><a class="" href="images/image_03.jpg" name="Corn&nbsp;Dog&nbsp;(Waldo)" rel="vfsimage::mouseover" rev="vac::images/03_lrg.jpg::lightbox[vp]::Corn Dog (Waldo)"><img src="images/image_03_tbn.jpg" alt=""></a><a class="" href="images/image_04.jpg" name="Tree&nbsp;House" rel="vfsimage::mouseover" rev="vac::images/04_lrg.jpg::lightbox[vp]::Tree House"><img src="images/image_04_tbn.jpg" alt=""></a><a class="" href="images/image_05.jpg" name="Freedom&nbsp;Pond" rel="vfsimage::mouseover" rev="vac::images/05_lrg.jpg::lightbox[vp]::Freedom Pond"><img src="images/image_05_tbn.jpg" alt=""></a><a class="" href="images/image_06.jpg" name="Pigs" rel="vfsimage::mouseover" rev="vac::images/06_lrg.jpg::lightbox[vp]::Pigs"><img src="images/image_06_tbn.jpg" alt=""></a><a class="" href="images/image_07.jpg" name="Margaret&nbsp;Todd&nbsp;(rigging)" rel="vfsimage::mouseover" rev="vac::images/07_lrg.jpg::lightbox[vp]::Margaret Todd (rigging)"><img src="images/image_07_tbn.jpg" alt=""></a><a class="" href="images/image_08.jpg" name="Margaret&nbsp;Todd&nbsp;(starboard&nbsp;bow)" rel="vfsimage::mouseover" rev="vac::images/08_lrg.jpg::lightbox[vp]::Margaret Todd (starboard bow)"><img src="images/image_08_tbn.jpg" alt=""></a><a class="" href="images/image_09.jpg" name="Figaro" rel="vfsimage::mouseover" rev="vac::images/09_lrg.jpg::lightbox[vp]::Figaro"><img src="images/image_09_tbn.jpg" alt=""></a><a class="vacActive" href="images/image_10.jpg" name="Rock&nbsp;Sculpture" rel="vfsimage::mouseover" rev="vac::images/10_lrg.jpg::lightbox[vp]::Rock Sculpture"><img src="images/image_10_tbn.jpg" alt=""></a></div>
<div id="vac"></div>
</div>
</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/side/vfs/vac_simple.htm

coloristmedia
12-12-2008, 12:17 AM
I can't seem to get it to work even after downloading all needed files. I get a popup error, please check it out:

http://www.dweeb.coloristmedia.net/shop/cart.php

jscheuer1
12-12-2008, 03:20 AM
You are using Lightbox v2.04, but the code requires v2.04a, as first introduced here:

http://www.dynamicdrive.com/forums/showthread.php?p=163470#post163470

All of the files are the same (or were and probably still are) with the exception of:

http://home.comcast.net/~jscheuer1/side/lightbox2.04a/js/lightbox.js

which you should be able to simply download and use to replace your current lightbox.js file.

coloristmedia
12-12-2008, 11:26 PM
john you're the best!

thanks, that solved everything.

now... the last problem I am encountering is customizing the layout which is proving to be extremely hard because the image is fixed somehow and I can't undo it without messing up the script. basically, I want the thumbnails to be right under the main pictures. Kind of how on this website, each link is under the main picture of the product:

http://www.krudmart.com/product_info.php?manufacturers_id=157&products_id=3063

And also I'd like to remove the "Image 1 of 2" from the page.

I know, I know... I'm already asking for too much. But if you know how to solve these issues, please tell me! It's driving me mad that i can't fix it and I have a deadline.

jscheuer1
12-13-2008, 03:38 AM
Right now your live demo page isn't working at all. I can tell you that to disable the:

"Image 1 of 2"

change (as highlighted):


viewfadeslide.config = { //place comma after each entry except the last
//Use true or false or {Object} containing boolean values for separate primary load areas

enableCaption : false, //Should "title" attribute of link and any paired image's 3rd parameter to be used as caption?
captionTop : false, //Place caption at the top of the image?
makeTitle : true, //Make title attribute for enlarged image from name attribute of trigger link?
hideImgMouseOut : false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)
disableOnClick : true, //Disable default onclick for mouseover triggers?
populateWithFirst : true, //Fire first link in load area group(s) onload?
enableCount : false,

//Use true or false

enableTransition : true, //Enable fade transition in browsers capable of it?

//Use true or false or {Object} containing boolean values or tag name for separate primary load areas

writeNumberButtons : false, //Also requi . . .

coloristmedia
12-13-2008, 04:22 AM
John, I fixed the script so that it's working again. Please check:

http://dweeb.coloristmedia.net/shop/cart.php

Thanks for the tip, I took out the images thing. Now if I can figure out how to put those thumbnails right under the main image...lol

jscheuer1
12-13-2008, 05:01 AM
Well, some experience in laying out pages is required in site design. Although not ideal by any means, I believe I have found one way to achieve the result (or close to it) that you are looking for:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>dweeb clothing | shop</title>
<meta name="description" content="official website of internationally known clothing brand DWEEB.">
<meta name="keywords" content="dweeb, clothing, downtown, trendy, nyc, raheem, rademaker, clothes, cut, sew, fashion, reed, space, 10deep, huf, supreme, reigning, champion, collection">
<meta name="author" content="ColoristMedia.net">

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen">
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="lightbox.js" type="text/javascript"></script>

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

/* Omni Image View, Fade, and/or Slide Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

</script>
<script type="text/javascript">
viewfadeslide.config = { //place comma after each entry except the last
//Use true or false or {Object} containing boolean values for separate primary load areas

enableCaption : false, //Should "title" attribute of link and any paired image's 3rd parameter to be used as caption?
captionTop : false, //Place caption at the top of the image?
makeTitle : true, //Make title attribute for enlarged image from name attribute of trigger link?
hideImgMouseOut : false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)
disableOnClick : true, //Disable default onclick for mouseover triggers?
populateWithFirst : true, //Fire first link in load area group(s) onload?
enableCount : false,

//Use true or false

enableTransition : true, //Enable fade transition in browsers capable of it?

//Use true or false or {Object} containing boolean values or tag name for separate primary load areas

writeNumberButtons : false, //Also requires element with id of load_area_idNum ex: <div id="loadareaNum"></div>
writeControlButtons : false, //Also requires element with id of load_area_idControl ex: <span id="loadareaControl"></span>

useButtons : true, //Allows choosing individual Control buttons by numbers, ex: useButtons : {loadarea: {4 : true, 5 : true}},
//Works off array: 0 = 'Next', 1 = 'Previous', 2 = 'First', 3 = 'Last', 4 = 'Run', 5 = 'Stop' - otherwise just set to true

enableSlideShow : true, //Enable slide show(s) use - true/false or {load_area : delay}
startSlideShow : false,
swapControlVals : true, //true false or object with boolean values - should running/paused state affect buttons?
//Below three (only valid if slide show running) may use 'pause', 'stop' or 'none', boolean objects or global values
slideHoverBehavior : 'stop', //What happens onmouseover of larger images if slide show is running
slideTriggerBehavior : 'pause', //What happens triggers when are activated if slide show is running
slideNumberButtonsBehavior : 'stop', //What happens when numbered buttons are clicked if slide show is running

//Set to true only if using lightbox 2.04a add on and lightbox groups
enableLightBoxGroups : true //Enable writing out all lightbox group links (lightbox[groupname]) links to a display none div? (true/false only)
}; //No comma After last entry in the above (viewfadeslide.config)
</script>
</head>
<body bgcolor="#FFFFFF" LINK="RED" ALINK="RED" VLINK="RED" TEXT="#3D3A3A" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div style="width:600px; margin:0 auto;">
<IMG SRC="shop_logo.png" USEMAP="#shop_logo.png" WIDTH=600 HEIGHT=134 BORDER=0>
<MAP NAME="shop_logo.png">
<AREA SHAPE=RECT COORDS="403,4,594,130" HREF="index.php" TARGET="_top">
<AREA SHAPE=RECT COORDS="237,104,301,125" HREF="contact.php" TARGET="_top">
<AREA SHAPE=RECT COORDS="195,102,229,126" HREF="faq.php" TARGET="_top">
<AREA SHAPE=RECT COORDS="115,103,185,126" HREF="womens.php">
<AREA SHAPE=RECT COORDS="57,103,107,128" HREF="mens.php" TARGET="_top">
</MAP>
</div>


<div class="vacthumb" style="width:154px; margin:0 auto;"><a class="" href="mens/tees/hangman_main_1.png" name="Hangman&nbsp;Tee" rel="vfsimage::mouseover" rev="vac::mens/tees/hangman_largethumb_1.png::lightbox[vp]::Hangman Tee"><img src="mens/tees/hangman_thumb_1.png" border="0" alt=""></a>
<a class="" href="mens/tees/hangman_main_2.png" name="Hangman&nbsp;Tee" rel="vfsimage::mouseover" rev="vac::mens/tees/hangman_largethumb_2.png::lightbox[vp]::Hangman Tee"><img src="mens/tees/hangman_thumb_2.png" border="0" alt=""></a>
</div>
<div id="vac" style="position:relative; width:400px; height:266px; margin:0 auto;"><table style="border-collapse: collapse; height: 266px width: 400px; position: absolute;"><tbody><tr><td style="margin: 0pt; padding: 0pt; width:400px; height:266px;text-align: center; vertical-align: middle;"></td></tr></tbody></table><table style="border-collapse: collapse; height: 266px; width: 400px; position: absolute; z-index: 1;"><tbody><tr><td style="margin: 0pt; padding: 0pt; width:400px; height:266px; text-align: center; vertical-align: middle;"><img src="images/loading.gif" style="border: medium none ;" alt=""></td></tr></tbody></table></div>

</body>
</html>

Notes: I have not checked to see if this code is valid (w3c validator), as the code you had was clearly not. For best results, all styles should be in an external stylesheet(s). But I put my adjustments inline to the page, simply for expediency's sake.