I have multiple anchor tags with a rel="<img src"#"/>".
When I click on any <a></a>, I show a large image in another div with the rel value using a fadeIn effect.
What I want to do is check if the large image has the same src as the rel of the anchor and prevent the fadeIn effect if so.
$(document).ready(function () {
$("a.largeimg").click(function () {
var image = $(this).attr("rel");
$('.main-product-image').html('<img src="' + image + '"/>');
$('.main-product-image img').hide();
$('.main-product-image img').fadeIn();
return false;
if(src == image) {
$('.main-product-image img').show();
}
});
You can check if the rel of the anchor and the src of the image are the same and if so escape the function before the fade in code, like so:
var src = $('.main-product-image img').attr("src");
if (src == image) return false;
If I understand you question correctly, before the animation you need to confirm if the src of the image is equal to the rel attribute of the clicked element, thus preventing the animation!
JQUERY
$(document).ready(function () {
// use bind when targeting many elements
$("a.largeimg").bind("click", function () {
var $target = $('.main-product-image'), // target element
src = $target.find('img').attr("src"), // src from existent image
image = $(this).attr("rel"); // rel from clicked element
// if src different from image
if (src != image) {
$target.html('<img src="' + image + '"/>'); // append new image
$target.find('img').hide().fadeIn(); // perform the animation
}
// prevent the browser from continuing to bubble the clicked element
return false;
});
});
Ps:
Not tested, but should work just fine!
Related
Customer want change slick dots images. So I created block with his downloaded images and hide them. After that I get img src and create
new Image()
with src from hidden block. Add img to li, create new array with objects with key for 'hover' and 'default' image.
$('.slick-dots li').each(function(i, e) {
var img = new Image();
img.src = _images[i].normal;
_images - array with objects. Each value have one object. Each object have default and hover key with different src
So i have smth like this
[ {'normal': 'src', 'hover': 'src'}, {'normal': 'src', 'hover':
'src'}, {'normal': 'src', 'hover': 'src'} ]
img.slickData = _images[i];
img.setHover = function(e) {
this.src = this.slickData.hover;
};
img.removeHover = function(e) {
this.src = this.slickData.normal;
};
$(this).on('mouseenter', function(e) {
$('img' ,this).attr('src', img.slickData.hover)
});
$(this).on('mouseleave', function(e) {
$('img' ,this).attr('src', img.slickData.normal)
});
$(e).append(img);
});
}
Hover work. But problem is that I don't know the rigth way how to catch swipe and clickable events and change image to 'hover src'
P.S. Sorry for my English :)
#CBroe, thank you. This is almost what I want. But only swipe works as it's should be - immediately changes src to default img in previous and change src to hover in active dot.
After works after animation is complete and then change src. Before do the same but in reverse.
I do something else, but swipe is the most incomprehensible question:
$('.slick-prev, .slick-next').on('click', function(){
changeIcons() // when click next\prev
});
$('.services_slick').on('swipe', function(){
changeIcons() // when swipe
});
changeIcons() // when page is loaded
function changeIcons(){
var dotIndex = $('li.slick-active').index();
$('.slick-dots li img').each(function(i){
$(this).attr('src', _images[i].normal)
$(this).parent().removeClass('services_icons_hover')
});
$('li.slick-active img').attr('src', _images[dotIndex].hover)
$('li.slick-active').addClass('services_icons_hover');
}
This is my first post here, I always found solutions on this page, so thank you for that.
I have a problem with .removeClass and .addClass in my last program.
I load multiple pictures into array Frames and I want change all (previous-image) to (current-image) in frames[0]. Here is my code, it is change class only on second image. Here is code:
function loadImage() {
// Creates a new <li>
var li = document.createElement("li");
// Generates the image file name using the incremented "loadedImages" variable
var imageName = "graphics/img/Dodge_Viper_SRT10_2010_360_720_50-" + (loadedImages + 1) + ".jpg";
var imageName1 = "graphics/img/Dodge_Viper_SRT10_2010_360_720_50-" + (loadedImages + 1) + ".jpg";
/*
Creates a new <img> and sets its src attribute to point to the file name we generated.
It also hides the image by applying the "previous-image" CSS class to it.
The image then is added to the <li>.
*/
var image = $('<img>').attr('src', imageName).addClass("previous-image").appendTo(li) && $('<img>').attr('src', imageName1).addClass("previous-image light-image").appendTo(li);
// We add the newly added image object (returned by jQuery) to the "frames" array.
frames.push(image);
// We add the <li> to the <ol>
$images.append(li);
/*
Adds the "load" event handler to the new image.
When the event triggers it calls the "imageLoaded" function.
*/
$(image).load(function() {
imageLoaded();
});
};
function imageLoaded() {
// Increments the value of the "loadedImages" variable
loadedImages++;
// Updates the preloader percentage text
$("#spinner span").text(Math.floor(loadedImages / totalFrames * 100) + "%");
// Checks if the currently loaded image is the last one in the sequence...
if (loadedImages == totalFrames) {
// ...if so, it makes the first image in the sequence to be visible by removing the "previous-image" class and applying the "current-image" on it
frames[0].removeClass("previous-image").addClass("current-image");
/*
Displays the image slider by using the jQuery "fadeOut" animation and its complete event handler.
When the preloader is completely faded, it stops the preloader rendering and calls the "showThreesixty" function to display the images.
*/
$("#spinner").fadeOut("slow", function() {
spinner.hide();
showThreesixty();
});
} else {
// ...if not, Loads the next image in the sequence
loadImage();
}
};
This is, how it looks in browser:
<ol><li><img src="graphics/img/Dodge_Viper_SRT10_2010_360_720_50-1.jpg" class="previous-image"><img src="graphics/img/Dodge_Viper_SRT10_2010_360_720_50-1.jpg" class="light-image current-image"></li></ol>
This is, what I want:
<ol><li><img src="graphics/img/Dodge_Viper_SRT10_2010_360_720_50-1.jpg" class="current-image"><img src="graphics/img/Dodge_Viper_SRT10_2010_360_720_50-1.jpg" class="light-image current-image"></li></ol>
When I change this
var image = $('<img>').attr('src', imageName).addClass("previous-image").appendTo(li) && $('<img>').attr('src', imageName1).addClass("previous-image light-image").appendTo(li);
to this
var image = $('<img>').attr('src', imageName1).addClass("previous-image light-image").appendTo(li) && $('<img>').attr('src', imageName).addClass("previous-image").appendTo(li);
it still change only second img. Any help?
var image = $('<img>').attr('src', imageName).addClass("previous-image").appendTo(li) && $('<img>').attr('src', imageName1).addClass("previous-image light-image").appendTo(li);
is not doing what you think it is. It's only using the second element you declare. They both get appended to the page (because the appendTo method runs), but && is a logical operator, it's not used for concatenation, so the variable "image" only contains the second image you declared.
This will work instead:
var image = $('<img>', { "src": imageName, "class": "previous-image" });
image = image.add($('<img>', { "src": imageName1, "class": "previous-image light-image" }));
image.appendTo(li);
If you are just trying to replace all the previous-image classes with current image then you can do this:
$('img.previous-image').each(function(){
$(this).addClass("current-image").removeClass("previous-image");
});
I'm trying to create a simple Ecommerce product gallery. Whenever the user clicks the thumbnail the images load correctly, but for a second the layout will shift positions because the image is swapping with the selected image. Would anybody know a way to clean up my code where this does not happen? I'm new to Jquery, so i'm probably not doing this the right way.
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<img src="' + image + '"/>');
return false;
});
});
Here is a Demo
Don't hide #image instead the img inside it.
And i have added fadeOut instead of hiding to make it look more smooth. Then do fadeIn in the callback of fadeOut
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
$('#image img').fadeOut("slow", function(){
$('#image').html('<img src="' + image + '"/>');
$('#image').fadeIn('slow');
});
return false;
});
});
I am working on a web application, and i need to adjust a People Picker dialog height. currently to keep firing the script when the user open/close the dialog , i set a timer (2 seconds for the script to run), as follow:-
var interval = null; //Defines the start interval variable
$(document).ready(function () { // jQuery needed for this
/* People Picker Fix Starts */
if (navigator.appVersion.indexOf("MSIE 10") > -1) { // IE 10 Specific condition for People Picker Bug
interval = setInterval(adjustPeoplePicker, 2000);
}
/* People Picker Fix Ends */
});
function adjustPeoplePicker() {
if ($('.ms-dlgFrame').contents().find('#resultcontent').length > 0) {
$('.ms-dlgFrame').contents().find('#resultcontent').css('height', '350px');
$('.ms-dlgFrame').contents().find('#MetadataTreeControlTreeSearch').css('height', '350px');
//clearInterval(interval);
}
}
here is the realted markup for the dialog to open:-
<a id="ctl00_ctl41_g_a4fb58d0_ad0d_40cf_a4a3_ccabea410e43_ff141_ctl00_ctl00_UserField_browse" href="javascript:" onclick="__Dialog__ctl00_ctl41_g_a4fb58d0_ad0d_40cf_a4a3_ccabea410e43_ff141_ctl00_ctl00_UserField(); return false;" title="Browse">
<img alt="Browse" src="/_layouts/15/images/addressbook.gif" title="Browse">
</a>
so my question if i can fire the script only when the user click on <a> that have an <imag> inside it where the imag src = addressbook.gif , instead of keeps firing the script every 2 seconds??
$('a img').on('click', callScriptForImage);
....
// it is executed every time, but will call function adjustPeoplePicker()
// only if src attribute includes addressbook.gif, as you asked
function callScriptForImage(e){
var src = $(this).attr('src');
// read image src attribute
if( /addressbook\.gif/.test(src)){
// if src attribute includes addressbook.gif, call function
adjustPeoplePicker();
}
}
You could also listen for clicks on image that have that src attribute, with:
$('a img[src$="addressbook.gif"]').on('click', adjustPeoplePicker);
This way it is a lot cleaner.
<html>
<head>
<script>
function setClick(){
var tL = document.querySelectorAll("img[src*='addressbook.gif']"); //Getting all images which src contains addressbook.gif
for(var i=0, j=tL.length;i<j; i++){
//Just to visualize
tL[i].style.outline = '1px solid red';
//We actually click on the parent (a) and not the img so we set the click on the a tag
//The other tags will keep your normal onclick settings.
tL[i].parentNode.onclick = function(){
//Put your special script for those cases.
//adjustPeoplePicker() //Some version of this.
return false
}
}
}
</script>
</head>
<body onload = 'setClick()'>
<a href = 'https://www.google.com'><img alt = 'Browse' src = 'https://www.google.com/images/srpr/logo11w.png' /></a>
<a href = 'https://www.google.com'><img alt = 'Browse' src = 'https://www.google.com/images/srpr/logo11w.png?test=addressbook.gif' /></a>
<a href = 'https://www.google.com'><img alt = 'Browse' src = 'https://www.google.com/images/srpr/logo11w.png' /></a>
</body>
</html>
https://jsfiddle.net/7u3m2cng/1/
I am assuming you're asking to check to see whether the <img> src = addressbook.gif and NOT the href of <a>?
If that is the case, this should work for you:
$('a img').on('click', function () {
//Check to see if if the href matches addressbook.gif
var src = $(this).attr('src');
var regex = /addressbook\.gif/i;
if (regex.test(src)) {
// Execute your code here.
} else {
//Put anything else you want here
}
});
Hope this helps!
JRad The Bad
I'm trying to do a Fancybox image gallery. I have a function that takes a list of image URLs and appends them to the DOM like so
function handleImageURLs(imageURLs) {
var appendString = "";
//Create an <a> tag for each image URL
for(var i = imageURLs.length - 1; i >= 0; i --) {
appendString += "<a href='"+ imageURLs[i] +"' rel='img_preview'><img src='"+ imageURLs[i] +" />'</a>";
}
//Add the <a> tags containing images to the <body> element
$("body").append(appendString);
//Select the image <a> tags and call Fancybox
$("a[rel='img_preview']").fancybox({
onCleanup: function() {
//do cleanup stuff, remove images, etc.
}
});
}
Everything works fine. The <a> tags get added to the DOM. But Fancybox doesn't open at all. And doesn't throw any errors. Any idea what I'm doing wrong?
Used a combination of this and triggered a click event on the image that I wanted to display.