Image Gallery lightbox - javascript

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

Related

Javascript Code explanation. Image sequence

I was wondering if you guys would be able to tell me what these last 2 lines mean in some code which will change images according to where they are in the sequence. It will change whenever I hit a button
var image = document.getElementById('light');
image.src=list[light];
Hope you are able to help me.
Thanks
PS: That code is found near to the end of my whole code
var image = document.getElementById('light');
This line sets the variable image to an element in the page with the id 'light'.
image.src=list[light];
This sets the src of the image to the value of list[light].
If list is an array then light will be a number to refer to the element of the array.
Alternatively if list is an object light could be a string.
That code gets an element by it's ID value and updates the source of the image, presumably to a different image.
Here you just get a reference to the image object.
var image = document.getElementById('light');
On the second line you change src property of image object to some different value, what is automatically triggers the reloading of image.
image.src=list[light];

how to make slideshow using html, and css

I want to make slide show using html css and js. for that i write the code and i am getting the slide shows. but every time at the beginning it creates a blank image named image which i wrote at alt tag.how to remove that?
<img id="myPhoto" src="images.jpg" alt="image">
<script src="slideshow.js"></script>
my javascript is
var myImage=document.getElementById("myPhoto");
var imageArray=["images.jpg","image1.jpg","images2.jpg","images3.jpg","images4.jpg"];
var imageIndex=0;
function changeImage()
{
myPhoto.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if(imageIndex>=imageArray.length){
imageIndex=0;
}
}
var intervalHandle = setInterval(changeImage,3000);
myPhoto.onclick=function(){
clearInterval(intervalHandle)
}
your code works fine. onething i have noticed in your javascript imageArray all the image has named images2,images3, etc except image1.jpg. I think there may be a silly mistake for these. because alt shows the message if it didn't find the image. otherwise your code is a nice one to made slide show.
Your code seems does not have any problems. I copied your code and write a slideshow program. It is working fine as expected.
As for the problem you mentioned, I think you can do this:
make sure your "images.jpg" exists. I tried to purposely include an image that does not exist, it shows "a blank image named image" as you mentioned in the question. Therefore, I think you may include your image wrongly. For me, as long as the image source is correctly included, problems resolved.
you may want to read more about the "alt" attribute in the img tag. I think in your case, alt is not necessary. You can just set it to alt="". For more information about when to use "alt" attribute in the img tag, you may want to refer to this url: http://www.w3.org/QA/Tips/altAttribute

Fade and replace image with other image depending on hash

First, here is my crazy code that you will hate
So I have this image that I want to replace with a jQuery fade effect whenever the hash changes. I want for it to check the hash on onLoad too. Right now I have a crazy code that I am pretty sure doesn't work because I am a kind of new Javascript developer. It is a horrible code.
If the code worked, it would do this:
//Home Hashes
var home = [
"#home",
"#news",
"#team",
"#cont",
"#about",
"#FAQ"];
It would check for for the hashes in each of these arrays, if it finds a match in one array, it will fade out the current image, switch them out, and fade the new image in. Depending on what array it is in, it will choose a different image.
(BTW, when changing the image it is changing the src in the html.)
I am using this to change my logo based on where you are on the site. My site has different logos for different sections.
You need to use onload plus hashchange
window.onload = checkHash;
window.onhashchange = checkHash;
function checkHash() {
// check stuff
}
Working Fiddle :: careful hash does change :-)
http://jsfiddle.net/R9cNW/9/

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.

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

Categories

Resources