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.
Related
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.
I am trying to use a button as an image, will shuffle a block of text
Sorry if this is a very basic question, I'm just having trouble applying it to my current jQuery
There seem to be some bugs in the opening and closing tags of your .headline1 class. You first need to properly define the refresh click function by defining the id like $('#refresh').click().
I assume you need something similar as your solution:
$(function () {
$('#refresh').click(function() {
var parent = $(".headline1");
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
});
Check out this FIDDLE.
$(function(){
var image = $('img');
if (image.attr("id") == "webs"){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
});
I'm trying to write a conditional to find whether or not a hidden image is visible or not. Basically when you hover over the images, if a certain image is visible the hover image will be specific to that visible image. This would be fine if they were constantly visible but since they're on a cycle (cycle plugin) fading in and out every 10 secs I can't identify them. Any ideas?
Sounds like you have duplicate ids!!!! anyway it will be more logical if you write this block of code like this:
$("img").each(function(){
currentImage=$(this).attr("class");
if(currentImage=="webs"){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
})
$("img").each(function(){
if($(this).is(':visible')){
$('#hoverpoint').hover(function(){
$('#websitehov').stop(true,true).fadeIn('slow');
}, function() {
$('#websitehov').stop(true,true).fadeOut('slow');
});
}
})
Use visible selector
I'm trying to make some code which finds if a div exists, and if it does then have it fade away slowly. I have this to determine whether or not the div exists
if($('#error').length != 0)
{
$('#error').hide(500);
}
And that does work but only on a refresh, I've been attempting to put it in a timer like this:
var refreshId = setInterval(function()
{
if($('#error').length != 0)
{
$('#error').hide(500);
}
}, 500);
But its not getting rid of the innerHTML! I have some code which on hover alters the innerHTML of the error div so I can fill it up, but for some reason this isn't working, any advice would help!
Thank you!
$("#error").fadeOut(500);
Update:
If you are looking to check for existence:
var msg = $("#error");
if(msg.length) {
msg.fadeOut(500);
}
If you want to empty it:
$("#error").empty();
If you just want to delay 500ms then fade out, do this:
$("#error").delay(500).fadeOut();
To also empty the element, provide a callback to .fadeOut() like this:
$("#error").delay(500).fadeOut(function() {
$(this).html('');
});
There's no need to check .length, if an element that matches the selector isn't present, nothing happens :)
The div you're trying to hide likely hasn't loaded by the time your script runs. Try this; it will defer execution until the DOM is loaded:
$(document).ready(function() {
// put your code here
});
This is a good practice when using jQuery anyway.
Reference: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
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', ''));
});
});
});