SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)

    showing image caption

    Hello there, I am new. Today, I created a gallery. I did the following thing to accomplish this.

    1) Created a gallery with some small thumbnails of the original large image.
    2) When the small thumnail is clicked, the larger version of the image fades into view and the previous (if exists) fades Out.

    I programmed it and now it's working nicely. But I want another thing, and that is, when the user hovers the large version- a caption appears just beneath it. Watch my whole code.
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="keywords" content="gallery, images, test page, practise">
    		<title>Ahmed Sadman's Gallery Page</title>
    		<link rel="stylesheet" href="styles/style1.css">
    		<style>
    			#contactme p.i_im_closed {
    				background: #4e6c77 url('images/open.png') no-repeat 4px 8.5px;
    				padding-left: 25px;
    			}
    			#contactme p.i_im_open {
    				background: #4e6c77 url('images/close.png') no-repeat 4px 8.5px;
    				padding-left: 25px;
    			}
    		</style>
    		<script src="jquery-1.6.3.min.js"></script> 
    		<script> // Programming goes here
    			$(document).ready(function() {
    				var browserCall = navigator.userAgent; // Determine and give warning to Internet Explorer
    				if (browserCall.indexOf('MSIE') != -1) {
    					$('body').attr('style',	'');
    					$('body').html('<h1 style=\"font-size: 50px; font-family: serif\">Sorry, Internet Explorer is not supported for this page.</h1><p style=\"font-family: sans-serif; font-weight: bold\">For more info, please contact <a href=\"mailto: muhib96@gmx.com\">Ahmed Sadman</a></p>');
    				}
    				$('#gallery p').hide(); // Currently hiding all the captions
    				var preloadImages = ['images/large/Chrysanthemum.jpg', 'images/large/Desert.jpg', 'images/large/Hydrangeas.jpg', 'images/large/Jellyfish.jpg', 'images/large/Koala.jpg', 'images/large/Lighthouse.jpg', 'images/large/Penguins.jpg', 'images/large/Tulips.jpg'];
    				var imgs = [];
    				for (var i = 0; i < preloadImages.length; i++) {
    					imgs[i] = new Image();
    					imgs[i].src = preloadImages[i];
    				} // end of preloading images
    				$('#gallery a').click(function(evt) { // This handles the gallery's dynamic activies
    					evt.preventDefault();
    					var imgPath = $(this).attr('href');
    					var oldImg = $('#main_photo img');
    					var newImage = $('<img src=" ' + imgPath + ' "> ');
    					newImage.hide();
    					$('#main_photo').prepend(newImage);
    					newImage.fadeIn(800);
    					oldImg.fadeOut(800, function() {
    						$(this).remove();
    					}); // end of callback function
    				}); //end click
    				$('#gallery a:first').click();
    			
    				$('#contactme form').hide(); // Function for the top right form
    				$('#contactme p').hover(function() {
    					$(this).css('backgroundColor', 'gray');
    				},
    				function() {
    					$(this).css('backgroundColor', '#4e6c77');
    				});
    				$('#contactme p').toggle(function() {
    					$('#contactme form').slideDown(350);
    					$(this).css('borderRadius', '0');
    					$(this).removeClass();
    					$(this).addClass('i_im_open');
    				},
    				function() {
    					$('#contactme form').slideUp(350, function() {
    						$('#contactme p').css('borderRadius', '0 0 7px 7px');
    						$('#contactme p').removeClass().addClass('i_im_closed');
    					});
    				});
    			}); // end ready
    		</script>
    	</head>
    	<body style="background: url('images/bg.png') repeat-x top; background-color: #ecf4f7;"> <!-- Inline style added. Because the same thing doesn't work in external css -->
    		<div id="contactme">
    			<p class="i_im_closed">Contact Me</p>
    			<form method="post" action="">
    				<label for="name">Name</label><br>
    				<input type="text" name="name" id="name"><br>
    				<label for="email">* Email</label><br>
    				<input type="email" name="email" id="email" required><br>
    				<label for="subject">Subject</label><br>
    				<select>
    					<option></option>
    					<option>Feedback</option>
    					<option>Support</option>
    					<option>Others</option>
    				</select><br>
    				<label for="message" required>* Message</label><br>
    				<textarea rows="6" cols="36" required></textarea>
    				<div id="submit_button">
    					<input type="submit" value="Send Me">
    				</div>
    			</form>
    		</div>
    		<div id="container">
    			<div class="up_push">&nbsp;</div>
    			<header>
    				<hgroup>
    					<h1>Ahmed Sadman's Photo Gallery</h1>
    					<h2>An interactive and dynamic photo gallery</h2>
    				</hgroup>
    			</header>
    			<div id="gallery">
    				<a href="images/large/Chrysanthemum.jpg"><img src="images/small/Chrysanthemum.jpg"></a>
    				<p>Image 1</p> <!-- The captions so on-->
    				<a href="images/large/Desert.jpg"><img src="images/small/Desert.jpg"></a>
    				<p>Image 2</p>
    				<a href="images/large/Hydrangeas.jpg"><img src="images/small/Hydrangeas.jpg">
    				<p>Image 3</p>
    				<a href="images/large/Jellyfish.jpg"><img src="images/small/Jellyfish.jpg"></a>
    				<p>Image 4</p>
    				<a href="images/large/Koala.jpg"><img src="images/small/Koala.jpg"></a>
    				<p>Image 5</p>
    				<a href="images/large/Lighthouse.jpg"><img src="images/small/Lighthouse.jpg"></a>
    				<p>Image 6</p>
    				<a href="images/large/Penguins.jpg"><img src="images/small/Penguins.jpg"></a>
    				<p>Image 7</p>
    				<a href="images/large/Tulips.jpg"><img src="images/small/Tulips.jpg"></a>
    				<p>Image 8</p>
    			</div> <!-- End of gallery div -->
    			<div id="main_photo"></div>
    			<div style="float: left; border-bottom: 1.5px solid #436c77; width: 715px; position: relative; top: 430px;">&nbsp;</div> <!-- Used to draw the border just at the bottom of the photo. As the photo position is absolute, a border cannot be drawn directly using the #main_photo div. So this technique is used -->
    			<div class="push"></div>
    		</div> <!-- End of container div -->
    		<footer>
    			<p>Photos from Microsoft Win 7. Page created by Ahmed Sadman&copy; and all rights reserved</p>
    		</footer>
    	</body>
    </html>
    There is a p tag after each image link- When a larger version is hovered, I want to show the p tag just next to it (the p tag is the caption), and when the mouse goes away, the caption disappears.

    I tried a lots of thing but there was always a problem, infact, I am totally new in JQuery/Javascript. Please help me.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    You could even do this with CSS, but you'd need to put the caption text inside the <a> links. Instead of using a <p> for the caption, place it in a span next to the image. Set it off screen for the normal state, and set it to display when hovering over the image.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could even do this with CSS, but you'd need to put the caption text inside the <a> links. Instead of using a <p> for the caption, place it in a span next to the image. Set it off screen for the normal state, and set it to display when hovering over the image.
    Can you please show the code? Please..... You must remember that I have to show the caption just beneath the larger version of the image which is wrapped around the div "main_photo". On the other hand the caption is written in the "gallery" div. Though I was able to show captions on hover, there were errors. Such as, the caption is showing same for every image.

    So it would be good if you kindly show the code changes to me.

  4. #4
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    You can try this.
    Chane your HTML Code Structure to
    Code:
    <a href="images/large/Chrysanthemum.jpg"><img src="images/small/Chrysanthemum.jpg"><p>Image 1</p></a>
    And ADD the CSS code
    Code:
    #gallery a img p{display:none;}
    #gallery a img:hover p{display:block;}
    This shall work for you!

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Oh, why any of you don't understand? :?

    castelinokelvin, your code will work, I know that quite well. But when I hover the image, the code will be shown just in the 'gallery' div which is just a collection of small thumbnails of the larger versions.

    I want to show the caption in the larger version of the image, which is wrapped around another div named 'main_photo' (here img and span tag gets added by the magic of JQuery). Can you help me?

    Note: I have made another code which works for me, but there's a great problem. I will talk about it soon. But I want to listen from you first.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    50
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Oh, why any of you don't understand? :?

    castelinokelvin, your code will work, I know that quite well. But when I hover the image, the code will be shown just in the 'gallery' div which is just a collection of small thumbnails of the larger versions.

    I want to show the caption in the larger version of the image, which is wrapped around another div named 'main_photo' (here img and span tag gets added by the magic of JQuery). Can you help me?

    Note: I have made another code which works for me, but there's a great problem. I will talk about it soon. But I want to listen from you first.


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
  •