Lightbox change image programmatically - javascript

I use this lightbox-plugin: http://lokeshdhakar.com/projects/lightbox2/ how can I change the image src programmatically so that the plugin calculates the width and hight dynamically? To trigger the click method isn't a solution for me, because I have a swipe-event on the lightbox-image so when I swipe the image gets loaded.

Target your element what you want to manipulate, and after change the src attribute of it:
document.getElementById('imageElementId').src = 'http://example.org/logo.jpg';
Reference from here.
Your image element need an id, wrote that id where I wrote imageElementId and change the URL of the picture to your picures URL.
UPDATE
I've checked the lightbox plugin there is no id for the image. You can use, document.getElementsByClassName('lb-image')[0].src; to target the image.

Related

Image Gallery lightbox

Currently I have thumbnails, when I click the them a large version of the pic appears in the div directly to the right of the thumbnails. What I now want to be able to do is click the larger pic in the div and then trigger a lightbox that shows an even larger version of the pic.
I'm not quite sure how to do what I'm thinking is the solution so I'm gonna try and explain. I'm thinking that when i click the div to trigger the lightbox I want to take the src of the pic being click and then somehow redirect it to another src in my images folder.
Example:
When I click image in div I get the src of pic lets say that the source is:
src="redpic.jpg"
Then lets say in my images folder I have a larger version of the pic selected with the source:
src="redpic_large.jpg"
Would it be possible to manipulate the the src of an first image img src="redpic.jpg" by adding _large to the end and then appending this to my
lightbox???
Everytime I try to do things with my images I always seem to be running into problems.
say the src="redpic.jpg" when I check in the console the src goes to something like //139.0.0.1:56328/img/dotted.jpg and it seems to cause me a lot of problems
Sure, you can get the source of the image like this :
$("img").on("click", function(){
var source = $(this).attr("src");
});
This will give you the complete path (redpic.jpg).
You can use split() to get an array of both parts (the name and the extension)
var parts = source.split(".");
Now, all that you have to do is append the "_large" to the first part of the source, combine them back together and set your other image's source as the newly assembled one.
parts[0] += "_large";
var newSource = parts.join(".");
You pass the period . to the join function so that it puts a period in betwen your elements, instead of the default comma , .
All that's left to do is to use newSource as the source attribute of your other image.
$(".other-image").attr("src", newSource);

Add the alt attribute to light box slideshow title?

