jQuery Image Change - Gallery View - javascript

I have a large image in a gallery that needs to change when one of the thumbnails is clicked within a unordered list below. The images are coming in dynamically so the jquery script needs to be able to take the src of the thumbnail, remove "-thumb" from the filename, and then replace the large image with the new source.
Please let me know what is my best approach to a gallery like this.
Thanks in advance.
-B

Something like:
$('img.thumb').click(function() {
var src = $(this).attr('src');
$('#bigImage').attr('src', src.replace(/-thumb/,''));
});
The below examples apply if your thumbs are being loaded in via ajax:
(1) Using Events/live:
$('img.thumb').live("click", function() {
var src = $(this).attr('src');
$('#bigImage').attr('src', src.replace(/-thumb/,''));
});
(2) As a callback to one of jQuery's ajax methods (e.g.):
function initThumbs()
{
$('img.thumb').click(function() {
var src = $(this).attr('src');
$('#bigImage').attr('src', src.replace(/-thumb/,''));
});
}
$('#thumbsDiv').load('thumbs.php?p=2', initThumbs);

karim79's answer could be shortened slightly:
$('img.thumb').click(function() {
$('#bigImage').attr('src', $(this).attr('src').replace(/-thumb/,''));
});
But otherwise, good answer!

The only addition to karim79's is:
In a case the thumbnails are placed within same parent binding an event on that parent would be much better (elegant?) solution that binding events on all thumbnails. The event is propagated, so you can find thumbnails by checking event target.

$().ready(function() {
//get all images from unordered list and apply click function
$('ul#myList img').each(function() {
$(this).click(function() {
$('#mainImage').attr('src', $(this).attr('src').replace('-thumb', ''));
});
});
});

Related

.removeClass() only working once

I have laid out some images in HTML 4x2. My script is currently enlarging every image using .addClass(), however will only .removeClass() on the first image within the gallery.
How would I make it so as .removeClass() can be applied to every image? - Here is my code:
$(document).ready(function () {
$('#fig').delegate('img', 'click', function () {
$(this).addClass("imgbig");
$('.xbutton').stop(true, true).fadeTo(800, 1);
$("#fig").stop(true, true).addClass("f1");
});
$('.xbutton').click(function () {
$('#imgSmall').removeClass("imgbig");
$('.xbutton').stop(true, true).fadeOut(800, 0);
$("#fig").stop(true, true).removeClass("f1");
});
});
Here $('#imgSmall').removeClass("imgbig") you select the image with id imgSmall, not all the images you have.
I suppose that you should rewrite you callback like below:
$('.xbutton').click(function(){
$(".imgbig").removeClass("imgbig");
$('.xbutton').stop(true, true).fadeOut(800, 0);
$("#fig").stop(true, true).removeClass("f1");
});
Can you post the html please. I'm guessing you have a bunch of images, when you click on them, the image expands and when you click on the close button the image shrinks?
$(function() {
$('#fig').on('click','img', function(){
$(this).addClass("imgbig");
$('.xbutton').stop(true, true).fadeTo(800,1);
$("#fig").stop(true, true).addClass("f1");
});
$('#fig').on('click', '.xbutton', function(){
// this line may be wrong depending on where your button is in relation to the image
$(this).stop(true, true).fadeOut(800, 0).find('.imgSmall').removeClass('imgbig');
$('#fig').stop(true, true).removeClass("f1");
});
});
Note: I changed imgSmall to a class as I am guessing all small images have the same class, IDs should always be unique.

Refresh an arbitrary image with a button

