Получить изображение src с изображения в слайд-шоу

Question

Я много оглядывался сегодня и трачу несколько часов, пытаясь что-то сделать. Для клиента я создаю слайд-шоу с помощью лайтбокса при нажатии на изображение. Слайд-шоу и лайтбокс работают, но я еще не получил правильное изображение в лайтбокс.

Это код, который загружает слайд-шоу, и при нажатии на изображение открывается лайтбокс. (Изображения для слайд-шоу загружаются с помощью PHP скрипт и превращена в массиве Javascript)

<script type="text/javascript"> 

var curimg=0; 
function rotateimages(){ 
document.getElementById("slideshow").setAttribute("src", "images/"+galleryarray[curimg]); 
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0; 
} 

window.onload = function(){ 
setInterval("rotateimages()", 1000); 
} 
</script> 
<div style="width: 170px; height: 160px"> 
<a href = "javascript:void(0)" onclick =   "document.getElementById('light').style.display='block';document.getElementById('fade').style. display='block'"> 
<img id="slideshow" src="" /> 
</a> 
<div id="light" class="white_content"> 
<img id="lightImg" src="" /> 
<script> 
var image = document.getElementById("slideshow").src; 
document.getElementById("lightImg").setAttribute("src", image); 
</script> 

теперь я пытаюсь создать переменную с именем «образ» и пусть это содержит СРК текущего изображения в слайд-шоу. Поэтому я могу загрузить это изображение в лайтбокс.

Надеюсь, кто-то может дать мне несколько полезных советов. Я довольно новичок в языке Javascript.

Сценарий для слайд-шоу пришли: http://www.javascriptkit.com/javatutors/externalphp2.shtml

С уважением Коен.

Answer 1

В настоящее время на самом деле нет оправданий для использования навязчивого Javascript (материал внутри ваших HTML-атрибутов, в идеале он должен быть во внешнем файле. http://en.wikipedia.org/wiki/Unobtrusive_JavaScript).

Я помог вам немного очистить ваш код и поменять его там, где вы, кажется, ошибаетесь. Как уже указывал DotNetter, было бы разумно использовать jQuery в этом случае, поскольку это действительно упрощает вещи. Тем не менее, я собираюсь предположить, что по какой-то причине вы хотите это в простых js. Ниже приведено упрощение кода, который вы опубликовали с правильным изменением.

<style type="text/css"> 
    .wrapper { 
     width: 170px; 
     height: 160px; 
    } 
</style> 

<script type="text/javascript"> 
    var curimg=0; 
    function rotateimages(){ 
     document.getElementById("slideshow").setAttribute("src", "images/" + galleryarray[curimg]); 
     curimg=(curimg<galleryarray.length-1)? curimg+1 : 0; 
    } 

    window.onload = function(){ 
     setInterval("rotateimages()", 1000); 

     document.getElementById("slideshow").onclick = function() { 
      var imageSrc = document.getElementById("slideshow").src; 
      document.getElementById("lightImg").setAttribute("src", imageSrc); 
      document.getElementById('light').style.display = 'block'; 
      document.getElementById('fade').style.display = 'block'; 
     } 
    } 
</script> 

<div class='wrapper'> 
    <img id="slideshow" src="" /> 
    <div id="light" class="white_content"> 
     <img id="lightImg" src="" /> 
    </div> 
</div> 

Раньше вы получали СРК текущего изображения, когда страница загружена, вы должны получать СРК изображения, когда пользователь нажимает на