Create multiple tiles that fade into different images using javascript - javascript

I am working on a web project and I want to make a 3x2 row of tiles that when you mouse over them the tile will fade out and fade in with a new one containing the image.
I have multiple tiles that are images using the DIV class .previewBox. When you mouse over these images I use JQuery to fade out the image and fade back in with a new one (using a JQuery plugin called waitForImages which is specifically tailored for loading images in JavaScript) The problem is I want each tile to fade with a different set of images. I thought of putting all of the first set of images (The preview images) in an array and the second set of images (The flip images) in a different array and when you mouse over and it would want to set the flip image it would call flipArray.indexOf(this) but since the JavaScript is detecting the div I am not sure if that will work because "this" isn't referring to the image in the array.
I am still really learning javascript and I am not really sure how to detect which image you are hovering over and take its index number to switch it out with another picture.
I have the script for fading images but right now I have the image location hard coded.
$(document).ready(function() {
//Document is ready to load
var hov = false;
//Since there is more then one tile using the .previewBox I use the .each command
$('.previewBox').each(function() {
var previewBox = $(this); // Won't create as many objects this way.
previewBox.mouseenter(function() // On mouse enter
{
if (hov === false) //Keeps animation from repeating
{
hov = true; // Sets boolean for mouse leave
previewBox.fadeOut(function() //Fades out
{
previewBox.waitForImages(function() //Loads images
{
previewBox.stop().fadeIn(); //Fades in
});
previewBox.attr("src", "Images/Portfolio/Art_Bike_Flip.png"); //New image location.
});
};
});
});
$('.previewBox').each(function() {
var previewBox = $(this);
previewBox.mouseleave(function() {
if (hov === true) {
hov = false;
previewBox.fadeOut(function() {
previewBox.waitForImages(function() {
previewBox.stop().fadeIn();
});
previewBox.attr("src", "Images/Portfolio/Art_Bike_Preview.png");
});
};
});
});
});

Related

How to check if image url has been loaded with jQuery?

I have this code here where I have a slider with thumbnails and the sliders large image takes it's next attr('src') from the click on a thumb, but I'd like to change that src only when the image has loaded. This is the source that I've come up with so far:
$('.thumb').click(function(){
topImageSrc = $(this).data("bigimage");
$(topImageSrc).load(function(){
coverMain.attr('src',topImageSrc);
main.fadeOut("slow");
})
});
Sadly this doesn't work as the topImageSrc is just a path variable to the large image, like so: /uploads/largeimages/pic1.jpg
How could I force it to load and then check if it's done, after that - apply the new image?
You can do it like this:
$('.thumb').click(function () {
topImageSrc = $(this).data("bigimage");
var topImage = $('<img>').attr('src', topImageSrc);
$(topImage).load(function () {
coverMain.attr('src', topImageSrc);
main.fadeOut("slow");
});
});
This creates an image (without appending it anywhere), sets its source to the topImageSrc URL and checks for the load event.

jQuery Guillotine - Swap Image