I have an auto-generated form that also handily displays thumbnails. I want to add a button beside the image that will refresh it if it is updated. I want to take cached images into account.
I add a button easily enough:
// add a refresh button to image previews
$('a[href*="/thumbs/"]').after('<div class="refresh-image"><button class="refresh-image-button">Refresh</button></div>');
And since I'm okay if the refresh button refreshes all of the stale images I try to append a query string to the image src (deleting an old query string if it exists):
// attach refresher to button
$(".refresh-image-button").click(function() {
$('img[src*="/thumbs/"]').attr("src", $(this).attr("src").split('?',1)+'?'+Date.now());
});
However, I can't really do this because here $(this) doesn't refer to the matched image, and I can't do a split operation within this jquery match anyway.
How do I do it?
As a bonus if anyone has a ref to decent auto refresh image code, that would be helpful.
This builds on a simpler SO inquiry here.
Iterate through the collection:
$(".refresh-image-button").click(function() {
$('img[src*="/thumbs/"]').each(function() {
$(this).attr("src", $(this).attr("src").split('?',1)+'?'+Date.now());
});
});
http://jsfiddle.net/g68gxu93/1/
You could generate a variable with the new trailing parameter separately like :
$(".refresh-image-button").click(function() {
var newAttr = $('img[src*="/thumbs/"]').attr("src").split("?")[0] + "?ver=" + new Date().getTime();
$('img[src*="/thumbs/"]').attr("src", newAttr);
});
see JSFIDDLE
I ended up doing something almost precisely like #Moogs answer.
addRefreshButtons();
// NICEITIES
function addRefreshButtons() {
// add a refresh button to image previews
$("div.refresh-image").remove();
$('a[href*="/thumbs/"]').after('<div class="refresh-image"><button class="refresh-image-button">Refresh</button></div>');
// attach refresher to button
$(".refresh-image-button").click(function() {
refreshThumbnails();
});
}
function refreshThumbnails() {
$('img[src*="/thumbs/"]').each(function() {
var src = $(this).attr('src');
var newSrc = src.split('?',1)+'?'+Date.now()
$(this).attr('src', newSrc);
});
}

jQuery src replace crossfade on hover