I am using Nivo Lightbox plugin. I am also using CMS surreal. I want the clients to be able to change the title of the images in the Nivo Lightbox slideshow. The titles to the slideshow are given in the anchor tag that surrounds the image tag, with the title attribute declaring the title displayed on the slideshow:
<img src="images/1.jpg" />
The CMS editor only gives the client the option to edit the alt attribute of the image. Therefore I need to swap the title attribute of the anchor to the alt tag of the image.
Question: How can I make the title of the slideshow link to the alt attribute of the image tag instead of the title attribute of the anchor surrounding it?
I can't find any option in the plugin; without any change to the HTML (or DOM changes) my actual solution (but I think can be improved) is to use the beforeShowLightbox and afterShowLightbox events to get the child img alt attribute and set it in the lightbox title.
Code:
var altText;
$(document).ready(function () {
$('#nivo-lightbox-demo a').nivoLightbox({
effect: 'fade',
beforeShowLightbox: function () {
altText = $($(this)[0].el).find('img').prop('alt');
},
afterShowLightbox: function (light) {
if (altText!=="") $($(light)[0]).find('.nivo-lightbox-title').html(altText);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/MH8mu/
To not change CMS neither Lightbox plugin code, I would use watch plugin to get noticed whenever alt attribute has changed and after that change title attribute.
with jquery:
$('[data-lightbox-gallery] img').attr('alt', $('[data-lightbox-gallery] img').parent().attr('title'));
Later edit: i don't know if i missunderstood you, but seems like you wanted the exactly reverse thing i've wrote:
$('[data-lightbox-gallery]').each(function(){
$(this).attr('title', $(this).children('img').attr('alt'));
}

How can I retrieve an image path from another page using JS?

This is my case: I have a page with a banner that will be frequently updated, this means the image path of the banner will be different each time the page is updated (can't be overwritten). Anyway, it will be inside a div or container with a constant name.
What I need to do is retrieve that image path and print it in a different page, so if the banner changes in the first page, it will automatically change in the second one.
I thought maybe some javascript could do the work, but I am not really sure how to get the image path from inside the div.
Any help will be appreciated, greetings from Argentina
solution using html5 and javascript is this
you can get the image tag through javascript(as u say it is in div
and whose id you know)
something like
src = document.getElementById("id").childnodes[0].src
should work for u
then you can store this src in the localStorage
localStorage["src"] = src;
as soon as you store something in localstorage it will fire a
"storage" event in all the other pages except the page in which
you have actually stored the src
so handle "storage" event in the other pages like this
window.addEventListener("storage",func,false);
function func(event)
{
src = localStorage[event.key];
//now src has the updated src :)
}

If ID has class, set attribute of another element

I'm trying to detect if a class is present and, if so, set the background attribute of another element. This is what I have but it's not working.
if(jQuery("#slider-banner").hasClass('living-nutrients'))
{
jQuery("#home-middle-first").css("background-image","[path to new background image]");
}
BTW - My next step is for this to detect it whenever the ID "slider-banner" changes, but so far I can't even get it to work once on page load. Any help would be greatly appreciated... Thanks!
EDIT: I changed from .attr to .css as instructed. Makes sense... but still not working. I've tried adding console.log message within the IF statement and got nothing also. Does that give anyone any more ideas?
Example HTML where class changes:
<img id="slider-banner" class="living-nutrients" src="[image path]">
Example HTML where I want to change background image:
<div class="home-middle-one-third" id="home-middle-first">
</div>
UPDATE:
For everyone who said it "should work"... you are right! Turns out that, as written, it doesn't like being in the footer of the page, but when I moved it to the head, presto!
The final piece of this puzzle is to have it detect and evaluate based on the #slider-banner changing, (or more accurately, which class is present for the ID'd area), not just the page loading, as is currently.
The ID is for one element of a slide within a slider. There are three possible classes I could assign to the ID depending on which slide is visible. So I need the script to evaluate every time a slide changes.
Any ideas? Thank you all!
background-image is a element's style property, not its own one.
So .css("background-image","[path to new background image]");
Almost!
if(jQuery("#slider-banner").hasClass('living-nutrients'))
{
jQuery("#home-middle-first").css("background-image","[path to new background image]");
}
css is the correct function to set a CSS attribute.
The attr will set an HTML attribute. <div attr='attr value'>
Edit
I'm kind of guessing about the functionality of your script here in the following example.
When you set the background-image of a HTML node, that's all it does is set the background image. You must also set the width and height accordingly, to all the node to be large enough to even see the background of the node. Background images will not automatically resize the node.
var slider = jQuery("#slider-banner"); // jQuery("#slider-banner") is slow, so we save it to a var if we use it more than once
console.log(slider); // should be this in Chrome: [<img id="slider-banner" class="living-nutrients" src="[image path]">]
if(slider.hasClass('living-nutrients'))
{
jQuery("#home-middle-first").css({
"background-image":"url("+slider.attr('src')+")", // url() for good meassures
//"background-image":slider.css('background-image'), //try this if that doesn't work
"height":slider.height(),
"width":slider.width()
});
}
Here is a working example.
Try this
jQuery("#home-middle-first").css("background-image","url([path])");

Is there a way to make images inside display:none not get downloaded by the browser?

I want the browser (mobile webkit especially) to NOT download images that are inside display:none divs. Right now, they get downloaded and not rendered.
Is there a jquery plugin to do this?
you can use data-* attributes. that way, you can have jQuery load them on demand:
<img data-source="image_path">
//this one gets all images and loads them
$('img').each(function(){
//loads the source from data-source
this.src = this.getAttribute('data-source');
});
<img data-source="image_path" class="foo">
<img data-source="image_path" class="foo">
//this one gets all images that have class foo and loads them
$('img.foo').each(function(){
//loads the source from data-source
this.src = this.getAttribute('data-source');
});
ofcourse you need to wrap this in a function so that you can call which images on demand. like:
function loadImg(selector){
$(selector).each(function(){
this.src = this.getAttribute('data-source');
});
}
//load images with class foo:
loadImg('.foo');
I don't think so. To be sure, you would need your original HTML DOM to exclude the hidden images, which you could do with server-side programming based on user agent sniffing (although that is not recommended). Modifying the DOM after document.ready or document.load will mean that the browser has already had a chance to request assets from the server even if they might not be displayed.
It would be unusual but if you still want to use jQuery you could follow #Pointy's advice and make all images placeholders in your markup. Then replace the :visible placeholders with the images you want using an attribute as the data source. No plugin is needed, just use something like replaceWith() or attr() to swap out the placeholder node for the image you want downloaded or change the src attribute.
I would use a 1x1 transparent gif as the placeholder with the correct height and width attributes rather than no source <img> for a placeholder. That way the page flow will be determined correctly when the page renders so it won't jump around as your images lazily load.

Categories

Resources