Would like to bring a single image to the front or on top of the page, when selected.
After searching, it seems there are many plug-ins that support this - but also have a lot of other functionality and overhead I don't need (gallery, support for video, thumbnails, etc.)
Is it possible to just bring a single image on top with basic JavaScript, CSS, HTML and jQuery, specifically in FireFox?
Thank You.
(Please note*: This is an in house product, hence these requirements and constraints.)
Is it possible to just bring a single image ontop with basic JavaScript, CSS, HTML and jQuery, specifically in FireFox?
Yes, it's possible, but the plugins are most of the time an easier implementation. What you are trying to accomplish is something similar to the light box effect, but I'll try to give a simple solution based on 4 steps you need to accomplish what you are trying to do:
Create an overlay div. This one div will blur or darken your entire page. In the below example it will darken your screen (because it's simpler).
Create an div that will be appended to the overlay div and will contain the image you want to show. In the demo below, this div will be lighter than the overlay one and will actually have half the width and half the height of your screen.
Append a bigger image to your image-div.
Add a subtitle to your image based on it's alt text.
$(document).ready(function()
{
var docWidth = $(document).width();
var docHeight = $(document).height();
//First Step" Creating the overlay-div and adding opacity to it
var overlayDiv = "<div id="overlay-div"></div>"
$("body").append(overlayDiv);
$("#overlay-div").css("position","absolute", "top","0","left","0","background-color","#000","opacity","0.5", "width", docWidth + "px", "height",docHeight + "px");
//Second step: Creating the image-div and centering it on the screen
$("#overlay-div").append("<div id=\"image-div\"></div>");
$("#image-div").css("position","absolute", "top",docHeight/4 + "px","left",docWidth/4 + "px","background-color","#FFF", "width", docWidth/2, "height",docHeight);
//Third step: Creating an image to display inside the image-div and centering it
$("#image-div").append("<img src=\"path/to/your/image\"id=\"zoomed-img\" alt=\"This is a zoomed image\"/>");
var imgWidth = $("#image-div").width();
var imgHeight = $("#image-height").height();
$("#image-div").css("position","absolute", "top","10px","left","10px");
//Fourth step: Creating a subtitle from the alt text
var subtitle = "<p id=\"text-subtitle\">" + $("#image-div").attr("alt") + "</p>";
$("#image-div").append(subtitle);
$("#text-subtitle").css("position","absolute", "top",imgHeight + 20 + "px","left","10px");
});
This function is triggered when your document is ready, and get an arbitrary image. But it's possible to display a different image (with a different subtitle) triggered by a click with a little tweak of the code above.
I had the intention to show you a simple demo that it's feasible to with with a few lines of jQuery/javascript code to create what you want. Of course it's not as pretty as 90% of the effects of the plugins there are around but it may be a start.
I hope it helped. Cheers
Here is a very basic example I whipped up. Hopefully good to learn from:
http://jsfiddle.net/v9LTP/2/
$('img').click(function(){ //bind a click event handler to images
var img = $(this).clone().addClass('modal').appendTo($('#blackout')); //clone the clicked image element and add to the blackout div which gives the dark background.
$('#blackout > #close').click(function(){ //attach click handler to close button
$('#blackout').fadeOut(function(){ //fade the blackout div
img.remove(); //remove the image element we cloned, so we can do it again.
});
});
$('#blackout').fadeIn(); //show the blackout div
});
For a stupid simple lightbox I've been leveraging http://buckwilson.me/lightboxme/ lately.
Try Modals of Bootstrap.
JavaScript - Twitter Bootstrap
GitHub source code
GitHub bootstrap-modal.js
Related
What would be the best way in Javascript/JQuery to determine the size in pixels a div would actually take to display it?
Let say I have a table with and the columns are fixed with the tag width="60px". Inside this column I add dynamically a div with a certain content, which will mostly be the following :
<div class="auto">
<img width="50px" src="/images/header-5123724.png">
<hr>
<span>Table1</span></div>
So, I know the size of the image which is 50px, but I do not know how long the text will be.
Another hint I have is that the element <span> will always be there, and the content should not be wrapped.
Is there a way to "render" the span and to get the size in pixels?
Any help is appreciated.
I found a way to accomplish what I wanted. I will post it here, maybe that can help somebody.
// add an extra span
$(this).parent().append('<span id="test" />');
//.. pick up the element to test into obj
// test the size
$('#test').html(obj.text()).css({
'font-family': obj.css('font-family'),
'font-size': obj.css('font-size'),
'font-weight': obj.css('font-weight')
});
//Width and adjustment
Width = $('#test').width() + 24;
//...If we want to check the max width, then we can loop through many columns of the table
//Finally adjust the width
obj.width(Width).css('min-width', Width);
//Cleanup
$('#test').remove();";
It is not very clean, but that worked for my case. For some reason the size of the columns were not set properly because it was resized by some plugin after the content was rendered by the browser.
Cheers.
Will the width be calculated on page load or on the fly?
If it is on page load then, #cont is the id of the content box.
$(document).ready(function() {
var dynWidth = $('#cont').width();
console.log('dynWidth: ' + dynWidth);
});
If it is on the fly then,
$(document).ready(function() {
$('#cont').bind('DOMSubtreeModified', function(){
var dynWidth = $('#cont').width();
console.log('changed dynWidth: ' + dynWidth);
});
});
Note: DOMSubtreeModified is not supported in IE8 (and below).
For any details refer this link.
I currently have a 'widget' div which has a static height, within it is an image which also has a static height. The only thing that can have a dynamic height is the title which can change from 1-3 lines long.
What's happening is that I'm trying to make the description within the div (which can be quite long) ellipsis before the containing div ends, taking into account the title which can vary in height.
I'm using a jQuery plugin called dotdotdot which docs can be found here http://dotdotdot.frebsite.nl/
The plugin is working but I think my JS might be off a bit. Would love some help as I just can't get my brain around it.
Fiddle Here
You can see it clearly on the fiddle but JS below.
$(document).ready(function () {
$(".caption").each(function () {
var authorheight = $('.meta').height();
var h2height = $('h4').height();
$(".desc").height(250 - h2height - authorheight);
$(".desc").dotdotdot({
after: "a.readmore"
});
});
});
Any help would be brilliant!
Thanks
You were doing everything right except for calculating the Height.
var authorheight = $('.meta').innerHeight();
var h2height = $('h4').innerHeight();
the above help you get the height along with the padding and everything.
Then next id you left padding which you have applied to .caption so your
height for .desc becomes as below
$(".desc").height(250 - h2height - authorheight -40);
UpdatedFiddle
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/
Previously, I asked how to center align an image (w/ dynamic width) within a div and someone replied with this code:
http://jsfiddle.net/WDzx4/6/
It's working correctly. However, when I try using the same class for another image, the other image is no longer vertically centered:
http://jsfiddle.net/b4Bbd/
You see, now, the 50x50 black image is slightly higher than it should be. I noticed that only the first image gets aligned correctly. If I add other images with a different width and height (using the same class) after that, they will be misaligned.
Could somebody help me find the problem as I'm not really familiar with javascript.
You need to wrap the JavaScript to do everything for all matching elements, instead of calculating the height for one and applying to all:
$('div.container_img img').each(function() {
var $img = $(this);
var h = $img.height();
$img.css('margin-top', +h / -2 + "px");
});
Try this: http://jsfiddle.net/timothyclifford/b4Bbd/7/
i have a div element, with very big size background image. so, is it possible, to set a little size image as backgrount, untill the big size image loads.
thanks
I guess you could put another div element underneath it (using the z-index property) and give that the faster loading background image.
Whether that is practical to do, depends on your Layout, you'd have to give more information about that.
There's also the ages-old lowsrc HTML 4 property that still seems to be pretty well supported (I have not tried it myself since Netscape 4), but that won't work for background images.
CSS:
.that-div {
background-image:url(/path/to/small-image.png);
}
jQuery:
$(function () {
var bigImg = new Image(),
bigImgSrc = '/path/to/big-image.png';
bigImg.src = bigImgSrc;
$(bigImg).load(function(){
$('.that-div').css('background-image':'url('+bigImgSrc+')');
});
});