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');
}
Related
I am working on a custom WordPress theme and I have added the function of swapping the main image with the thumbnail image on hover see here using the following JS:
jQuery(document).ready(function($) {
// Get the main WC image as a variable
var wcih_main_imgage = $( 'a.woocommerce-main-image' ).attr( 'href' );
// This is what will happen when you hover a product thumb
$(".thumbnails a").hover(
// Swap out the main image with the thumb
function(){
var photo_fullsize = $(this).attr('href');
$('.woocommerce-main-image img').attr('src', photo_fullsize);
},
// Return the main image to the original
function(){
$('.woocommerce-main-image img').attr('src', wcih_main_imgage);
}
);
} );
This works but returns images that are bigger than the main image. Now I can manage this problem in other areas of the site by using this code:
<script>
jQuery(document).ready(function() { jQuery('.overlayimage').css('height','288px'); });
jQuery('.overlayimage').css('width','288px')
jQuery('.overlayimage').css({'overflow':'hidden', 'left':'0', 'top':'0', 'position':'absolute'});
function resizeoverlay() {
var pr = jQuery('.overlayimage').eq(0).prev();
jQuery('.overlayimage').css('height',pr.height());
jQuery('.overlayimage').css('width',pr.width());
}
jQuery(window).load(resizeoverlay);
jQuery(window).resize(resizeoverlay);
</script>
... but I am struggling to get the two functions working correctly. Can anyone point me in the right direction?
you should do all your operations in jquery dom ready function like that
<script>
jQuery(document).ready(function() {
jQuery('.overlayimage').css('height','288px');
jQuery('.overlayimage').css('width','288px');
jQuery('.overlayimage').css({'overflow':'hidden', 'left':'0', 'top':'0', 'position':'absolute'});
function resizeoverlay() {
var pr = jQuery('.overlayimage').eq(0).prev();
jQuery('.overlayimage').css('height',pr.height());
jQuery('.overlayimage').css('width',pr.width());
}
jQuery(window).load(resizeoverlay());
jQuery(window).resize(resizeoverlay());
});
</script>
Hello I want to fadeOut image, and then do fadeIn with a new one, so I wrote a simple code, but something goes wrong, because when .photo img fadesOut, then fadesIn this same photo, but after, a few second its changes because of new "src", but even if browser didn't load a new image, the old one shound't show, becuase src is changed, but it shows, and after a second, maybe two changes to the new one. Can somebody tell me what's wrong?
var dimage = $next.children("img").attr("rel");
$(".photo img").fadeOut("slow", function () {
$(".photo img").attr("src", dimage);
$(".photo img").fadeIn("slow");
});
This may be because the image has to load after the src is altered.
Consider putting the image in a tag, then setting the css property to display:none. This way the image will preload in the browser before your script runs and will be available when it does.
you aren't giving the new image enough time to load.
function loadImage (src) {
return $.Deferred(function(def){
var img = new Image();
img.onload = function(){
def.resolve(src);
}
img.src = src;
}).promise();
}
var dimage = $next.children("img").attr("rel");
var imageLoadedDef = loadImage(dimage);
$(".photo img").fadeOut("slow", function () {
def.done(function(src){
$(".photo img").attr("src", src);
$(".photo img").fadeIn("slow");
});
});
the problem as highlighted is about images not ready for display when you call them, so the solution is to preload them before starting the slideshow, create a function with an array of images path
function preLoad(){
var imgs = {'test1.jpg', 'test2.jpg', 'test3.jpg'};
var img = document.createElement('img');
for(var i = 0; i < imgs.leght; i++){
img.src = imgs[i]; //all images gets preloaded at this stage
}
startSlider(); //here you will do your code
}
I was given this fantastic script, from #Phil, that helped get my out of a stump and it works perfectly in my application. But because I'm so new to javascript I can't figure out how to make the images animate opacity in and animate opacity out.
// jQuery syntactic sugar to run after page loads
$(function () {
// attach a click event to anything with a data-file attribute
$("[data-file]").on('click', function (evt) {
// figure out what was clicked
var clickedEl = $(evt.target);
// get the data-file attribute
var dataFile = clickedEl.attr('data-file');
var container = $(".bom_container");
// empty the div
container.empty();
// create image element
var img = $("<img/>").attr("src", dataFile)
// add it to the container
container.append(img);
// or update the background image
// container.css('background-image','url('+ dataFile +')');
});
});
When the links are clicked on, these images open in a container. But again, I would like the images to ease in instead of just BOOM APPEAR. Is there somewhere I can add animate opacity to this script or do I have to add an whole new script?
jQuery has great .fadeIn() and .fadeOut() methods just for this.
// jQuery syntactic sugar to run after page loads
$(function () {
// attach a click event to anything with a data-file attribute
$("[data-file]").on('click', function (evt) {
// figure out what was clicked
var clickedEl = $(evt.target);
// get the data-file attribute
var dataFile = clickedEl.attr('data-file');
var container = $(".bom_container");
// empty the div
container.empty();
// create image element
var img = $("<img/>").attr("src", dataFile).css("display","none") // <----- see here
// add it to the container
container.append(img);
img.fadeIn(/*duration in ms*/) // <----- see here
// or update the background image
// container.css('background-image','url('+ dataFile +')');
});
});
Before changing the image src you can fade out the image, change the source, then fade in the new image.
$('#img_selector').fadeOut('fast', function() {
$(this).attr("src", "newsource.jpg")
.fadeIn("fast");
});
Using Dropzone.js, I need to detect the dimesions of the image when added files and apply them to its parent .details div. The following code code works and return an alert with the added image width.
myDropzone.on("addedfile", function(file, xhr) {
var fr;
fr = new FileReader;
fr.onload = function() {
var img;
img = new Image;
img.onload = function() {
return alert(img.width);
};
return img.src = fr.result;
};
return fr.readAsDataURL(file);
});
The thing is that I have no idea how to assign the width to its parent .details element which set the preview width of the preview.
I try replacing the alert for this code but it doesn't do anything.
$(this).parent('.details').css('height',img.height);
I'm a bit lost in how to relate the value inside the onload function to applying it to its parent class.
With the latest version of dropzone you don't have to write this code yourself.
Simply read the file.width and file.height properties that are set on the file object when the thumbnail is generated.
The problem, why your CSS doesn't affect the element, is because you didn't specify the unit, px in this case. So your code can be:
myDropzone.on("thumbnail", function(file) {
$(this.element).parent('.details').css('height', file.height + 'px');
});
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!