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

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 :)
}

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);

Preventing src from being changed

Is it possible to fix an image src set by a javascript function and returned to a HTML tag.
I have a set of array objects that includes, amongst other details, the location of an image for each object:
Person[1]= {
Image:"Adam.jpg",
Name:"Adam"
};
I then have a function that is designed to extract the relevant image dependent upon an index sent to it.
function SetImage(DeskNo)
{
document.getElementById("DeskImage").src=Person[1].Image
}
This is where I run into problems. The block:
<div class="img>
<script>
SetImage(1);
</script>
<img id="DeskImage" width="30" height="30">
doesn't display anything, but does appear to very briefly flash up an image on loading before clearing it.
This block is repeated, but with an index of 2 and then 3 etc. The idea is that the function can be used to extract and return the image, and display several of them on screen at the same time.
A similar function triggered by 'onmouseover' seems to work successfully, which makes me wonder if the image is being overwritten somewhere, which brings me to my question title. Is it possible to set an src via an element id (in this case 'DeskImage') or otherwise and fix it after the image has been set the first time, even if the src that id points to changes?
I wondered if a direct return of the src from the function may be possible, or alternatively if the index can be automatically appended to the id, however I couldn't identify anything in my searches.
If anyone has any ideas they would be appreciated.
The problem is you are calling SetImage before DeskImage exists. You need to wait until the page is ready before calling your script.
<script>
window.onload = function(){
SetImage(1);
};
</script>
<img id="DeskImage" width="30" height="30">

Place one image from JavascriptObject to multiple places

Situation: I have a tiny http server that can only handle 4 connections at any given time. When opening a web page, my web browser sends a get request for every image resource asynchronously (tries to open more than 4 connections at the same time). This causes some bad behaviour.
Initial solution: I wrote a JS function that loads the images sequentially and stores them in a dictionary
var loadedImages = {};
like so:
var img = new Image();
img.src = <img_location>;
loadedImages[<img_name>] = img;
After all the images are loaded i try to place them in various places in the DOM. The important part is that i need to place the same picture in multiple places. I do it like this:
//For all the elements that need to have the same image DO:
var img = loadedImages["<img_name>"];
$(this).html(img);
Problem: What happens is that as soon as the code puts the image in the SECOND element, the image gets removed from the FIRST element. When the image gets put in the THIRD element, it gets removed from the SECOND element. So what happens is that basically only the last element contains the image, while all the others are empty.
Question: How can I place the same image from my javascript dictionary (or any other javascript object) on multiple DOM elements?
Edit:When using something like
//For all the elements that need to have the same image DO:
var img = loadedImages["<img_name>"];
$(this).html($(img).clone());
as proposed by Tamil Vendhan and Atif Mohammed Ameenuddin, the image gets placed on all the elements and that is ok, but the browser requests the image from the server every time it comes to that line of code. So it is not really a good solution. Same goes when i use "cloneNode()"
Try using the clone method in jQuery
$(this).html($(img).clone());
Use jQuery.clone:
$(this).html($(img).clone());
Update:
Yes, browser will make the request. But it will use the cached image if it is already loaded.
Check your debugger's net panel to confirm this. You will see (from cache) under Size column.

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.

User sets BackgroundImage. Store image url in cookie so it loads on next visit

I am working on a website:
http://tawfiq-aliyah.co.uk/epic/Site2/
I want the user to be able to set the BackgroundImage. I have implemented this with the pop-up menu in the bottom left hand corner already. But what I want is for the data about the users choice of background image to be stored so that when they come back to the site or move to another page on the site it loads the same background image.
I have looked into java cookies on the w3schools.com website
w3schools.com/js/js_cookies.asp
I have looked at the example but I am not sure how to get the cookie to store the backgroundImage of the instead of storing a username.
Any help would be much appreciated.
Thanks
In the click handlers for the thumbnails in the background image selector you do things like this:
onclick="main.style.backgroundImage='url(images/back3.jpg)'"
If you replace that with a function:
onclick="setBackgroundImage('images/back3.jpg')"
and then
function setBackgroundImage(url) {
main.style.backgroundImage = 'url(' + url + ')';
setCookie('BG', url, 100); // Or however many days you want.
}
And then, in an onload handler, do something like this:
var bg = getCookie('BG');
if(bg)
main.style.backgroundImage = 'url(' + bg + ')';
You might want to do more sanity checking on the cookie value though, you have a list of available backgrounds kicking around so you could just check that bg is defined and that it is in the list.
Also, you might want to use absolute URLs for your images rather than relative ones, that makes it easier to move things around.
I've never worked with cookies in javascript, but looking at the w3c exampple you provided, wouldn'nt it be fine to use that technique and just store the url instead of the username? And then set the img:src or background-url or what ever you are using to that url from the getCookie function? (or later, whenever the dom is ready).
An alternative could be to use local storage, but it might be overkill for what you are trying to do.

Categories

Resources