Image caption coming in before image has fully faded in - javascript

I have a gallery where I use the 'alt' as it's caption and I got it to perform correctly when calling the image, displaying image with the caption z-index'd above it but for some reason the caption is coming in too early (i noticed this because if i keep clicking the same image, everything fades in except the actual caption text).
I have all the css already provided and have created a div with append, actually it's probably easiest to just show the code
Here is the code:
function gallery(){
$('#gallery a').click(function(evt){
evt.preventDefault();
oldImage = $('#thumbs').next();
var imgPath = $(this).attr('href');
var newImage = $('<img class="galleryBig" src="' + imgPath + '">');
//get nextCaption information for each click(only applies to anchors)
var nextCaption = $(this).find('img').attr('alt');
newImage.hide();
$('#thumbs').after(newImage);
//displays caption for each image and replaces old caption (if applicable)
$('div.caption').replaceWith('<div class="caption">' + nextCaption + '</div>');
newImage.fadeIn();
oldImage.remove();
}); //end anonymous fcn
} //end gallery
I am completely stumped on how to get the caption to work with the image as if they were both one item (fade in fade out with eachother)

There's an easy workaround for this:
You could just use the following method which will allow you to fadeIn() the image and once the fadeIn has finished, then load the caption.
Here is the code:
$('.imageToFadeIn').fadeIn(800, function(){
//load here the caption
})
what the above code will do is that once the fadeIn() function is finished, it will perform the next function where you can load your caption.
Read the documentation for a better understanding of what the function after the duration does.
http://api.jquery.com/fadeIn/
If you want both to load at the same time, then get both elements, the picture and the caption into a div and then fadeIn() the div instead like this:
html:
<div class="pictureAndCaption">
<img src="source">
<span>Caption text</span>
</div>
jQuery:
$('.pictureAndCaption').fadeIn(800);

Related

jQuery Fade In a New Image from a New URL on Hover without Getting White "Blink"

I am working within Squarespace so some of my options are limited (I can't add a separate image div and use that as a replacement, or if I can I'm not sure how). I am trying to slowly fade in a new image on hover but WITHOUT a full Fade Out -> Fade in Effect that results in a white "blink" in between.
Other solutions on StackOverflow all seemed to contain the full Fade Out/Fade In and did not work.
HTML:
<div id='#block-2091ad01016e0c16fbf5'>
<img class="thumb-image"
src="https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5e0a26c2afc7590ba0a3b443/1603914016365/Jason-5941.jpg">
</div>
JS:
<script>
(function($) {
$(document).ready(function() {
$('#block-76b0ced63f31cd9e2342').mouseover(function() {
$( "#block-76b0ced63f31cd9e2342 .thumb-image" ).attr("src","https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5fc2881b9ee0f32b87a52a14/1606584347864/Jason_Art.jpg");
});
$('#block-76b0ced63f31cd9e2342').mouseout(function() {
$( "#block-76b0ced63f31cd9e2342 .thumb-image" ).attr("src","https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5e0a26c2afc7590ba0a3b443/1603914016365/Jason-5941.jpg");
})
})
})(jQuery);
</script>
I think you're much better off creating a second from JS and get this crossfade effect from css. See fiddle for example:
https://jsfiddle.net/x0ye6r5L/
$(function() {
var jsonArt = '<img id="bottom-art-jason" src="https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5fc2881b9ee0f32b87a52a14/1606584347864/Jason_Art.jpg" class="thumb-image" />';
$('#myDiv').prepend(jsonArt);
});

Overlay overrules images - Can't automate src

