تغییر سورس تصویر [بایگانی]

leilaaa

دوشنبه 16 شهریور 1394, 10:58 صبح

من یک صفحه نمایش تصاویر برای هر محصول توی فروشگاهم دارم. به این ترتیب که روی هر محصولی که کلیک می کنیم، وارد این صفحه می شه و عکس پیش فرض محصول توی یه کادر بزرگ (frame_current) بالای صفحه نمایش می ده و اگه موس روش قرار بدیم اونو زوم شده نشون (elevatezoom)می ده. حالا یه سری تصاویر کوچیک (subframes_other) دیگه هم پایین این عکس هستند که در واقع عکس همون محصول از زوایای دیگه اند. که قراره اگه روش کلیک شد بیان تو کادر بالا قرار بگیرند و امکان زوم شدن روی اونها هم فراهم باشه.
مشکل من اینه که می تونم هر تصویری که از کادر پایین انتخاب می کنم تو کادر بالا نمایش بدم ولی بازم وقتی روش کلیک می کنم تصویر زوم شده عکس پیش فرض نشون می ده. در واقع مشکل من اینه که نمی تونم آدرس عکس زوم شده رو عوض کنم یعنی آدرس مربوط به data-zoom-image

<html>
<head>
<script src='js/jquery.js'></script>
<script src='js/jquery.elevatezoom.js'></script>

<style>
body{
width:100%;
height:100%;
margin:0%;
padding:0%;
background:#fff;}

.frame_current{
width:537.6px;
height:595px;
left:17%;
position:absolute;
top:0%;}

.frame_current img{
width:60%;
height:100%;}

#frames_other{
width:10%;
height:100%;
left:1%;
position:absolute;
top:0%;}

.subframes_other{
width:100%;
height:18%;
position:relative;
margin:2%;}

.subframes_other img{
width:100%;
height:100%;
position:absolute;
opacity:1;
}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.subframes_other').click(function(){
var src= ($(this).attr('src'));
$('.frame_current').attr('src',src);
$('.frame_current').attr('data-zoom-image',src);
$(".frame_current").data('zoom-image',src).elevateZoom({
zoomType: "lens",
lensShape : "round",
lensSize: 150,
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 500,
lensFadeIn: 500,
lensFadeOut: 500,
scrollZoom : true,});
});});

</script>
</head>
<body>
<img class="zoom3 frame_current img" src="images/10.jpg" data-zoom-image="images/10.jpg"/>
<div id="frames_other">
<img class="subframes_other img" src="images/10.jpg"/>
<img class="subframes_other img" src="images/20.jpg"/>
<img class="subframes_other img" src="images/30.jpg"/>
<img class="subframes_other img" src="images/40.jpg"/>
<img class="subframes_other img" src="images/50.jpg"/>
</div>
<script>
$(".zoom3").elevateZoom({
zoomType:"lens",
lensShape: "round",
lensSize:150,
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 500,
lensFadeIn: 500,
lensFadeOut: 500,
scrollZoom : true
});
</script>
</body>
</html>