Как сделать предыдущие и следующие кнопки

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

Ниже приведен код, я использую:

$(function(){    
    $.fn.showBig = function(){ 
     $(this).click(function(){ 
      var getURL = $(this).data('url'); 
      var navControls = '<div id="nav-controls">'; 
       navControls += '<span id="nav-prev">&lt;</span>'; 
       navControls += '<span id="nav-next">&gt;</span>'; 
       navControls += '</div>'; 

      $('<div id="darkbg"/>').css({'opacity':'0.5'}).appendTo('body'); 
      $('<div id="popup"/>').css({'opacity':'0'}).appendTo('body'); 
      $('<div id="image-wrap">').html('<img src =' + getURL +'>').appendTo('#popup'); 
      $('<span id="close"/>').text('X').appendTo('#popup'); 
      $(navControls).appendTo('#popup'); 

      var imageTarget = $('#image-wrap img'), 
       maxHeight = $(window).height(), 
       countHeight = imageTarget.height(), 
       countWidth = imageTarget.width(), 
       countTop = imageTarget.height()/2, 
       countLeft = imageTarget.width()/2; 

      if (imageTarget.length){   

       $('#image-wrap').css({'height':countHeight+'px', 'width':countWidth+'px', 'max-height':maxHeight+'px'}); 
       $('#popup').css({'margin-left':'-'+countLeft+'px', 'margin-top':'-'+countTop+'px'}).animate({'opacity':'1', 'height':countHeight+'px', 'width':countWidth+'px', 'max-height':maxHeight+'px'}) 

       } 
       if(imageTarget.attr('src') == ''){      
        $('#image-wrap').css({'height':'300px', 'width':'400px', 'max-height':maxHeight+'px'}); 
        $('#popup').css({'margin-left':'-200px', 'margin-top':'-150px', 'height':'300px', 'width':'400px'}).animate({'opacity':'1', 'height':'300px', 'width':'400px', 'max-height':maxHeight+'px'}); 
        $('#nav-controls').hide(); 
        var notFound = '<span class="not-found">'; 
         notFound += '<strong>not found :(</strong><br>you may check the image path.'; 
         notFound += '</span>'; 

         $('#image-wrap').html(notFound); 
        } 

      $('#close').closeBig(); 

      return false; 
     }); 

    } 

    $.fn.closeBig = function(){ 
     $(this).on('click', function(){ 
      $('#darkbg, #popup, #close').fadeOut(removeall); 

      function removeall(){ 
        $(this).remove() 
       } 
      return false; 
     }); 
    } 

    $('#gallery-list li a').showBig(); 
});

Here является jsfiddle.

Спасибо за помощь.

источник

2013-09-10 Mufeed

Дайте всем изображениям уникальный класс ('.uniqueImage'). Нажимайте изображение, добавляйте класс (например, '.activeImage'), и когда вы нажимаете следующую кнопку, найдите' .activeImage', удалите '.activeImage', обратитесь к следующему' .uniqueImage' & apply '.activeImage' и замените '# image-wrap> img' с этим src. – Dom

У вас нет javascript-кода, связанного с элементами 'prev' и 'next'. Это не «не работает» или «глючит», он «неполный». –

@ DOM ... можете ли вы представить это ссылкой на скрипку .... много спасибо – Mufeed

Этот код должен быть введен в HTML, так что JQuery может получить эти элементы по ид:

<div id="nav-controls"> 
<span id="nav-prev">&lt;</span> 
<span id="nav-next">&gt;</span> 
</div>

Затем добавить клик слушателей этих кнопок:

$("#nav-prev").click(function() { 
// your codes here 
}); 

$("#nav-next").click(function() { 
// your codes here 
});

Желание это может быть полезно ,

источник

2014-07-07 15:46:22

Как сделать предыдущие и следующие кнопки

ответ

Смежные вопросы