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/
Related
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');
So on click of these polaroid like images, I replace them with <div class="poof"></div> using jQuery's .replaceWith(). The reason I do this is to display a poof animated gif animation that I style to that class with js.
However, on click of the .polaroid, the polaroid images, the .poof div replaces that html every time, but its background never shows.
Try it for yourself, here:
Click an image, it is replaced by the .poof div, but the poof animation doesn't show.
I would greatly appreciate it someone could help me figure out why this is and how to get the animation to show each time.
Here is my javascript:
$(function(){
var time=1;
$('.polaroid').click(function(){
$(this).replaceWith('<div class="poof"></div>');
$('.poof').css('height', $(this).height()).css('width', $(this).width()).css('background', 'transparent url(poof.gif?t='+time+') center no-repeat');
time++;
});
});
Here is .poof's CSS:
.poof{
height:32px;
width:32px;
}
You are getting the height and width of an object that was remove / replaced in the DOM
Change to this:
var heights = 32;
var widths = 32;
$('.polaroid').click(function(){
heights = $(this).height();
widths = $(this).width();
$('.poof').css('height', heights).css('width', widths).css('background', 'transparent url(http://i.imgur.com/FsVe2LC.gif?t='+time+') center no-repeat');
time++;
setTimeout(function(){
$('.poof').remove();
}, 1500);
});
I'm pretty much a newbie on the HTML/CSS realm and have been facing a jquery challenge ever since I started building my first website. I want to create an jquery-powered image gallery, using thumbnails. The tutorial I followed for that matter was Ivan Lazarevic's (http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/). I also made use of Stackoverflow's forum through this thread: http://goo.gl/ILzsx.
The code he provides replaces the large image on display with the larger version of the thumbnail that's been clicked. This seems to work pretty smoothly but just for pictures that have the same orientation. The following code appears on two different files, thus establishing a difference between the horizontal and vertical images:
<div id="mainImage">
<img id="largeImage" src="Images/Projects/UOW/UOWII_large.jpg"/>
</div>
AND:
<div id="mainImageVERTICAL">
<img id="largeImageVERTICAL" src="Images/Projects/UOW/UOWI_large.jpg" />
</div>
I have created different CSS rules for both the largeImage and largeImageVERTICAL parameters, depending on whether the image has a portrait or landscape orientation.
#largeImage {
position: fixed;
height: 83%;
width:auto;
top: 15%;
left: 5%;
}
AND:
#largeImageVERTICAL {
position: fixed;
height: 83%;
width:auto;
top: 15%;
left: 36.36%;
}
These two rules just place the images at different points of the screen. However, what I would like to know is how to modify my code so that I can create a page with both portrait and landscape-oriented images applying the CSS rule that belongs to each. Up to now, what I have is what I got from Lazarevic's approach, which is:
$('#thumbs img').click(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
This code just replaces the thumbnails with the bigger pictures. As stated, I want to be able to apply the right rule to the right image and I'm assuming this has to be be made through some JS coding, which I know pretty much nothing about.
I would appreciate some help so that I can keep on with this project. Any ideas how to make this work? Maybe a JS function that tells the machine to use one or another CSS rule depending on which image is clicked upon? I'm really stuck here...
Thanks in advance!
There are a couple of ways you could do this.
Use a HTML5 data-* attribute to specify which of the <img> elements should be updated. So:
<div id="thumbs">
<img src="img.jpg" data-large="largeImage"/>
<img src="anotherimg.jpg" data-large="largeImageVERTICAL"/>
</div>
Then:
$('#thumbs img').click(function(e) {
var imageId = $(this).attr('data-large'),
newSrc = this.src.replace('thumb', 'large');
$('#' + imageId).attr('src', newSrc);
});
Or, use the dimensions of the thumbnail to determine whether it's portrait or landscape:
$('#thumbs img').click(function(e) {
var $this = $(this),
height = $this.height(),
width = $this.width(),
newSrc = this.src.replace('thumb', 'large');
var imageId = (height > width) ? 'largeImageVERTICAL' : 'largeImage';
$('#' + imageId).attr('src', newSrc);
});
In either case, you'll probably need to hide the other, unused <img> element so that you don't have the previously selected image for the other orientation displayed.
One way to achieve this would be:
var alternateImageId = (imageId === 'largeImage') ? 'largeImageVERTICAL' : 'largeImage';
$('#' + alternateImageId).hide();
Add the above two lines to the click event handler above, and call .show() after calling .attr('src', ...).
Use class not id.
#largeImage{
top: 15%;
width:auto;
height: 83%;
position: fixed;
}
.portrait{
left: 36.36%;
}
.landscape{
left: 5%;
}
js
$('#largeImage').on('load', function () {
var that = $(this);
if (that.width() < that.height()) {
that.addClass('portrait');
} else {
that.addClass('landscape');
}
});
$('#thumbs').on('click', 'img', function () {
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
I'm attempting to make a menu bar that sticks to the bottom of the screen. Due to it's position on the screen I can't use anchor tags for hyperlinking because in Google Chrome it causes that small link bar to appear in the bottom corner (which overlays ontop of the menu).
As such, each menu icon is a DIV with a unique ID (eg. "profile") and the class "menu-item" is applied to it. Each of these icons will link to a specific page when clicked on (eg. why I want to use the onClick javascript event). However, when each of these icons is hovered over it pops a contextual tooltip (or submenu) above it. Inside this tooltip a further options or links. Consequently, I have come up with the following html construct:
example image located here: http://i.stack.imgur.com/hZU2g.png
Each menu icon will have its own unique onClick link, as well as its own unique submenu/tooltip (which may have more links to different pages).
I am using the following jQuery to pop each submenu:
$(".menu-item").hover(function() {
$('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
$('#' + this.id + '-tip').hide();
}
);
The issue I'm having is keeping the tooltip visible when the cursor is moved off the icon and onto the submenu/tooltip (currently it disappears the second the icon is no longer hovered on). I want to jQuery fadein and fadeout effects to be applied to the appearance of the tooltip/submenu.
Comments, suggestions, code and jsfiddle examples would be greatly appreciated. Happy to clarify further if I was unclear on any aspects.
Thanks in advance.
You need to wrap the menu-item and tip links in a parent div like so:
<div class="item-wrapper" rel="profile">
<div id="profile" class="menu-item"></div>
<div id="profile-tip" class="tip">
Link1
Link2
</div>
</div>
Then apply the hover function to .item-wrapper and reference the rel attribute (or any other attribute of your choosing):
$(".item-wrapper").hover(function() {
$('#' + $(this).attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
$('#' + $(this).attr("rel") + '-tip').hide();
});
This way when you hover over the links you will still be hovering over the .item-wrapper div.
UPDATE:
To answer your follow-up question, you will need to use setTimeout():
var item_wrapper = {
onHover: function($obj, delay) {
setTimeout(function() {
$('#' + $obj.attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
}, delay);
},
offHover: function($obj, delay) {
setTimeout(function() {
$('#' + $obj.attr("rel") + '-tip').hide();
}, delay);
},
initHover: function($obj, delay) {
$obj.hover(function() {
item_wrapper.onHover($(this), delay);
}, function() {
item_wrapper.offHover($(this), delay);
});
}
};
item_wrapper.initHover($(".item-wrapper"), 1000);
The second argument to setTimeout() is the delay in milliseconds.