Javascript ссылка на LIGHTBOX images

Question

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

<script> 
imageArray =[ 
"image1.jpg", 
"image2.jpg", 
"image3.jpg" 
]; 

function assignUrl(img_num) 
    { 
     return "www.website/images/" + imageArray[img_num]; 
    } 
</script> 

И в моей галерее, я использовал,

<a href="javascript:document.location.href=assignUrl(0);" 
data-lightbox="imagegallery" > 
<img src="javascript:document.location.href=assignUrl(0);" <!-- thumbnail-->   
</a> 

Но он не работает .. миниатюра не отображается, а когда и нажмите кнопку, то изображение продолжает загружаться, но ничего не происходит.

Когда я использую тестовую ссылку, как показано на рисунке, она отображает изображение.

<a href="javascript:document.location.href=assignUrl(0);"> TEST </a> 

Помогите? Что я делаю не так? Есть ли другой обходной путь?

Answer 1

Я написал пример функции для динамического создания и добавления элементов a и img на основе переменной imageArray. Затем активируйте плагин, вызвав функцию лайтбокса.

Я не хотел касаться вашего кода как можно больше.

Вот как это выглядит:

<script> 
    imageArray =[ 
     "image1.jpg", 
     "image2.jpg", 
     "image3.jpg" 
    ]; 

    function assignUrl(img_num) 
    { 
     return "www.website/images/" + imageArray[img_num]; 
    } 


    $(function() { 
     for (var i = 0; i < imageArray.length; i++){ 
      var div = $("<a/>").attr("href",assignUrl(i)).attr("data-lightbox","imageGallery"); 
      div.append($("<img/>").attr("src",assignUrl(i)).attr("width","20%").attr("height","20%")); 
      console.log($); 
      $("body").append(div);  
     } 
     $('a[rel="lightbox"]').lightBox(); 
    }); 

</script> 

Fiddle: http://jsfiddle.net/nilgundag/jTDk9/7/