I have a couple of images on my Joomla site, each one with a black&white version and a color version. I'd like to change a part of the src ('bw' to 'color') when hovered over with a nice crossfade. I'm very new to jQuery, so the only code I have is this, which is probably completely wrong.
$(".grey img").mouseover(function() {
$(this).attr('src', function(i, src) {
return src.replace( 'bw', 'color' ).fadeIn(800);
});
$(".grey img").mouseout(function() {
$(this).attr('src', function(i, src) {
return src.replace( 'color', 'bw' ).fadeOut();
});
I've searched for a solution for hours and at this point I'm not sure if it's really obvious and I'm completely missing it. So, sorry if it is, or if there is a solution somewhere and I didn't look enough.
I would like to solve this without having to link two images in the html, but if there's no other solution, I would be thankful for any tips on how to achieve this.
You have to get the source initially before you can change it. I'll also clean it up a bit:
$('.grey').on({
mouseenter:function(){
var $this = $(this),
src = $this.attr('src').replace('bw','color');
$this.fadeOut(function(){
$this
.attr('src',src)
.on('load',function(){
$this.fadeIn();
});
});
},
mouseleave:function(){
var $this = $(this),
src = $this.attr('src').replace('color','bw');
$this.fadeOut(function(){
$this
.attr('src',src)
.on('load',function(){
$this.fadeIn();
});
});
}
},'img');
As you can see, you were on the right track, but you just need to capture the source before you can manipulate it. The other changes I made were:
Using .on() which allows for single binding event
Using mouseenter and mouseleave instead of mouseover and mouseout
Delegating .on() assignments to all img contained in .grey
Also I used a variable for cleanliness of reading, but you could have just as easily placed the $(this).attr('src').replace('bw','color') in the assignment and foregone the variable entirely.
EDIT - updated to show fadeIn/fadeOut on image change.

Transferring Onclick Function to jQuery

I have a jQuery function that replaces thumbnails with the main image.
This is the code that I use for replacing the main image:
$(document).ready(function(){
$(".wheelFinishThumbs a").click(function() {
var mainImage = $(this).attr("href");
var mainTemp = mainImage.replace(/-mid/,'');
var mainTemp = mainTemp.replace(/png/,'jpg');
$("#main_view img").attr('src', mainImage );
$("#main_view a").attr('href',mainTemp);
return false;
});
I use a PHP function to download (save) images by changing their header values. This is the HTML code that I use to download images
Click to download
but since "image.jpg" has to be my dynamic variable some how I've got to call this argument in the jQuery image replacement function and replace "image.jpg" dynamically each time I change the main image. I want to replace image.jpg with var mainImage from my image swapping function.
My jQuery knowledge is really limited, so If somebody can help me to do it, would be great.
This should work, assuming you are using jQuery 1.7+
Assuming your a tag markup is like this after you dynamically set the href to new image
Download Image
JavasScript
$(function(){
$(document).on("click","#main_view",function(e){
e.preventDefault();
var self=$(this);
alert("replace this with awesome code")
window.open('download.php?file='+self.attr("href")+,'_self', 'download', 'status=0');
});
});
Note that this function will work only of a single a element because we are targeting binding the functionality to the element with id main_view. Since ID's should be unique in the DOM, If you want to have the functionality to many a tags, i would add a common class selector to the a tag like this
<a class="aDownloadble" href="urltoSomeImage2.jpg" id="main_view">Download Image2</a>
<a class="aDownloadble" href="urltoSomeImage4.jpg" id="main_view">Download Image4</a>
And Update my script like this
$(function(){
$(document).on("click",".aDownloadble",function(e){
e.preventDefault();
var self=$(this);
alert("replace this with awesome code")
window.open('download.php?file='+self.attr("href"),'_self', 'download', 'status=0');
});
});
jQuery on is nnot necessary. you can simply use the click event binding directly. But if you are loading the markup of those links via ajax / injecting to the DOM dynamically, you should use on or live.
$(document).ready(){
$("#main_view a").click(function() {
// Code to run when user clicks on link
});
});

jQuery - can't get the 'this' to work

i've managed to get a simple animation working so when I roll over my div with the class "gallery-wrap", an image with the class "magnifier" appears on top.
My problem is I have lots of divs with the class "gallery-wrap" and lots of images which have the class "magnifier".
$("img.magnifier").hide(); //this hides the image on page load
$('.gallery-wrap').hover(function() {
$("img.magnifier").show();
}, function() {
$("img.magnifier").hide();
});
The img.magnifier is located inside the .gallery-wrap parent div, not inside .gallery-wrap.
I need it so this does only the current hovered element, which it is doing already, but its animating all the img.magnifier on the page?
I thought it would maybe look like this...
$("img.magnifier").hide(); //this hides the image on page load
$('.gallery-wrap').hover(function() {
$(this).parent("img.magnifier").show();
}, function() {
$(this).parent("img.magnifier").hide();
});
But cannot get it to work.
Any ideas would be a huge help thanks.
Shouldn't it be like this:
$('.gallery-wrap').hover(function() {
$(this).find("img.magnifier").show();
}, function() {
$(this).find("img.magnifier").hide();
});
If I understand correctly, img.magnifier is a child of .gallery-wrap, so find() should be used instead of parent().
You were close with:
$(this).parent("img.magnifier").show();
Change it to:
$(this).parent().find("img.magnifier").show();
Then it should work. Do the same thing with your hide() of course.
Can you assign matching id values to the gallery-wrap and associated img.magnifier?
$('.gallery-wrap').hover(function() {
var id = $(this).attr('id');
$("img.magnifier#"+id).show();
}, function() {
$("img.magnifier#"+id).hide();
});
As img.magnifier is not inside .gallery-wrap, find() will not do it here.
Try this one:
$("img.magnifier").hide(); //this hides the image on page load
$('.gallery-wrap').hover(function() {
$(this).parents("img.magnifier").last().show();
}, function() {
$(this).parents("img.magnifier").last().hide();
});
The .last() is necessary if you have more than just one img.magnifier in the parents() collection.
You need to change:
$(this).parent("img.magnifier")
to:
$(this).find("img.magnifier")
since the img tag is a child element of your gallery-wrap.

Categories

Resources