I am using jquery guillotine to crop image and save to the server but unfortunately when i want to do things dynamically it doesn't work as it should be . I have created thumbnails on the same picture and when you click on a thumbnail it should let you edit that picture and crop etc. I have 3 scripts on the page , 1 ) guillotine , 2) scripts that when you click on thumbnails swaps the small image with the big one , 3) and when you click on crop button gets the values and does the job in php.
after i swap the image , i call/run the guillotine but it seems like it is caching the first images dimensions. i have created a fiddle.
i dont know how to put link to jsfiddle here but it is jsfiddle / 0 unub 77 f
I'm a bit late but as said above it might help others with the same problem.
Guillotine gets the absolute image dimensions when initialized (that's why the image needs to be already loaded or cached) and after that everything is made relative to keep it responsive. If the images don't have the same dimensions you'll get broken aspect ratios and other unexpected behaviors.
So, if you have Guillotine working on an image and you want to swap that image, you should remove the existing instance of the plugin and create a new one over the new image so it can properly render such new image.
var pictures = $('.picture'),
gif = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==' // 1x1 gif
// Guillotine loader
pictures.on('load', function() {
var img = $(this)
// Remove any existing instance
if (img.guillotine('instance')) img.guillotine('remove')
// Create new instance
img.guillotine({width: 400, height: 300})
// Bind buttons, only the first time!
if (! img.data('bindedBtns')) {
img.data('bindedBtns', true)
$('#rotate_left').click(function(){ img.guillotine('rotateLeft') })
$('#rotate_right').click(function(){ img.guillotine('rotateRight') })
// ...
}
})
// Swap images as needed.
// Each time you change a 'src' attribute the function above should run.
picture.on('click', function() { /* Swap thumbnail */ })
// Make sure that the 'onload' event is triggered at least once on each picture.
pictures.each(function() {
// Save the original src, replace it with the 1x1 gif and reload the original src.
if (this.complete !== false) { var src = this.src; this.src = gif; this.src = src }
}
The 'onload' handler serves two purposes, it loads guillotine the first time for each picture and reloads it everytime a picture is swapped.
Two important points to consider:
Actions (rotate, zoom, etc.) should be binded only once to avoid problems like #5.
You have to make sure that the script runs before each image finishes loading, or otherwise you won't have the plugin before swapping images (the last part of the script handles this).
Hope it helps.
ok i figured out , when i set the img src in the second script i had to destroy everything and than call the script again.
right here is my solution to my question
you load the first image as in the demo page , and than put your javascript that does the swap image, basically change the source of the image, destroy it and than call the function again
var swap_img = $(this).find('img').attr('src'); //get the src of the image of the thumbnail
$("#sample_picture").attr('src',swap_img); //set it , swap it
picture.guillotine('remove'); //remove the current instance
guillotine_function(); //and call it again.
and everything should work as it should be
this code work without deleting the guillotine instance, img being the image element :
guillotine._unwrap();
guillotine.zoomInFactor = 1 + guillotine.op.zoomStep;
guillotine.zoomOutFactor = 1 / guillotine.zoomInFactor;
guillotine.glltRatio = guillotine.op.height / guillotine.op.width;
guillotine.width = guillotine.height = guillotine.left = guillotine.top = guillotine.angle = 0;
guillotine.data = {
scale: 1,
angle: 0,
x: 0,
y: 0,
w: guillotine.op.width,
h: guillotine.op.height
};
guillotine._wrap(img);
guillotine.fit();

setImage does not show the new image in JavaScript with Spotify Apps API

I am trying to set a different image with the setImage method.
The issue is that the new image becomes visible just for a very short period of time, but then fades away in to the original image.
Besides that, the play button disappears.
Here is my code:
require(['$api/models', '$views/image#Image'], function(models, Image) {
// Play a single track
var track = models.Track.fromURI('spotify:track:7B1Dl3tXqySkB8OPEwVvSu');
var image = Image.forTrack(track, {player: true});
// A line added by me to set the new image
image.setImage("/img/spotify-logo.png");
// Pass the player HTML code to the #single-track-player div
document.getElementById('single-track-player')
.appendChild(image.node);
});
This code is mostly taken from the Spotify Apps Tutorial.
The only line I have added is that with the setImage method.
What am I doing wrong?
There might be a race condition when setting the custom image using Image.setImage.
A solution is to use the Image.fromSource method:
require(['$api/models', '$views/image#Image'], function(models, Image) {
// Play a single track
var track = models.Track.fromURI('spotify:track:7B1Dl3tXqySkB8OPEwVvSu');
var image = Image.fromSource("/img/spotify-logo.png", {
playerItem: track,
player: true
});
// Pass the player HTML code to the #single-track-player div
document.getElementById('single-track-player')
.appendChild(image.node);
});

Use thumbnail gallery to toggle multiple images

I currently have a thumbnail gallery using onclick/jQuery/JavaScript, although it all works fine I think it will be confusing for the user to have to click a thumbnail to turn it on and then click it again to turn it off, before moving on to the next.
I currently have 8 thumbnails/larger images and I have typed this code out 8 times with different ids:
function toggle_visibility(chLoTog) {
var e = document.getElementById(chLoTog);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
I'm new to jQuery and I bet there is a way of not having to type this code out 8 times. What I really want the code to is:
Click a thumbnail and relevant image appears
Click on another thumbnail which hides current thumbnail and shows new thumbnail
To be able to this in a random order.
I hope all this makes sense.
You can achieve very simply with jquery using a class and a data attribute on the thumbnail ie.
// HTML
// Add a class and a data attribute to the gallery thumbnal image
<img class="gallery-thumbnail" src="path/to/gallery-thumbnail.jpg" data-img="path/to/gallery-image.jpg" />
// jquery
// Bind a click function to each thumbnail image
$('.gallery-thumbnail').click(function(){
// Hide all the currently showing gallery images
$('.gallery-image').hide();
// Get the id of the requested gallery image
var id = '#' + $(this).attr('data-imge');
// Show the requested gallery image
$(id).show();
}):
You could even bind a click function to each of the gallery images so that a user can hide them by clicking on the image itself ie.
// Hide gallery image when clicked
$('.gallery-image').click(function(){
$(this).hide();
});

Javascript image gallery

I am looking for a javascript function that works based around an array of dynamically generated images. At the moment I have a preview window.
When this is clicked I would like it to hide the preview window and load the first image in the array. I would the like to be able to navigate through the remaining images in the array.
If someone could point me in the right direction or if you know how to put this together it would be much appreciated. Thanks.
You could dynamicly create an image element and keep on using that, something like this? (this is using jQuery).
<button id='nextImage'>Load nect image</button>
<div id='imageContainer'><div id='previewWindow'>Preview</div></div>
//Javascript frome here (JQuery)
var images = Array();
images.push('url/to/image.jpg');
window.lastImage=-1;
$('#previewWindow').click( function() { ('#nextImage').click(); });
$('#nextImage').click( function() {
window.lastImage += 1;
if(typeof(images[window.lastImage]) == 'undefined') { return; } //if endof array
$('#previewWindow').remove(); //better is to only do this once
$('#image').remove(); //Only creating an image once is even better
$('<img />')
.attr('id', 'image')
.attr('src', images[window.lastImage])
.appendTo('#imageContainer');
});
EDIT
Just read you would like to able to click the preview window, added that.

Categories

Resources