jQuery: fire call on fadeIn function - javascript

I'm currently using the ImageZoom plugin (view here), the plugin is great and works a charm. But for a site I'm working on the images (that you need to zoom into) are being appended to their container via $("CONTAINER_CLASS_HERE").html('...etc, thus aren't present on load (this function needs to stay too), this means though that the ImageZoom() function isn't working, even when calling it inside the fadeIn function.
jSFiddle demo here: http://jsfiddle.net/y2tdaak2/
jQuery:
$(document).ready(function () {
$('.single-letting-lightbox-image').ImageZoom();
$("button").click(function () {
var imgUrl = $(this).data('rel');
$("#area").fadeIn();
$(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />")
.hide().imagesLoaded(function () {
$(this).delay(500).fadeIn(500, function () {
$(this).ImageZoom();
});
});
});
});
Any suggestions on how to get this to work would be greatly appreciated, can't figure it out!

Here you are a working solution :) http://jsfiddle.net/y2tdaak2/1/
$(document).ready(function () {
$("button").click(function () {
var imgUrl = $(this).data('rel');
$("#area").fadeIn();
$(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />")
.hide().imagesLoaded(function () {
$(this).delay(500).fadeIn(500, function () {
$('.single-letting-lightbox-image').ImageZoom();
});
});
});
});
You need to call ImageZoom after the image is loaded :)

have you tried to callback the function?
$("button").click(function () {
var imgUrl = $(this).data('rel');
$("#area").fadeIn();
$(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />")
.hide().imagesLoaded(function () {
$(this).delay(500).fadeIn(500, function () {
$(this).ImageZoom();
});
});
// callback the function to make it work again since the way you do this is not yet loaded
$('.single-letting-lightbox-image').ImageZoom();
});

Related

JQuery $("body").append() not working on "first click"

I was trying to create a lightbox that triggers on a button click. I already have a lightbox that triggers on click on a div in the same document.ready that works perfectly, BUT the one on the button doesn't work the first time I click it. Then, works perfectly. Well, I don't want to create a tooltip that says "please click it twice first time", so how can I fixed?
(If anyone can also explain to me why this happens would be marvelous)
$(document).ready(function () {
//BUTTON CLASS
$(".focosBTN").click(function () {
$("body").append("<div class='img-popup'></div>");
$(".img-popup").click(function () {
$(".img-popup").fadeOut(500, function () {
$(this).remove();
}).addClass("lightboxfadeout");
});
$(".focosBTN").click(function () {
$(".img-popup").fadeIn(500);
});
});
//DIV CLASS
$(".lightbox").click(function () {
let imgsrc = $(this).find('.lightboxImg').attr('src');
$("body").append("<div class='img-popup'><img src='" + imgsrc + "'></div>");
$(".img-popup").click(function () {
$(".img-popup").fadeOut(500, function () {
$(this).remove();
}).addClass("lightboxfadeout");
});
});
$(".lightbox").click(function () {
$(".img-popup").fadeIn(500);
});
});

Prevent jquery fadeIn many times

Need to prevent the emergence of tips several times (when not a single clue pointing at a link persists even if the cursor is not on a link).
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeOut();
});
});
To understand the problem to move the red square over several times, and then remove it in the direction
http://jsfiddle.net/8LnTC/1/
I apologize for my bad English
You need to stop any queued animations first...
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeOut();
});
});
Working jsfiddle example...
Incidentally, you shouldn't have multiple elements with the same ID. You need to rethink how you're going to relate the elements to each other - maybe use data attributes.
Here's a suggested alternative...
Working jsfiddle example...
HTML change
<a class="area_tooltip" data-associated-tooltip="item_1">show</a>
Javascript change
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeOut();
});
});
You put the tip's ID in the attribute data-associated-tooltip and then you can access that with $(this).data("associated-tooltip"). That will get rid of any ID conflicts which will most likely cause untold problems.

Update javascript to newest version of JQuery

Probably a terrible title but wasn't sure how to state the issue.
I am working on creating a nested gridview. I am using an example from: http://www.aspsnippets.com/Articles/ASPNet-Nested-GridViews-GridView-inside-GridView-with-Expand-and-Collapse-feature.aspx
It works great when using the example to show/hide the nested gridview until you try to run it with JQuery v1.10.2. The below script example uses .live which was depreciated in v1.7+. So I updated to .on as recommended. The problem is the "minus" of the script does "remove". What seems to be happen is the "plus" function seems to trigger again.
Here is the original:
<script type="text/javascript">
$(document).ready(function () {
$("[src*=plus]").live("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "../App_Themes/Theme1/minus.png");
});
$("[src*=minus]").live("click", function () {
$(this).attr("src", "../App_Themes/Theme1/plus.png");
$(this).closest("tr").after.remove();
});
});
</script>
and her is how I updated
<script type="text/javascript">
$(document).ready(function () {
$("[src*=plus]").on("click", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "../App_Themes/Theme1/minus.png");
});
$("[src*=minus]").on("click", function () {
$(this).attr("src", "../App_Themes/Theme1/plus.png");
$(this).closest("tr").after.remove();
});
});
but still no go. Again is seems as though $("[src*=plus]") just fires over and over.
The image is update from plus to minus.
You need to use event delegation method:
$(document).ready(function () {
$(document).on("click", "[src*=plus]", function () {
$(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
$(this).attr("src", "../App_Themes/Theme1/minus.png");
});
$(document).on("click", "[src*=minus]", function () {
$(this).attr("src", "../App_Themes/Theme1/plus.png");
$(this).closest("tr").after.remove();
});
});

Object screenoff in "onmouseover"

The code below shows a window when mouse is over a link. I wonder how to make this window appear on top of the word when it doesn't "fit" on the screen.
function showLayer(obj){
var div = document.getElementById(obj).style;
div.display = "block";
}
if i understand your question, here is some jquery to help (also replaces showLayer())
$(document).on("mouseenter", '#myElement', function () {
$("#" + obj).toggle();
});
$(document).on("mouseout", '#myElement', function () {
$("#" + obj).toggle();
});
$(document).on("mousemove", '#myElement', function (i) {
$("#" + obj).offset(function () {
return {left: i.pageX, top: i.pageY}
});
});
im not sure how you get the value for obj, so you would have to edit to your specific needs.

How do you retrieve the image source of an image that the user has clicked on? (jQuery)

I am trying to retrieve the image source of an image that the user has clicked on.
This is what I have and it doesn't seem to be working:
var imgSrc = getSrc(image)
function getSrc(image) {
$('img').each(function() {
$(this).click(function() {
$(this).attr('src')
}); //end click
}); //end each
} //end getSrc
$('img').click(function() {
alert( $(this).attr('src') ); // or this.src
});
You don't need any loop. Above code will work just fine, I think.
Full code
function getSrc(image) {
var src;
$('img').click(function() {
src = $(this).attr('src'); // or this.src
});
return src;
}
Note
In your question you don't use image arguments in code. I'm not sure why you're using this. If you want to use get src of that image you passed via arguments then you can try:
$(image).attr('src');
You are not returning anything from the function. Also, you do not need the .each() call as you know the image that has been clicked:
var imgSrc = '';
$(document).ready(function () {
$('img').click(function () {
imgSrc = $(this).attr('src');
});
});

Categories

Resources