Малко помощ с зуум на снимки

[pawel_angelow]

Здравейте!

Имам скрипт, който при натискане на една малка картинка (има няколко малки), сменя съдържанието на една голяма.

Идеята е смяна на голямата картинка без да презарежаш страницата. Има много мънички и когато кликнеш на някоя от тях, в рамката на голямата картинка се появява тази от малката. Не знам дали сте ме разбрали, но ето кода:

<script type="text/javascript">

function init(){

   th=document.getElementById('thumbs').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
   swapImage(this.src);
   }
  }
 }

function swapImage(url){

   str=url.lastIndexOf(".");
   str1=url.substring(str-1);
   str2=url.substring(str);

   url=url.replace(str1,str2);

   document.getElementById('bigpic').src=url;

 }

   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);

</script>

Снимките са:

<div id="thumbs">
					<img src="extras/images/1t.jpg" alt="01t.jpg">
					<img src="extras/images/2t.jpg" alt="02t.jpg">
					<img src="extras/images/3t.jpg" alt="03t.gif">
				</div>
<img src="extras/images/1.jpg" id="bigpic"/>

Искам обаче да си внедря един зуум на голямата - extras/images/1.jpg и си харесах MojoZoom. С две думи добавя се параметър:

data-zoomsrc="extras/images/1big.jpg

към снимката и минеш ли с мишката през нея си излиза отделно div-че със зоом от третата картинка (най-голямата)
Обаче кликна ли на малката снимка, src-то на средната се сменя, но остава параметъра

data-zoomsrc="extras/images/1big.jpg

Как да го сменям и него?

 

[eddyy93]

<script type="text/javascript">

function init(){

th=document.getElementById('thumbs').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
swapImage(this.src);
}
}
}

function swapImage(url){

str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);

url=url.replace(str1,str2);

document.getElementById('bigpic').src=url;

data-zoomsrc = url;
}

window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);

</script>

 

[pawel_angelow]

Така спира нормалната работа на скрипта. Аз пробвах разни варианти, но добавя ли нещо към скрипта спира да работи.

url също така не взима ли стойността на първата картинка без t - например малка картинка t1.jpg, средна 1.jpg

Ако някой измисли вариант, мога да променя имената. Идеята е да имам малки картинки, които превключват една средна и ако застана върху нея ми зарежда за зуум най-голямата.

 

[eddyy93]

Има конфликт на функции между двата кода.

Ти имаш функция на името init() а mojoZoom също има функция на името init().

Трябва да смениш името на твоята функция init() на всякъде с друго име и

data-zoomsrc = url;

си го остави отново под

document.getElementById('bigpic').src=url;

Тоест така както съм ти го написал в миналия ми пост, само единствено сменяш твоята функция init() с друго име и на местата които се извиква сменяш с ново име.

 

[pawel_angelow]

Прекръстих я, но отново не заработи. Дори пробвах document.getElementById('bigpic').data-zoomsrc = url; отгоре отдолу, но няма ефект (същото е и само за дата-зуум...)пробвах с друго url просто да видя дали сменя, но не. Може би ще се ориентирам към друг скрипт