CODEWITHSUNDEEP
jquery
forrest
forrest

Reputation: 10982

How do I use jQuery to load a photo?

I am using jquery to display larger images in a window when a thumbnail is clicked. This aspect works very well. However, I have a series of windows and when I close out one window the main image does not load when I open a new window.

I am working on this page: http://ee.rouviere.com/web/portfolio

If you click on any one of the thumbnail images it pops up a window and you can click through the thumbnails. When you close out the window the jQuery clears the values. However, when you click on another thumbnail the main image does not load until you click on one of the thumbnails.

How do I get the main image to load when the window opens?

Here is the jQuery I am using. I began with this:

$("a:has(img.web-port)").click(function() {
    var largePath = $(this).attr("href");
    var caption = $(this).attr("title");
    $(".photo_large").attr({ src: largePath});
    $(".caption1").text(caption);
    return false;
});

That works great to trigger the larger images. But then I added this because the last main image would not load in the next window that I opened:

$("#fancybox-close").click(function(){
   $(".photo_large").attr({ src: ''});
   $(".caption1").text('');
});

I would really appreciate some help on this. Operators are standing by to respond promptly to your input.

Thanks!

Upvotes: 0

Views: 218

Answers (4)

Mark Coleman
Mark Coleman

Reputation: 40863

Your issue is you are targeting all elements with your .class selector. They should be relative to the current .frame shown.

$("a:has(img.web-port)").click(function() {
    var largePath = $(this).attr("href");
    var caption = $(this).attr("title");
    var $frame = $(this).parents(".frame"); //get the current frame
    var $large = $frame.find(".photo_large"); //find the large photo within that frame
    $large.attr("src", largePath).show();
    $frame.find(".caption1").text(caption);
    return false;
});

$("#fancybox-close").click(function() {
    //Reset everything back to the initial state of the div.
    var $frame = $("#fancybox-content .frame");
    var $a = $frame.find(".thumb1 a").first(); //reset the frame to the first thumb a
    var $large = $frame.find(".photo_large");
    $large.attr("src", $a.attr("href"));
    $frame.find(".caption1").text($a.attr("title"));
});

Example of it working on jsfiddle.

Upvotes: 1

Josh C Josh C
Josh C Josh C

Reputation: 342

Your mistake was that whit jQuery selector $(".photo_large") you ware selecting all elements whit class="photo_large". ALL of them in the page - even hidden, so that's why when you ware open open another thumbnail from main page you saw old large pix... simple.

You solution was wrong as well, because when you ware closing preview window you selected all elements $(".photo_large") and change their "src:" to nothing!!!

so here's my solution:

Remove:

$("#fancybox-close").click(function(){
   $(".photo_large").attr({ src: ''});
   $(".caption1").text('');
});

Replace:

$(".photo_large").attr({ src: largePath});
$(".caption1").text(caption);

With:

$(this).parent().parent().parent().prev().find(".photo_large").attr({ src: largePath});            
$(this).parent().parent().parent().next().find(".caption1").text(caption);

Should work, if i count parents right... :) GBY!

Upvotes: 1

James South
James South

Reputation: 10635

Just use the native fancybox method to do this.

<a id="exampleOne" title="title you want to pass" href="path to large image">
    <img alt="exampleOne" src="path to small image">
</a>

$(document).ready(function(){
   $("a#exampleOne").fancybox();
});

Upvotes: 0

Dutchie432
Dutchie432

Reputation: 29160

What if instead of clearing the source, you simply hide the image on closing, and show it again upon opening?

$("a:has(img.web-port)").click(function() {
    var largePath = $(this).attr("href");
    var caption = $(this).attr("title");
    $(".photo_large").attr({ src: largePath});
    $(".photo_large").show();  // <---------------------------LOOK HERE
    $(".caption1").text(caption);
    return false;
});

$("#fancybox-close").click(function(){
   $(".photo_large").hide();  // <---------------------------LOOK HERE
   $(".caption1").text('');
});

Upvotes: 0

Related Questions