I’m new with JS and looking for any tips how to implment or even how can I replace a part of big image (that conisists of two smaller images) when you change some option on the sidebar for example when you change product parameters.
When you click either or “Kolor karnisza:” or “Wzór końcówki:” a part of image changes. Either the color of curtain rod or curtain rod end.
How can I achieve this, as far as I already learnt two images are positioned absolutely with z-index and I need some JS or jQuery library to do this effect (what library?).
This is the website I’m talking about:
https://www.sklep-karnisze.net/1136,-34-Carbonera-34-podwojne-proste-19-mm?r=#/#8,7,2,50,1,10,
Thx in advance for your help.
<head>
<script>
function changeImage(imgName)
{
image = document.getElementById('largepic');
image.src = imgName;
}
</script>
</head>
<body>
<img src = 'largemaimimage.jpg' id = 'largepic' />
<img src ='small1.jpg' onClick="javaScript:changeImage('small1.jpg');"/>
<img src ='small2.jpg' onClick="javaScript:changeImage('small2.jpg');"/>
<img src ='small3.jpg' onClick="javaScript:changeImage('small3.jpg');"/>
</body>
Many Times this is answered on this site
Related
I want to change the image src on hover with javascript, but here is the twist
Here is my HTML
<div class="foo">
<div class="foo-2">
<form>
<input type="image" src="I want to change this on hover">
</form>
</div>
</div>
I reviewed the ansewr of this question CSS: Change image src on img:hover
here is a quote of the answer:
"
And if you think you can use some javascript code then you should be able to change the src of the img tag as below
function hover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}
function unhover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}
and the html be
img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />
It is helpful, but I'm really having trouble targeting the type image in my code, so that I can change it with javascrit.
I don't think changing source on hover is such a great idea. why? the images need to load and they can take relative long time to load and confuse the user if nothing happens within the 1. second.
it'd be better if you pre-load both images and then use css to hide/show the correct image on hover. this way it will show instantly.
For a while now I've been working on a rather simple website for myself.
I wanted to add a Lightbox since I thought it would suit the design, but I made a mistake in the process. Since I chose to use black and white images I decided to use the grayscale function. Now all the Images that I view with my Lightbox are black and white.
This is the Lightbox I use:
http://lokeshdhakar.com/projects/lightbox2/
This is a small but very important piece of my html:
<a href="img/Baking-Lightbox.jpg" data-lightbox="Baking" img src="img/Baking.jpg" data-title="My caption">
<img src="img/Baking.jpg">
</a>
can anybody tell me what I did wrong
Thank you in advance
According to how you implement this lightbox and based on the code you put into your HTML, it seems as though you have implemented the lightbox incorrectly. First, inside the head tag of your HTML, make sure that you include the CSS and links to the javascript files as follows:
<head>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
</head>
Once you have included those files, you should add images to you HTML using the following format ONLY:
Image #1
Replace "img/image-1.jpg" with the path to your image.
Replace "image-1" with any name that you would like to group your images together with. Make sure that any images that you would like to show together have this same value.
Replace "My caption" with what you would like to appear as a caption in the lightbox.
Replace "Image #1" with something that you would like to have appear in the HTML.
You can add as many anchor (a) tags as you need for each image.
Example
In the following example, I have two lightbox groups. One will show cars, and the other will show animals:
FROGS
DOGS
My SUV
A Toyota Camry
I've managed to get the picture to open the bigger version of the picture into a new window using this code:
<IMG SRC="pic_small.jpg" onClick="view();">
<script language="JavaScript">
function view() {
imgsrc = "pic_big.jpg";
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
The problem I got now is that I got many more pictures on my webpage and I'd like to not have to write another function for every script but instead having one function for all the pictures. In other words I'd like to have a script that does the same thing as above, but works on all of these (modified if needed) HTML lines
<IMG SRC="pic1_small.jpg" onClick="view();">
<IMG SRC="pic2_small.jpg" onClick="view();">
<IMG SRC="pic3_small.jpg" onClick="view();">
<IMG SRC="pic4_small.jpg" onClick="view();">
I was also wondering if there is some way to make the window that opens the the same size as the big picture.
For your first question
<IMG SRC="pic_small.jpg" onClick="view(this);">
<script language="JavaScript">
function view(img) {
imgsrc = img.src.split("_")[0] + "_big.jpg";
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
UPDATE
To your second question, it can be done.
UPDATE 2
This depends on your image names keeping that same format. Alternatively, you could do this:
<img src="pic_small.jpg" onclick="view('pic_big.jpg')" />
<script type="text/javascript">
function view(imgsrc) {
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
</script>
Using a js library such as lightbox is a good option. It does more or less what you ask. See e.g. Lightbox 2
By including lightbox, in combination with jquery, in your html, you can create a list of images with tags with a "rel" property of "lightbox". Lightbox will then automatically activate when you click the link surrounding the image. Here is an example.
image #1
See more examples here in the "how to use" section in the aforementioned link
Look at jQuery library which almost de-facto library for JS.
Using it you can do something like that
$('img').click(function(){
view($(this).attr('src'));
})
function view(small){
var big = small.split("_")[0] + "_big.jpg";
viewwin = window.open(imgsrc,'viewwin', 'width=600,height=300');
}
This way all your images will have the same behavior
First I'll start with this: I am in no way shape or form a developer, coder etc etc. I'm just a graphic designer helping a friend with her website.
As of right now, I'm having issues linking up thumbnails to the full images on my lightbox call out - you can view the site at www.chrissybulakites.com
I noticed
With VOID:(0) being in every single one ... my thought process was that if I correspond 0 thumb with 0 full then 1 thumb with 1 full then 2 thumb wwith 2 full etc etc it would work .. it didn't.
Can somebody explain to me if I'm on the right path or what I can do to make this work.
Thanks
Rob
Have have two basic elements per image; the thumb and the full image. The thumb is using JavaScript to show and hide a div (kind of like a frame) to hold the full image.
The HTML on the page repeats itself a lot, you can probably solve your problem whilst removing some of the repetition. I'd keep all of your thumbs but on each one, add in a reference to the full image the thumb represents. As well as reducing repetition, it'll make it easier to update the page in the future as changing a thumb and main image is done in one place rather than two.
In the below I've added another part to the "onclick" to say update the src of 'frame' to be the full version of the thumb.
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
Then delete all of the large images except one, updating it so that the img tag has an ID of 'frame'
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>
This will mean that as each thumb is clicked, it will do the light and fad bits it did before but it will also update the image being displayed.
Doing this for two images as a proof of concept I get this which works as expected:
<img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" />
<img src="http://chrissybulakites.com/thumbnails/actor_thumbnail.png" />
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA Close</div>
<div id="fade" class="black_overlay"></div>
you need to give each full image div its own unique id like: id="image23". Then modify the onclick to refrence the corresponding id: onclick="document.getElementById('image23')...
The meaning of the function void() in JavaScript is "do nothing". This prevents it to load a new new page (or to open the thumbnail image).
onclick = "document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block' "
Says that when user clicks that item it will capture the element light and change the display to block it will also capture the element fade and change the display to block. The thing is all your images are wrapped in an element called "light" so the browser is opting to show the first one (instead of throwing an error).
There is plenty of fuzzy logic here.
Starting with the fact that you are loading all images (the high definition ones).
If you want my two cents (and you only want to get the results, as opposed to learn how JavaScript works) I would go with something like prettyPhoto that does it out of the box, in an easy and straightforward way and is well documented.
How to add prettyPhoto to your page?
Download the code and include both the Javascript and the CSS file's on your header.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Then put this code on your page
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
The docs say to put it on the bottom of the page but you (should) also put it on the header.
And then put the thumbnails with links to the actual images. PrettyPhoto will take care of everything else. Do note the rel="prettyPhoto[my_gal]"
<a href="img/full/1.jpg" rel="prettyPhoto[my_gal]" title="Caption 1">
<img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" />
</a>
You can customize it further and should really read the manual here.
im using the "CREATE IMAGE GALLERY IN 4 LINES OF JQUERY" (link below), which works just fine.
But i like to make the large images clickable (not just the thumbs), so that when i click on which ever image that is showing as the large image, another bigger version of the image opens in a new window.
http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/
Any ideas is greatly appreciated. Thank you.
You can wrap the large image in an anchor element:
<div id="panel">
<a href="images/image_01_largest.jpg" target="_blank">
<img id="largeImage" src="images/image_01_large.jpg" />
</a>
<div id="description">First image description</div>
</div>
This follows the convention that one image comes in three sizes: *_thumb.jpg, *_large.jpg, and *_largest.jpg. All you need to do now is change anchor's href attribute when changing #largeImage's src.
$('#thumbs img').click(function(){
$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
$('#largeImage').parent().attr('href', $(this).attr('src').replace('thumb', 'largest'));
$('#description').html($(this).attr('alt'));
});
Hi you may try with the Pretty photo plugin for displaying the gallery in the light box. Demo for Preety Photo.This may help you