I have an image that uses jquery for when an image is clicked, this will return the image src for that image. I modified my HTML/CSS to give this image an overlay.
However, I have now added an overlay that comes from left to right when the image is hovered. This added complications, as now when the jquery tries to find the image src, it can't because the overlay is covering it.
This has meant I have to manually write the code for each image src, but this does not work because obviously when you click each image, each one will have a different img src.
To provide example:
$(".dogs img").click(function(){
var src = $(this).attr("src");
});
Now that I have an overlay, unless I'm really fast and beat the overlay covering my screen, I can't click the image, but only the overlay covering it.
<div class = "cover-overlay">
<img src = "dog-1.png">
</div>
<div class = "cover-overlay">
<img src = "dog-2.png">
</div>
<div class = "cover-overlay">
<img src = "dog-3.png">
</div>
So now I have to do,
$(".dogs .cover-overlay").click(function(){
var src = $(".dogs img").attr("src");
}
however this will obviously always return the source of the first image in dog class, because of how the click function now works with overlay. Any suggestions?
You can still use this to reference the clicked .cover-overlay element, but now you need to also use find() to get the child img from it:
$(".dogs .cover-overlay").click(function(){
var src = $(this).find('img').prop("src");
});

Make scrollTo make div scroll all the way?

I have a div with only horizontal overflow. With a link outside the div, I'm trying to scroll the div to a certain image (think of a horizontal gallery scrolling to the right).
I used the following javascript. It works fine in the webpage.
However, the DIV containing the gallery is larger than most images. Consequently the browser window will scroll only until the requested div comes in from the right and is now fully on screen, and not one pixel more. However, I would like the div to scroll all the way, so that the image is all the way hugging the left edge of the container.
I hope I'm making sense, I'm not terribly experienced, but I couldn't find an answer to my question online.
$(document).ready(function(){
$('#gimg1').click(function() {
$.scrollTo($('#gimg1link'), 1000);
});
$('#gimg2').click(function() {
$.scrollTo($('#gimg2link'), 1000);
});
$('#gimg3').click(function() {
$.scrollTo($('#gimg3link'), 1000);
});
$('#gimg4').click(function() {
$.scrollTo($('#gimg4link'), 1000);
});
});
<div id="gallery">
<img class="galleryimage" id="gimg1" src="lb1.jpg">
<img class="galleryimage" id="gimg2" src="lb2.jpg">
<img class="galleryimage" id="gimg3" src="lb3.jpg">
<img class="galleryimage" id="gimg4" src="lb4.jpg">
</div>
Image 1
Image 2
Image 3
Image 4
You are using the image and link selectors in your jquery in the wrong order.
$('#gimg1').click(function() {
$.scrollTo($('#gimg1link'), 1000);
});
This snippet means "when the image #gimg1 is clicked, scroll to the position of the link #gimg1link". You want it the other way round: when the link is clicked, scroll to the image.
Reversing those selectors gives you a working slider: jsFiddle
The last image will always stay on the right of the screen, because that's where the document ends and it can't scroll any further. The other images will scroll all the way to the left as long as your document width allows it.
Also, you could optimize your javascript a lot by not copy-pasting the same code but just making it more generic:
$(document).ready(function(){
$('a[id^=gimg]').click(function() { // when a link with an ID starting with "gimg" is clicked
var linkID = $(this).attr('id'); // get the whole id from this link
var imgID = linkID.replace('link', ''); // get the img ID it relates to by removing the 'link' part
$scrollTo( $('#' + imgID), 1000); // scroll to the image this link belongs to
});
});
Now it doesn't matter how many links and images you add, as long as they all use the same naming convention.
Based on this answer i adapted the code to suit your need. It uses the clicked thumbnail index to find the corresponding image left, and set scrollLeft of the viewport to this value.
$('#nav li').click(function(){
var clickedIndex = $(this).index();
var targetElement = $('#viewport ul li').eq(clickedIndex);
var elementPosition = targetElement.position();
$('#viewport').animate({scrollLeft: elementPosition.left},500);
});
Working fiddle: http://jsfiddle.net/Lqvqtwtb/

Start gif animation not until it's completely loaded

I have a large gif animation on a web page and want to start it not until it's completely finished loading. How would that be possible using JavaScript / jQuery?
Use a placeholder image, and replace it with the animated GIF once that GIF is fully loaded:
<img id="anim" src="placeholder.gif">
JS:
var myanim = new Image();
myanim.src = '/img/actions.png';
myanim.onload = function() {
document.getElementById('anim').src = myanim.src;
}​
http://jsfiddle.net/mblase75/6XTg7/
You can hide GIFs with CSS (or JS replacing them with a placeholder) and when GIFs are loaded you can fire show()
$('img[src$=".gif"]').load(function(){$(this).show())
You could hide it until it is fully loaded.
<!--- this uses jquery !-->
<script type="text/javascript">
var image_url = "http://media.tumblr.com/tumblr_m4doax3R071r9c1z7.gif";
var image = $('<img />').load(function(){
$(this).show();
}).attr('src', image_url).hide();
$('body').append(image);
</script>
The issue here is that once the image has been downloaded (i.e it is in the browsers cache), there really doesn't seem to be any way of starting it from a particular frame.
You have no control over gif animation through javascript, so you have to implement some sort of a hack. You have to make it hidden in the beginning. Instead of the actual picture you can put a div with the dimensions of the actual picture and with text like "wait".
When the image is downloaded in the browser you can substitute div with an image. And at that point of time animation will start

mouseover.js load grayscale image

I have a problem with a mouseover script. Everything works as it should but I have a small issue that I don't know how to solve. More precisely, the mouseover script creates a grayscale image hover effect. When the page loads the colored images are showing for a short time (1 second or less) and then the javascript is applied and they are all grayed out which is exactly how things should work.
How can I make it so that the colored images will not appear before the javascript is applied? Basically, I want the grayscale images to appear when the page loads not after. Is it possible?
You can see the script here and the webpage in question here.
I would remove the images from the HTML and load them dynamically.
I would use <a class="placeholder" href=""></a> as placeholders for the <img src="" /> and would style the links to either be hidden or go well with the design.
$('a.placeholder').each(function() {
var src = $(this).attr('href');
var image = new Image(); // this is not yet visible in the DOM.
image.onload = grayscale; // change the grayscale function to accept
// event parameters
image.src = src; // this triggers the onload event which
// grayscales the image
var dom_image = $('<img />').attr('src', src);
$(this).replaceWith(dom_image);
});
Of course you have to be doing the above on document ready not on window load.

Categories