Измените порядок изображений с помощью jquery

#jquery #image #jquery-ui #jquery-plugins

#jquery #изображение #jquery-пользовательский интерфейс #jquery-плагины

Вопрос:

У меня есть 4 небольших уменьшенных изображения, расположенных рядом, которые при нажатии на каждое изменяют небольшой div / panel под ними, чтобы отобразить другой текст.

При нажатии на изображение я хочу, чтобы они изменили порядок на тот, на который был нажат, чтобы перейти к крайнему левому краю. Итак, если было нажато 2 ниже:

1 2 3 4

Это должно стать

2 1 3 4

В идеале sliding, я нашел множество плагинов Jquery UI для отображения скользящих карасолей и т.д., Но ни одного для изменения порядка изображений, кто-нибудь знает о каких-либо?

Спасибо

Ответ №1:

Вот так. 😀

http://jsfiddle.net/rNzf7/

 $(document).ready(function() {
    var x = 100;
    $('img').each(function() {
        $(this).css("left",x "px");
        $(this).css("background-color", "rgb(0,90," x ")");
        x  = 55;
    });
});

$('img').click(function(e) {
    
 
    $(e.target).animate({
        left: "100"
    });
    
    $(e.target).siblings().each(function (){
        if ( $(this).position().left < $(e.target).position().left ) {
            $(this).animate({ left: " =55" });
        }
    });
});

Ответ №2:

Почему бы не изменить их порядок перетаскиванием с помощью Jquery UI Sortable >http://jqueryui.com/demos/sortable/#display-grid

1. Привет, Моргар, спасибо за ответ, проблема в том, что я хочу, чтобы это происходило автоматически, поэтому при нажатии они упорядочиваются сами по себе, а не с помощью перетаскивания пользователем.

2. Я понимаю. Вы должны быть в состоянии сделать это с помощью нескольких строк jquery, используя .animate()

Ответ №3:

Это то, что вы ищете (без скольжения, как заметил Нил).

 $('img-selector').click(function(){
  $(this).parent().prepend(this);
});

красочная демонстрация на http://jsfiddle.net/gaby/Lu5Q8 /