Hello there, I am new. Today, I created a gallery. I did the following thing to accomplish this.
- Created a gallery with some small thumbnails of the original large image.
- 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.
<!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"> </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;"> </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© 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.
