Good day guys,
I've a DOM like this
<div class="Gallery">
<div class="GaleryLeftPanel">
<img id="img1" src="/Content/Public/images/1.png" style="z-index: 100" width="141"
height="140" alt="image 1" /></div>
<div class="GalleryMiddlePanel">
<img id="img2" src="/Content/Public/images/3.png" style="z-index: 99" width="715"
height="497" alt="image 2" /></div>
<div class="GaleryRightPanel">
<img id="img3" src="/Content/Public/images/2.png" style="z-index: 98" width="140"
height="140" alt="image 2" /></div>
</div>
What I need is, If I click on img1, img2 is replaced with img1, and img3 is replaced with img2 and img1 is replaced with img3 (circular motion 1->2, 2->3, 3->1). and it continuous... and if I click on img3 then it's reverse (1<-2, 2<-3, 3<-1).
for this I'm using JQuery as follows:
$('img#img1').click(function () {
var currentScr = $(this).attr('src');
var second = $('img#img2').attr('src');
var third = $('img#img3').attr('src');
$('img#img3').attr('src', second);
$('img#img2').attr('src', currentScr);
$('img#img1').attr('src', third);
});
$('img#img3').click(function () {
var third = $(this).attr('src');
var first = $('img#img1').attr('src');
var second = $('img#img2').attr('src');
$('img#img2').attr('src', third);
$('img#img3').attr('src', first);
$('img#img1').attr('src', second);
});
It's working fine. now, What I need is, Always the 2nd image should be replace with large image instead of original image... say for example:
click on img1 (1->2L, 2->3, 3->1). here 2L is large image of img1. and click on img3 (1<-2, 2L<-3, 3<-1). here 2L is large image of img3
How to do this?, Please help me
What you need here is to use a double ended queue data structure so you can loop through the images.
Here's a working demo - if you give me URLs to the big images I can make it work as you described.
And here's the code:
var imgs = new Array();
imgs[0] = 'http://farm7.staticflickr.com/6198/6145108610_a5d456dae4_t.jpg';
imgs[1] = 'http://farm3.staticflickr.com/2564/4064894944_34b0460fc2_t.jpg';
imgs[2] = 'http://farm1.staticflickr.com/178/460793430_1c0a085849_t.jpg';
$('#img1').click(function () {
$('#img1').attr('src', imgs[2]);
$('#img2').attr('src', imgs[0]); // - Do something here to use a larger version of the image
$('#img3').attr('src', imgs[1]);
imgs.unshift(imgs.pop());
});
$('#img3').click(function () {
$('#img1').attr('src', imgs[1]);
$('#img2').attr('src', imgs[2]); // - Do something here to use a larger version of the image
$('#img3').attr('src', imgs[0]);
imgs.push(imgs.shift());
});
And a slightly refactored version here.
EDIT:
And here's a version with big images.
var imgs = new Array();
imgs[0] = {small: 'http://farm7.staticflickr.com/6198/6145108610_a5d456dae4_t.jpg',
big: 'http://farm7.staticflickr.com/6198/6145108610_a5d456dae4_b.jpg'};
imgs[1] = {small: 'http://farm3.staticflickr.com/2564/4064894944_34b0460fc2_t.jpg',
big: 'http://farm3.staticflickr.com/2564/4064894944_34b0460fc2_b.jpg'};
imgs[2] = {small: 'http://farm9.staticflickr.com/8201/8219867682_7c9aea748f_t.jpg',
big: 'http://farm9.staticflickr.com/8201/8219867682_7c9aea748f_b.jpg'};
var $img1 = $('#img1');
var $img2 = $('#img2');
var $img3 = $('#img3');
$img1.click(function () {
$img1.attr('src', imgs[2].small);
$img2.attr('src', imgs[0].big);
$img3.attr('src', imgs[1].small);
imgs.unshift(imgs.pop());
});
$img3.click(function () {
$img1.attr('src', imgs[1].small);
$img2.attr('src', imgs[2].big);
$img3.attr('src', imgs[0].small);
imgs.push(imgs.shift());
});
I believe you're trying to have gallery with middle picture in the high resolution.
I checked the flickr from where you took pics, and the rule seems:
so they differ in _t
/ _b
only.
To implement it I updated your js part like this:
$(document).ready(function() {
var second = $('img#img2').attr('src');
$('img#img2').attr('src', swap(second));
});
function swap(img) {
if (img.indexOf("_b.") !== -1) {
return img.replace("_b.", "_t.");
} else {
return img.replace("_t.", "_b.");
}
}
$('img#img1').click(function () {
var currentScr = $(this).attr('src');
var second = $('img#img2').attr('src');
var third = $('img#img3').attr('src');
$('img#img3').attr('src', swap(second));
$('img#img2').attr('src', swap(currentScr));
$('img#img1').attr('src', third);
});
$('img#img3').click(function () {
var third = $(this).attr('src');
var first = $('img#img1').attr('src');
var second = $('img#img2').attr('src');
$('img#img2').attr('src', swap(third));
$('img#img3').attr('src', first);
$('img#img1').attr('src', swap(second));
});
Moreover (to see resolution change I made pics a bit bigger): 140/141 -> 300
jsfille link: http://jsfiddle.net/dx3DY/
Only thing seems to be that one of the sample pics doesn't seem to be in the high resolution.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With