Кликните по стеку изображений, изменив порядок контейнеров изображений - PullRequest
Новая
       1

Кликните по стеку изображений, изменив порядок контейнеров изображений

0 голосов
/ 08 марта 2011

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

Я пробовал несколько вещей безпока удачи:

  • путем замены HTML-кода статьи с replaceWith ()
  • путем изменения идентификаторов статей с помощью attr (), reOrder () и append ()

Если что-то неясно, пожалуйста, спросите.Любая помощь очень ценится!

Вот мой код ...

HTML: 

<div id="content">
  <article id="c1"><img src="01.jpg" alt="" /></article>
  <article id="c2"><img src="02.jpg" alt="" /></article>
  <article id="c3"><img src="03.jpg" alt="" /></article>
  <article id="c4"><img src="04.jpg" alt="" /></article>
  <article id="c5"><img src="05.jpg" alt="" /></article>
  <article id="c6"><img src="06.jpg" alt="" /></article>
  <article id="c7"><img src="07.jpg" alt="" /></article>
  <article id="c8"><img src="08.jpg" alt="" /></article>
  <article id="c9"><img src="09.jpg" alt="" /></article>
  <article id="c10"><img src="10.jpg" alt="" /></article>
</div>

CSS: 

div#content {
  position: relative;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
}

article {
  position: absolute;
  width: 400px;
  height: 400px;
  overflow: hidden;
}

article#c1 {top: 0; left: 0; z-index: 1000;}
article#c2 {top: 20px; left: 20px; z-index: 999;}
article#c3 {top: 40px; left: 40px; z-index: 998;}
article#c4 {top: 60px; left: 60px; z-index: 997;}
article#c5 {top: 80px; left: 80px; z-index: 996;}
article#c6 {top: 100px; left: 100px; z-index: 995;}
article#c7 {top: 120px; left: 120px; z-index: 994;}
article#c8 {top: 140px; left: 140px; z-index: 993;}
article#c9 {top: 160px; left: 160px; z-index: 992;}
article#c10 {top: 180px; left: 180px; z-index: 991;}

JS (испытания): 

$(function() {

  $('article#c1').click(function() {
    $(this).replaceWith($('article#c2'));
  });


  $('article#c1').click(function() {
    $('article#c1').attr('id','c2');
    $('article#c2').attr('id','c1');
  });


  $('article#c1').click(function() {
    var order = $('#order').val() == ""? null: $('#order').val().split(",");
    $('#content').reOrder(order, 'c');
    $('#content').reOrder();
  });

});

(function($) {

$.fn.reOrder = function(array, prefix) {
  return this.each(function() {
    prefix = prefix || "";

    if (array) {    
      for(var i=0; i < array.length; i++) 
        array[i] = $('#' + prefix + array[i]);

      $(this).empty();  

      for(var i=0; i < array.length; i++)
        $(this).append(array[i]);      
    }
  });    
}
})(jQuery);

1 Ответ

2 голосов
/ 08 марта 2011

Это должно работать: 

$(function() {

    $('article#c1').live('click', function() {
        var articles = $('article');
        articles.each(function(i, el) {
            el.id = 'c' + (el.id.substring(1) - 1);
        });
        this.id = 'c' + articles.length;
    });

});

Вы можете увидеть это в действии на jsfiddle.net / marke / Adc3K / .Обратите внимание, что я заменил изображения номерами для целей тестирования.

...