We Keep Coding

JQuery Image Gallery - Selected Images Temporarily Changes Layout

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;
});
});

Woocommerce Thumbnail Image Swap

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>

Fading from image to image (not image to white to image) using Javascript

I have a "slideshow" type of function where images fade in and out to each other. It works fine, but when it fades, it is fading the first picture out to white and then the second picture fades in. What I want is for the first image to fade right into the second (with no empty white background in between). Can I do this?
Here is an example: http://jsfiddle.net/aegtjm5y/5/
image
<img id="image1" src="http://9pixs.com/wp-content/uploads/2014/06/dog-pics_1404159465.jpg" style="width: 100%;">
JS
var curIndex = 0;
var src = ['/images/IMG_20140907_203614.jpg', 'http://9pixs.com/wp-content/uploads/2014/06/dog-pics_1404159465.jpg', 'http://cvcl.mit.edu/hybrid/cat2.jpg'];
var fadeTimeInMilliseconds = 2000;
var waitTimeInMilliseconds = 1000;
$(document).ready(function(){
switchImageAndWait(true);
});
function switchImageAndWait(fadeOut2){
if(fadeOut2){
setTimeout(fadeOut, waitTimeInMilliseconds);
}else{
var index = Math.floor((Math.random()*src.length))
if(curIndex == index){
index++;
if(index >= src.length){
index-=2;
}
}
curIndex = index;
$("#image1").attr("src", src[index]);
fadeIn();
}
}
function fadeOut(){
$("#image1").fadeTo( fadeTimeInMilliseconds, 0 , function() { switchImageAndWait(false); });
}
function fadeIn(){
$("#image1").fadeTo( fadeTimeInMilliseconds, 1 , function() { switchImageAndWait(true); });
}

Edit: "Can I do this?" - No. You can't do this using only one image element.
What you basically need is two images one on top of the other.
I edited your fiddle and it's working fine:
JSFiddle
So basically I added another img element and set the position of the images to be absolute (so they are overlaying).
<img id="image2" src="http://cvcl.mit.edu/hybrid/cat2.jpg" style="width: 100%;position: absolute;">
I updated the javascript stuff so the images get changed in both fadeIn and fadeOut "events". The principle is that the upper image gets faded out and faded In. When it's not visible you change the src of it. And when it is visible you change the src of bottom image.
I can't think of better solution now. Hope this helps..

jQuery fade image in and out on click or load

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");
});

building a Jquery Tool slider like yahoo.com slider details

Hi im trying to achieve a "news slider" like the one you can see in yahoo.com... I almost have the 100% of the code.. (if you want to compare them here is my code http://jsfiddle.net/PcAwU/1/)
what is missing in my code , (forget about design) is that , In my slider you have to clic on each item, i tried to replace Onclick for Hover on the javascript, it worked, but the fisrt image on the gallery stop working, so when you just open the slider, you see a missing image.
Other point.. also very important, in yahoo.com after "x seconds" the slider goes to the next item, and so on ... all the Thumnails are gruped 4 by for 4, (in mine 5 by 5, thats ok) ... after pass all the 4 items, it go to the next bloc..
HOW CAN I ACHIEVE THAT!!. I really looked into the API, everything, really im lost, i hope someone can help me. cause im really lost in here.
Thanks
Here is the script
$(function() {
var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true });
$(".items img").click(function() {
// see if same thumb is being clicked
if ($(this).hasClass("active")) { return; }
// calclulate large image's URL based on the thumbnail URL (flickr specific)
var url = $(this).attr("src").replace("_t", "");
// get handle to element that wraps the image and make it semi-transparent
var wrap = $("#image_wrap").fadeTo("medium", 0.5);
// the large image from www.flickr.com
var img = new Image();
// call this function after it's loaded
img.onload = function() {
// make wrapper fully visible
wrap.fadeTo("fast", 1);
// change the image
wrap.find("img").attr("src", url);
};
// begin loading the image from www.flickr.com
img.src = url;
// activate item
$(".items img").removeClass("active");
$(this).addClass("active");
// when page loads simulate a "click" on the first image
}).filter(":first").click();
// provide scrollable API for the action buttons
window.api = root.data("scrollable");
});
function toggle(el){
if(el.className!="play")
{
el.className="play";
el.src='images/play.png';
api.pause();
}
else if(el.className=="play")
{
el.className="pause";
el.src='images/pause.png';
api.play();
}
return false;
}

To fix the hover problem you need to make some quick changes: Change the click to a on(..) similar to just hover(..) just the new standard.
$(".items img").on("hover",function() {
....
Then You need to update the bottom click event to mouse over to simulate a hover effect. Trigger is a comman function to use to trigger some event.
}).filter(":first").trigger("mouseover");
jSFiddle: http://jsfiddle.net/PcAwU/2/
Now to have a play feature, you need a counter/ and a set interval like so:
var count = 1;
setInterval(function(){
count++; // add to the counter
if($(".items img").eq(count).length != 0){ // eq(.. select by index [0],[1]..
$(".items img").eq(count).trigger("mouseover");
} else count = 0; //reset counter
},1000);
This will go show new images every 1 second (1000 = 1sec), you can change this and manipulate it to your liking.
jSFiddle: http://jsfiddle.net/PcAwU/3/
If you want to hover the active image, you need to do so with the css() or the addClass() functions. But You have done this already, All we have to do is a simple css change:
.scrollable .active {
....
border-bottom:3px solid skyblue;
Here is the new update jSFilde: http://jsfiddle.net/PcAwU/4/