Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 141
  • Last Modified:

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
0
Tom Knowlton
Asked:
Tom Knowlton
  • 5
  • 3
1 Solution
 
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
 
Tom KnowltonWeb developerAuthor Commented:
I put an alert(  ) inside the function above and it is not firing.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now