Highlight a thumbnail when it is clicked in gallery.php
Question
I have made a gallery.php. The code is as follows:
<div id="galleryImage">
<ul>
<li>
<a href= "gallery.php?imgName='artistvan'">
<img src="thumbnail/artistvan.jpg" title="The artist van" alt="The artist van"/></a>
</li>
....
....
</ul>
</div>
I have kept 25 li tag for 25 images.
The thumnails are on the right hand side of the div tag. When a thumbnail is clicked, the related image appears. I am passing imgName as parameter. So, it retrieves the related image from MySQL.
My question is, when I click thumbnail, that thumbnail should change so it can be figure out which link has been clicked. At the moment when I click, it retrieves an image but then there is no difference between clicked image and unclicked images.
I've tried a lot with CSS and somewhat javascript but I couldn't figure out. I would appreciate for your help. Thanks a lot.
3 answers
solution1
0 2014-02-11 15:15:47
Try adding some class for indicating clicked thumbnail with jQuery:
$('.myThumbnail').click(function(){
$(this).addClass('clickedThumbnailClass');
/* rest of code */
})
solution2
0 2014-02-11 15:18:21
You could try jQuery . In any case you don't want to use jQuery take a look over here to add and remove a class without jQuery
$('#galleryImage img').click(function() {
$(this).addClass('active');
});
solution3
0 2014-02-11 15:23:45
Not much different then the others but to prevent the other images from having the same effect you should include this extra line.
$('ul li') , make sure to change ul li to what ever selector your images will be.
jQuery:
$(document).ready(function() {
$('ul li').on('click', function() {
$('ul li').removeClass('active'); // removes the active class form the other images
$(this).addClass('active');
});
});
Finally, a fiddle: Demo
To set up your website to use jQuery follow these steps,
Make sure to add this to your <head> tag to link to the jQuery library:
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
Next you can add a the script into a script tag or on its own .js file:
<script type="text/javascript">
/* Script goes here */
</script>
The script tag can go at the end or beginning of your html doc.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.