Make carousel images clickable - jQuery

I request assistance in making the images clickable for the sequential images on the main page of my website.

Here is the live site URL:

http://www.utahkidsfoundation.com
LVL 5
Tom KnowltonWeb developerAsked:
Who is Participating?
 
leakim971PluritechnicianCommented:
not sure where you put the code, it work fine for me...
try this one :
    $(document).on("click", "img.fotorama__img", function(event) {
           var $img = $(this);
           var img = $(this).get(0);
           alert($(this).closest("a").attr("href"));
           location.href = $(this).closest("a").attr("href");
    });

Open in new window

0
 
leakim971PluritechnicianCommented:
what do that mean?

jQuery(function($) {
    $("div.fotorama__stage__shaft img.fotorama__img").click(function(event) {
           var $img = $(this);
           var img = $(this).get(0);
           // do what you want with
    });
});

Open in new window

0
 
Tom KnowltonWeb developerAuthor Commented:
I am sorry...what I meant to say was....when you click on the image...it takes you to another URL.... like yahoo.com
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
Tom KnowltonWeb developerAuthor Commented:
I put an alert(  ) inside the function above and it is not firing.
0
 
Tom KnowltonWeb developerAuthor Commented:
Okay...the second function worked.  Thank you.

How can I determine if

img.currentSrc

contains "1.jpg" or "2.jpg", etc.
0
 
leakim971PluritechnicianCommented:
try to understand the code...
           var $img = $(this);
           var img = $(this).get(0);

so use :

$(this).attr("src")
or :
$img.attr("src")
or :
img.src
0
 
Tom KnowltonWeb developerAuthor Commented:
My final solution, based on leakim971's  input.

 $(document).on("click", "img.fotorama__img", function (event) {
                    var $img = $(this);
                    var img = $(this).get(0);
                
                    if (img.currentSrc.indexOf("1.jpg") >= 0) {
                        location.href = "MeetOurUtahKids.aspx";
                    }
                    if (img.currentSrc.indexOf("2.jpg") >= 0) {
                        
                        window.open("http://www.facebook.com/groups/utahkids");
                    }
                    if (img.currentSrc.indexOf("3.jpg") >= 0) {
                        location.href = "ListOfNonProfits.aspx";
                    }
                    if (img.currentSrc.indexOf("4.jpg") >= 0) {
                        location.href = "Default.aspx";
                    }
                });

Open in new window

0
 
Tom KnowltonWeb developerAuthor Commented:
Excellent answer...and fast!  Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.