I have the following gallery set up in jQuery: -
<script type="text/javascript">
$(function () {
$(".image").click(function () {
var image = $(this).attr("rel");
$('#galleryImage').hide();
$('#galleryImage').fadeIn('slow');
$('#galleryImage').html('<img src="' + image + '"/>');
return false;
});
$("#galleryImage").click(function () {
var imageLarge = $(this).attr("rel");
$('#galleryImage').html('<a href="' + imageLarge + '"/>');
$('#galleryImage a').lightBox();
});
});
<div id="galleryImage">
<img src="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" width="337" height="223" alt="forbury court" />
</div>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb1.jpg" class="thumb" border="0" /></a>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small2.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb2.jpg" class="thumb" border="0" /></a>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small3.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb3.jpg" class="thumb" border="0" /></a>
That takes the rel attribute value when a thumbnail is clicked and inserts it into the galleryImage div allowing the user to select different images via the thumbnails that all display in one place.
Now, what I want to do is apply lightbox to the current image in the #galleryImage div, so that if a user clicks it, an even larger version comes up via the lightbox plugin, but I can't quite get my head around how to do it, this is what I have so far, am I heading in the right direction?
Fixed it, used:
$(".image").click(function() {
var image = $(this).attr("rel");
var imageLarge = $(this).attr("title");
$("#galleryImage img").attr("src",image);
$("#galleryImage a").attr("href", imageLarge);
return false;
}
Using the title value which stores a url to the large image, taken from the currently selected thumbnail and just setting the attribute value in jQuery rather than inserting a bunch of HTML right into the div
Related
The following code is working fine here in sandbox and I am able to down it but in my machine and browser, using Chrome it is opening the images in next tab instead of downloading them as it is supposed to be by clicking on .imgs
Why might this happen and how can I prevent it to open in new page and just be download?
$('section img').each(function (e) {
var $this = $(this);
$('#imageBox').append('<a class="imgs" href="' + $this.attr('src') + '" download>Download</a>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageBox"></div>
<section>
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Perspolis_FC.png" alt="Smiley face" height="42" width="42">
<img src="http://pngimg.com/uploads/manchester_united/manchester_united_PNG15.png" alt="Smiley face" height="42" width="42">
</section>
I have an image with multiple image maps. If one link/area is clicked I want the image to change into another image. So for example if ID="02" is clicked I wamt the image source to change to 02.png and so on...
The markup I have for the area shapes are:
<img src="01.jpg" usemap="#Map" alt="">
<map name="Map">
<area shape="rect" id="02" coords="7,6,191,375" href="#" alt="">
</map>
How can I use jquery/javascript to achieve this?
$(document).ready(function() {
$("area").click(function() {
var areaId = $(this).attr("id");
$("img").attr("src", "" + areaId + ".png");
});
});
Edit: Working fiddle here: jsfiddle.net/940yj9vr/1
$('area').on('click', function() {
if(this.id<10){
url = (this.id*1);
url ='0'+ url;
}else{
url = (this.id*1);
}
// url=this.id*1;
console.log(url)
$("img").attr("src", url + ".png");
});
Hope this works for you
I want to change an image onclick on another image, but don't only want to change a fixed image but use the advantages of srcset, so the browser picks the right image for the current main image size (responsive layout).
This is what I am using right now, vanilla:
<div id="item-detail-img-main">
<img src="/_img/items/400/img.jpg" srcset="/_img/items/400/img.jpg 400w, /_img/items/600/img.jpg 600w" alt="" width="100%" id="item-detail-img-main-img">
</div>
<script type="text/javascript">
function chimg (img) {
window.document.images["item-detail-img-main-img"].src = img;
}
</script>
<ul id="item-detail-img-thumbs">
<li><img src="/_img/items/200/img.jpg" onclick="chimg('/_img/items/400/img.jpg')"></li>
<li><img src="/_img/items/200/img2.jpg" onclick="chimg('/_img/items/400/img2.jpg')"></li>
</ul>
I'm open to jquery here.
Anyone know how to handle this?
I think you can probably set the srcset attribute, at least by using the setAttribute() method. You could also just replace the whole image tag:
function(img,img2,img3){
document.getElementById('item-detail-img-main').innerHTML='<img src="'+img+'" srcset="'+img2+' 400w, '+img3+' 600w" alt="" width="100%" id="item-detail-img-main-img">';
}
The jQuery option looks something like this:
https://jsfiddle.net/axcnotx7/
<div>
<img id="main" width="100%" id="item-detail-img-main-img">
</div>
<ul id="thumbs">
<li><img src="https://icons.iconarchive.com/icons/fi3ur/fruitsalad/256/banana-icon.png"></li>
<li><img src="https://icons.iconarchive.com/icons/bingxueling/fruit-vegetables/256/apple-red-icon.png"></li>
</ul>
<script type="text/javascript">
var main = $('img#main');
$('#thumbs img').click(function(e) {
var imageSrc = e.currentTarget.src;
// You need to determine your own srcset paths here
var srcSet = imageSrc + ' 400w, ' + imageSrc + ' 600w';
main.attr('src', imageSrc);
main.attr('srcset', srcSet);
});
</script>
i have a simple question regarding jquery, i have a long list of images directly uploaded from youtube, the image have the same v-code as the video itself, so for simpe downloading of all the videos on one page for browsers i made a list of images, once u click it, the video will appear on its place, the thing is that the code that i have oriented for video's image, but not on another one, anyway here is the code:
$('.youtube_thumb > img').click(function(){
var parts = this.src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(this);
$(this).parent().parent().find(".name,.detail,.youtube_play").hide();
$(this).remove();
});
and the div
<div class="youtube">
<div class="name">
#left(name,30)#
</div>
<div class="detail">#left(detail,50)#</div>
<div class="youtube_play"></div>
<div class="youtube_thumb">
<img src="http://img.youtube.com/vi/#link#/0.jpg" style="width:50%;height:300px;border:0;" />
</div>
</div>
as u can see the code takes the img's src and sort the v-code and then put it inside the frame. But i want to work this code only after i click on the class youtube_play but not on youtube_thumb's image.
Thank you all for the help!
$('.youtube_play').click(function(){
var img = $(this).next().find('>img');
var parts = img.get(0).src.split("/");
var id = parts[parts.length-2];
$('<iframe width="50%" height="300" src="http://www.youtube.com/embed/' + id + '?autoplay=1" frameborder="0" allowfullscreen></iframe>').insertAfter(img.get(0));
img.parent().parent().find(".name,.detail,.youtube_play").hide();
img.remove();
});
How to show/hide big image by clicking on thumbnails?
I need like this
Try with JSFiddle here http://jsfiddle.net/jitendravyas/Qhdaz/
Is it possible with CSS only. if not then jQuery solution is OK.
An is it good to use <a href=#"> even it's not opening any new page in same or new tab.
Edit:
I forgot to add. it should work on iPad too
See this example:
No preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
Javascript (jQuery)
$(function(){
$(".small-images a").click(function(e){
var href = $(this).attr("href");
$("#big-image img").attr("src", href);
e.preventDefault();
return false;
});
});
Currently only 1 big image, when clicking on an A, the href of the A is copied as SRC of the big image.
Live example: http://jsfiddle.net/Qhdaz/1/
If you wan't to do it without the extra DOM progressing, you can add 3 big images, and load them directly. The above solution does not preload the images, the below function will.
With preloading
HTML:
<div id="big-image">
<img src="http://lorempixel.com/400/200/sports/1/">
<img src="http://lorempixel.com/400/200/fashion/1/">
<img src="http://lorempixel.com/400/200/city/1/">
</div>
<div class="small-images">
<img src="http://lorempixel.com/100/50/sports/1/">
<img src="http://lorempixel.com/100/50/fashion/1/">
<img src="http://lorempixel.com/100/50/city/1/">
</div>
Javascript:
$(function(){
$("#big-image img:eq(0)").nextAll().hide();
$(".small-images img").click(function(e){
var index = $(this).index();
$("#big-image img").eq(index).show().siblings().hide();
});
});
http://jsfiddle.net/Qhdaz/2/