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?

[Webinar] Streamline your web hosting managementRegister Today

x
 
leakim971Connect With a Mentor PluritechnicianCommented:
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
All Courses

From novice to tech pro — start learning today.