Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Image Thumbnail Viewer II - Popup images?

  1. #1
    Join Date
    Nov 2008
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Image Thumbnail Viewer II - Popup images?

    1) Script Title: Image Thumbnail Viewer II

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

  3. #3
    Join Date
    Nov 2008
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Something like:

    http://home.comcast.net/~jscheuer1/s.../vac_plain.htm

    ?

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2008
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    Something like:

    http://home.comcast.net/~jscheuer1/s.../vac_plain.htm

    ?

    Which shows most of the features, not all of which must be used.
    yep! thats it!

  6. #6
    Join Date
    Nov 2008
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    How can I get it...

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

    ?

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Code:
    <!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/s...vac_simple.htm
    Last edited by jscheuer1; 12-10-2008 at 05:17 PM. Reason: add demo
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Nov 2008
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    You are using Lightbox v2.04, but the code requires v2.04a, as first introduced here:

    http://www.dynamicdrive.com/forums/s...470#post163470

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

    http://home.comcast.net/~jscheuer1/s...js/lightbox.js

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Nov 2008
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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...oducts_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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •