Jump to content

Show image description on enlarging an image


bindiya

Recommended Posts

Jquery code help needed,posting here because i was unable to see the jquery code posting area)

 

 

I have an  image scrolling div(div1),which contains thumnails

.Above to this i have a div(div2) which shows  the enlarged image of the clicked thumbnail with a description of the images on a div(div3)  above to the  div2.

 

Image enlarging is working fine ,but the description is not showing properly.I need to show the description onhover and also on click of the thumnails.

Any help


<html><head>

<script>  
$(document).ready(function() {

$("#1a").hover(function() {
//<img src="+ $(this).attr("alt") +" alt='Large Image' /><br/>"+$(this).attr("rel")
$("#galleryoverlay").html("Shahsha boats are made up of local palm trees.Every part of the palm is used for the shasha");
});
$("#2a").hover(function() {

$("#galleryoverlay").html("Description goes here gggggg 2!");
});
$("#3a").hover(function() {

$("#galleryoverlay").html("Located in the capital ");
});

});


$(document).ready(function() {
$("#1a").click(function() {
$("#galleryoverlay").html("");
$("#galleryoverlay").html("Shahsha boats are made up of local palm trees.");
});
$("#2a").click(function() {
$("#galleryoverlay").html("");
$("#galleryoverlay").html("My text is changed 2!");
});
$("#3a").click(function() {
$("#galleryoverlay").html("");
$("#galleryoverlay").html("Located in the capital ");
});

});

});
</SCRIPT></head>
<body>

<DIV id=galleryTop>
  <DIV id=galleryoverlay style="background-image:url(gallery_thumb_bg.gif);background-repeat:no-repeat"  >
<H2 class=green> </H2>
<P id=iTitle style=" color:#CCFF00"><strong>Welcome </strong></P>
<P style=" color:#FFFFFF"> </P>
<P  id=iTitle1 style=" color:#FFFFFF">Welcome click the thumbnails to c the description and enlarged photos.</P>
<H2 class=green> </H2>
</DIV>

    <DIV id=galleryTopLoader><IMG alt="" 
src="gallery/012MNv2.jpg"> </DIV>
</DIV>
  <DIV id=galleryBottom>
<H2> </H2>
<DIV id=galleryNav style="background-color:#CC9999"><A id=leftBtn 
href="#" style="background-image:url(documents/leftArrow.gif)"><B>Left</B></A> 
<DIV id=scrollingThumbs class=images>
<UL>
  <LI id='1a'><A id=image20 class=selected title="Shasha Boat" onClick="getImage('20')" 
  href="gallery/012MNv2.jpg" 
  link="gallery/012MN__thumb.jpg"><IMG alt="" 
  src="gallery/012MN__thumb.jpg" ></A> </LI>
  <LI id='2a'><A id=image9 title=Waterfront onClick="getImage('9')" 
  href="gallery/001TFC_v2.jpg" 
  link="gallery/001TFC__thumb.jpg"><IMG alt="" 
  src="gallery/001TFC__thumb.jpg" ></A> </LI>
  <LI id='3a'><A id=image17 title="Emirates Palace" onClick="getImage('17')" 
  href="gallery/002TFCv2.jpg" 
  link="gallery/002TFC__thumb.jpg"><IMG alt="" 
  src="gallery/002TFC__thumb.jpg" ></A> </LI>
  <LI id='4a'><A id=image27 title="Night Life" onClick="getImage('27')" 
  href="gallery/014TFCv2.jpg" 
  link="gallery/014TFC__thumb.jpg"><IMG alt="" 
  src="gallery/014TFC__thumb.jpg" ></A> </LI></ul>
</body></html>





.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.