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.

How exactly do you want it to change? You need to be a bit more specific and also offer some examples of what you have tried. — Josh Powell, Feb 11 '14 at 15:13
If you want this to remain on the same page, javascript (read AJAX) will be the way to go. You could accomplish this using a form and page load (pure PHP/HTML), but that would be a bit clunky in my opinion. — Michael Wheeler, Feb 11 '14 at 15:15

score 0 · Answer 1 · answered Feb 11 '14 at 15:15

0

Try adding some class for indicating clicked thumbnail with jQuery:

$('.myThumbnail').click(function(){
    $(this).addClass('clickedThumbnailClass');
    /* rest of code */
})

answered Feb 11 '14 at 15:15

Justinas

41,402
5
66
96

I haven't used jquery before. I have used javascript but not much. So javascript would be comfortable at the moment. Can I get help for that please – Toie Feb 11 '14 at 15:21
@Toie i suggest you to use jQuery (save kids in Africa :D ). To add class in js: http://stackoverflow.com/questions/2739667/add-another-class-to-a-div-with-javascript – Justinas Feb 12 '14 at 07:07

score 0 · Answer 2 · edited May 23 '17 at 12:29

0

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');
});

JSFIDDLE

edited May 23 '17 at 12:29

Community

1
1

answered Feb 11 '14 at 15:18

Johnny000

2,058
5
30
59

Josh Powell · Answer 3 · 2014-02-11T15:49:26.873

0

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.

edited Feb 11 '14 at 15:49

answered Feb 11 '14 at 15:23

Josh Powell

6,219
5
31
59

Hi, This is the first time I am trying to use JS. I've seen DEMO from your link. I would like to first experiment with the same code on my localhost. I have pasted the code in Dreamweaver. Would you be kind to tell me to insert JS code what shoud I Use. – Toie Feb 11 '14 at 15:44
You should use a script tag or a separate .js file to save it on. I will add some more info to my answer on how to use jQuery. – Josh Powell Feb 11 '14 at 15:45
I am sorry to ask you again. What I've done as you've mentioned, I've put src="http:..." and 2nd – Toie Feb 11 '14 at 16:04
Can you provide me a link to the site? – Josh Powell Feb 11 '14 at 16:08
OK. I have it on my localhosst but I put it on Web hosting now and post a link to it. Is this ok? – Toie Feb 11 '14 at 16:11
http://kmd-r.dmu.ac.uk. Here, click on 'Crimean War Photos' tab and let me know please. – Toie Feb 11 '14 at 16:15
After looking through your website source files I don't see you linking to jQuery in the head tag and also don't find your script anywhere. Refer to this link: http://codepen.io/anon/pen/hawJc – Josh Powell Feb 11 '14 at 16:33
Dear Josh, Can you look at the website, I have put on hosting service please. vyomweb.com/RogerFenton I have applied JS but it applys for a second and ran back. I am very thankful for your help. – Toie Feb 11 '14 at 17:53

Highlight a thumbnail when it is clicked in gallery.php

3 Answers3