Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thumbnail popup not working with fade in/out effect

    Hi

    I am trying to build a travel page for my personal website.. I am very new to javascript/css so I got a template from the web and trying to work on it. But struck in middle of it. The travel page has the following functionality:
    1. page contains thumbnail photos [functional]
    2. on hover, the thumbnail photos fade in/out [functional]
    3. also, on hover I want to show the image in a popup/frame (i don't know what you call it)

    I have code to demo the issue.. There are three files in the attachment
    - travelogy1.html shows thumbnail and fade in/out effect
    - travelogy2.html shows thumbnail with popup (span)
    - travelogy3.html shows both effects fade in/out and popup (THIS IS NOT WORKING).

    The following code helps in displaying the popup/span when user hover over the thumbnail:

    Code:
    <a class="thumbnail" href="#thumb">
       <img style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/travelogy/dc.gif" alt="DC" title="DC">
       <span><img src="js/travelogy/dc.gif" /><br />Simply beautiful.</span>
    </a>
    ...but when it is embedded into existing "li" tag, it doesn't work. I have added two images. First one doesn't show the image. The second shows image if i change the href to refer to the image path.

    Code:
    <ul class="gallery_demo_unstyled gallery_demo galleria1">    
      <li class="">
         <a class="thumbnail" href="#thumb">
         <img rel="img/lasvegas.gif" class="thumb selected" style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/travelogy/lasvegas.gif" alt="Vegas" title="Vegas">
         <span><img src="js/travelogy/lasvegas.gif" /><br />Simply beautiful.</span>
         </a>
      </li>
      <li class="">
         <a class="thumbnail" href="js/travelogy/wildwoods.gif">
         <img rel="img/wildwoods.gif" class="thumb selected" style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/travelogy/wildwoods.gif" alt="Wildwoods" title="Wildwoods">
         <span><img src="js/travelogy/wildwoods.gif" /><br />Simply beautiful.</span>
         </a>
      </li>			
    </ul>
    I have noticed something wierd today that, when I open travelogy3.html the IE shows that popup is blocked and whitout changing anything if i hover images the popup works but when i accept "allow popups" nothing works. Screen shots attached.

    I am not sure what changes I have to make in css to make travelogy3.html work. Appreciate if someone can help!!
    Attached Thumbnails Attached Thumbnails thumbnail popup not working with fade in/out effect-travelogy3-popup.gif   thumbnail popup not working with fade in/out effect-travelogy3-nopopup.gif  
    Attached Files Attached Files


 

Tags for this Thread

Posting Permissions

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