I have one question about image alt on hover image.
I have to create this fiddle
In this fiddle you can see there are big and smole images. When you hoverover smole image then big image changing.
What i want to do. I want to add a alt from big image. In my demo shows alt with only smole images. Also my code said undefined. What i need to do for showing alt only from big images.
$(document).ready(function() {
var a = $(this).attr('alt');
$("#magazin_sldwr li img").hover(function(){
clearTimeout(autoScrollerTimer);
$(this).parent('li').addClass('active').siblings().removeClass('active');
$('#mainm-img').attr('src',$(this).attr('src').replace('thumb/', '')).parent().attr('href',$(this).parent().attr('href'),$(this).parent().append('<div class="title">' + a + '</div>'));
}, function(){
autoChangeImage();
});
For the undefined problem:
You're setting the variable a to $(this).attr('alt') too early, before $(this) is the thumbnail.
Try setting it in the function you pass to hover(), like so:
$(document).ready(function() {
var a;
$("#magazin_sldwr li img").hover(function(){
a = $(this).attr('alt');
clearTimeout(autoScrollerTimer);
$(this).parent('li').addClass('active').siblings().removeClass('active');
$('#mainm-img').attr('src',$(this).attr('src').replace('thumb/', '')).parent().attr('href',$(this).parent().attr('href'),$(this).parent().append('<div class="title">' + a + '</div>'));
}, function(){
autoChangeImage();
});
For showing the other alt text, you'll have to be more detailed in your question.
Related
I'm working on a responsive slider, it's not that easy. Basically it must works from 320px to 1920px, with a fixed height.
So its giving me a headache, I have an easy fix : instead of using the a > image, I will assign the image url as background image for the a, then set the image opacity to 0. So, I will be able to use the cover+center background properties and my slider will be perfect.
But I have problems doing that because I'm unsure how to do it, I spent time yesterday but couldn't assign the image as background.
Here is what the markup looks like (I removed unecessary blocks, just keeping the most importants)
<div class="slide-image">
<a href="xyz.com">
<img src="image.com/img.jpg">
</a>
</div>
<div class="slide-image">
<a href="zxy.com">
<img src="image.com/img2.jpg">
</a>
</div>
etc ..
I tried that code which doesnt work, the variable gets a value but nothing is assigned :
$(function() {
if ($('.slider').length) {
$('.slider').slick({});
$('.slide-image').each(function() {
var img = $('img', this).attr('src');
$('a', this).css('background-image', 'url(' + img + ')url');
};
}
});
You're trying to read "src" attribute, but you've set "url" in your HTML. Change your JS:
var img = $('img', this).attr('url');
Also you're assigning wrong style. It should be:
$('a', this).css('background-image', 'url(' + img + ')');
Note you have an error in this line:
$('a', this).css('background-image', 'url(' + img + ')url');
------------------------------^
It must be
$('a', this).css('background-image', 'url(' + img + ')');
And <img> tag is bad,
<img url=""> BAD
<img src=""> GOOD
I'm trying to fade out one image, then fade in another image in the same spot.
So far I've got this fiddle, but you can see it changes the image before the .fadeOut() function finishes, when changing image via clicking thumbs. I've read that jQuery doesn't run sequentially as standard (which my code is assuming it does), so I tried adding in the completed function, like so:
$('#image').fadeOut('fast', function() {
$('#image').html('<img src="' + image + '" class="image"/>');
$('#image').fadeIn('fast');
});
However my issue is still present. What should I do to fix this?
I wouldn't destroy and recreate the elements; I'd just update the attributes. I'd also include a .stop(true, true) to cancel any previous animation and jump straight to the end before starting the fadeout, in case someone clicks quickly.
var images = [
'http://i.stack.imgur.com/uClcV.jpg?s=328&g=1',
'https://www.gravatar.com/avatar/d050da3cf82fdf6cfa431358fee9a397?s=128&d=identicon&r=PG&f=1',
'https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=128&d=identicon&r=PG'
];
var current = 0;
updateImage(images[current], images[current]);
function updateImage(image, title) {
var img = $('#image');
img.stop(true, true).fadeOut('fast', function() {
img.find('a').attr('href', image).attr('title', title);
img.find('img').attr('src', image);
img.fadeIn('fast');
});
}
$("#next").click(function() {
current = (current + 1) % images.length;
updateImage(images[current], images[current]);
});
<input type="button" id="next" value="Next">
<div id="image">
<a>
<img style="height: 128px; width: 128px"><!-- Never do that, but for a demo, it's okay -->
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Is expected result that #slider not fade to appearance of empty
background during image transitions ?
Fades to either white, ready for the new image to fade in, or a crossfade - either would be acceptable
Try setting #slider width , height to expected img width, height; setting background-color to #000
css
#slider {
width:500px;
height:505px;
background-color:#000;
}
js
//clicking thumbnails
$(".image").click(function () {
var image = $(this).attr("rel"); //getting the rel tag from the a tag
var title = $(this).attr("data-title"); //data title from a tag
$('#image').fadeOut('fast', function() { //fades out last image
$('#image').html('<a href="' + image + '" data-lightbox="image-1" data-title="' + title + '">'
+ '<img src="' + image + '" class="image"/></a>')
.fadeIn('fast');
})
jsfiddle http://jsfiddle.net/bmu43fm7/13/
I don't know how much people have used this plugin, demo but what I want is to change the default behavior of the plugin to something like animated. Currently, when you click on next or previous button, the images will be just appended without any visual animation. I just want to animate the images while appending! Can anybody suggest any good solution!! Below is the code where appending on the image takes place:
if (href.match(/\.(jpeg|jpg|gif|png)$/i) !== null) {
var img = $('<img>', { src: href });
img.one('load', function () {
var wrap = $('<div class="nivo-lightbox-image" />');
wrap.append(img); //gets appended here
content.html(wrap).removeClass('nivo-lightbox-loading');
// Vertically center images
wrap.css({
'line-height': $('.nivo-lightbox-content').height() + 'px',
'height': $('.nivo-lightbox-content').height() + 'px' // For Firefox
});
}).each(function () {
if (this.complete) $(this).load();
});
}
OK with any sort of animation
Well I just added a fadeIn after appending which seems to do some sort of animation although which is what I was accepting. Here is what I did:
wrap.append(img).fadeIn('4000');
I have a simple 16x16 grid of thumbnail images and when one is clicked, I want to display the full sized one with the background dimmed and the image in a div appearing to float above the dimmed background.
I don't want to prepopulate a list of the full-sized
$('#photo-grid').on('click', 'a', function(event) {
$.getJSON($(this).attr('href'), function(data) { // Gets the URL of full-sized image
$('.page-cover').css('opacity', 0.6).fadeIn(300); // Makes background appear to fade
$('#lightbox-img').attr('src', data.url); // Sets image src in hidden DIV
$('#lightbox-img').one('load', function() {
var lbi;
lbi = $('#lightbox-img');
console.log("lbi: " + (lbi.width()) + " x " + (lbi.height())); // always 0
console.log("lbi: " + (lbi.width()) + " x " + (lbi.height())); // always 0
$('.image-display').css('width', parseInt(lbi.css('width')).toString() + "4px")
.css('padding-left', '2px');
$('.image-display').css('height', parseInt(lbi.css('height')).toString() + "4px")
.css('padding-top', '2px');
return $('.image-display').css('opacity', 1.0).fadeIn(300);
});
return $('#lightbox-img').each(function() {
console.log("triggering for cached image " + this.complete);
if (this.complete) {
return $(this).load();
}
});
});
return false;
});
So here is where I'm failing to understand things. At the point where I do lbi = $('#lightbox-img'); I know that the image has loaded either from the server or the local cache. However, neither the query width() and height() functions, nor the CSS ever show any width or height for the image. I've stepped through this in the Chrome and Safari debuggers and can't see that these attributes are actually set when the image is loaded.
I know there are tons of modal lightbox plugins but this is such a simple piece of code it seems like overkill to use one. I have exactly one image to display per click and I can do all the layout stuff in a few lines of code.
What am I missing here?
You're doing some thing where I'm not quite sure why. For example, .css('width', parseInt(lbi.css('width')).toString() + "4px") basically multiplies the width by ten then adds 4.
However, when I throw your code in a fiddle, http://jsfiddle.net/X9GWp/ , I don't get the issue you report, so I can't say much about why it doesn't work for you. I've had to make some guesses about the css, html and data, so that might be why it's different. If you provide your own fiddle I could have a look.
Anyway, here is a very basic lightbox loosely based on your codesnippet, but without getting the image-url from a JSON request.
javascript:
/* when lightbox is clicked, fade out */
$('.page-cover').on('click', function(){
$(this).fadeOut(400);
$('#lightbox-img').hide();
});
/* when image is loaded, fade in */
$('#lightbox-img').load(function(){
$(this)
.css('top', ($(window).height()-$(this).height())/2)
.fadeIn(300);
});
/* when thumbnail is clicked, load href as image source and fadein lightbox-background*/
$('#photo-grid').on('click', 'a', function(event) {
event.preventDefault();
$('#lightbox-img').attr('src', $(this).attr('href'));
$('.page-cover').fadeIn(300);
});
css:
.page-cover {
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background:rgba(0,0,0,0.6);
display:none;
}
#lightbox-img
{
position:relative;
display:block;
margin:auto;
}
html:
<div id="photo-grid">
<img src="http://lorempixel.com/40/40/nature/1" />
</div>
<div class="page-cover"><img id="lightbox-img" /></div>
http://jsfiddle.net/xLQpZ/
Fairly new to JavaScript and very new to jQuery. Can someone have a look at the following code and see where I am going wrong.
This is the main part of the jQuery code:
$(document).on("hover", ".crrightcontainer img", function() { /* trigger event on hover on an img in class crrightcontainer */
var src = $(this).attr('src'); // get full path and filename from thumbnail
var index = src.lastIndexOf('/') + 1; // get index to last occurrenace of file path delimiter "/"
var fullsizeimgname = src.substr(index); // get actual filename only i.e. "cs1.jpg"
fullsizeimgname = "/painted/fp-images/" + fullsizeimgname; // add path to give full path to the full sized image.
$('.crleftcontainer img').animate({opacity: 0.0},1000); // fade out old full size image
$('.crleftcontainer img').attr("src",fullsizeimgname).animate({opacity: 1.0},1000); // set full size image in browser and fade in
});
http://jsfiddle.net/deanflyer/CfxyJ/1
It works, it just seems to fire off multiple mouse events. Just move the mouse a few times over the thumbnail images and youll see what I mean, giving multiple fades.
I've tried using .stop() on the main image with animate() but this just stops everything.
Many Thanks.
Is something like this your requirement try this: http://jsfiddle.net/CfxyJ/13/
$('.crrightcontainer img').css('opacity', 0.7);
$('.crrightcontainer img').mouseenter(function () {
$(this).stop().animate({opacity: 1.0}, 600);
var src = $(this).attr('src');
var index = src.lastIndexOf('/') + 1;
var fullsizeimgname = src.substr(index);
fullsizeimgname = "http://thepaintedtree.co.uk/fp-images/" + fullsizeimgname;
$('.crleftcontainer img').fadeOut('slow', function(){
$('.crleftcontainer img').attr("src", fullsizeimgname).fadeIn('slow');
});
});
$('.crrightcontainer img').mouseleave(function () { //fadeout
$(this).stop().animate({
opacity: 0.7
}, 600);
});
Try using mouseenter event. See updated fiddle http://jsfiddle.net/CfxyJ/25/. Is it what you are looking for?