Not able to show thumbnail popup and fade-in/out

**kuul13** · 08-12-2009, 07:29 PM

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. on click it opens the image on top and user can navigate to next photo
4. on hover I want to show the image in a popup (either 3 or 4)

3 is also functional but if I add multi-line photos then it doesn't work.
If HTML file has following code then it works

HTML Code:

<body>
<div id="site">

	<div id="content">
		<h3 id="welcome">Travel Photos</h3>
	</div>
	<div id="content_img2">
		<ul class="gallery_demo_unstyled gallery_demo galleria1">    
			<li class=""><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"></li>
			<li class=""><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"></li>			
		</ul>		
	</div>
</div>
</body>

...but if I add multi-line photos, it doesn't work:

HTML Code:

<body>
<div id="site">

	<div id="content">
		<h3 id="welcome">Travel Photos</h3>
	</div>
	<div id="content_img2">
		<ul class="gallery_demo_unstyled gallery_demo galleria1">    
			<li class=""><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"></li>
			<li class=""><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"></li>			
		</ul>		
	</div>
	<div id="content_img2">
		<ul class="gallery_demo_unstyled gallery_demo galleria1">    
			<li class=""><img rel="img/nyc.gif" class="thumb selected" style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/travelogy/nyc.gif" alt="NYC" title="NYC"></li>			
		</ul>		
	</div>
</div>
</body>

I then tried to add the code to show the thumbnail images as popup if user hovers over the image with functionality 1 and 2 intact. But it was not working with current style/JS.

To show how I want the popup, I added a the following code after <div id="content_img2">

HTML 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>

The complete sample code is attached as .zip file. I would appreciate if someone can help me with this as I am totally struck and have no clue how to resolve this. Thanks in Advance!!

**alastairalbien** · 08-13-2009, 06:50 PM

Originally Posted by kuul13

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. on click it opens the image on top and user can navigate to next photo
4. on hover I want to show the image in a popup (either 3 or 4)

3 is also functional but if I add multi-line photos then it doesn't work.
If HTML file has following code then it works

HTML Code:

<body>
<div id="site">

	<div id="content">
		<h3 id="welcome">Travel Photos</h3>
	</div>
	<div id="content_img2">
		<ul class="gallery_demo_unstyled gallery_demo galleria1">    
			<li class=""><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"></li>
			<li class=""><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"></li>			
		</ul>		
	</div>
</div>
</body>

...but if I add multi-line photos, it doesn't work:

HTML Code:

<body>
<div id="site">

	<div id="content">
		<h3 id="welcome">Travel Photos</h3>
	</div>
	<div id="content_img2">
		<ul class="gallery_demo_unstyled gallery_demo galleria1">    
			<li class=""><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"></li>
			<li class=""><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"></li>			
		</ul>		
	</div>
	<div id="content_img2">
		<ul class="gallery_demo_unstyled gallery_demo galleria1">    
			<li class=""><img rel="img/nyc.gif" class="thumb selected" style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/travelogy/nyc.gif" alt="NYC" title="NYC"></li>			
		</ul>		
	</div>
</div>
</body>

I then tried to add the code to show the thumbnail images as popup if user hovers over the image with functionality 1 and 2 intact. But it was not working with current style/JS.

To show how I want the popup, I added a the following code after <div id="content_img2">

HTML 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>

The complete sample code is attached as .zip file. I would appreciate if someone can help me with this as I am totally struck and have no clue how to resolve this. Thanks in Advance!!

Just check out whether you browser is allowing the pop up. If so, then i can look in to the issue. How many travel photos are you planning to upload there? Use less for now till everything gets settled up.

TRAVEL FORUM

**kuul13** · 08-14-2009, 01:17 PM

Just check out whether you browser is allowing the pop up. If so, then i can look in to the issue. How many travel photos are you planning to upload there? Use less for now till everything gets settled up.

Thanks for the response.. Yes, my browser is allowing popups. I am sure if you will call it a popup since it doesn't open a new window but something to do with style. Sample is already in the code submitted, if you hover over the last photo, it shows the selected image in another frame.

..for this test I am not using many travel photos (around 5-6) but actually it would be more.

Thanks again!

**kuul13** · 08-14-2009, 08:35 PM

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.

Also, I have attached the zip file for the required files.

Thread: Not able to show thumbnail popup and fade-in/out

Thread Tools

Search Thread

Not able to show thumbnail popup and fade-in/out

Bookmarks

Bookmarks

Posting Permissions