JavaScript « Перестановка картинок

Есть n картинок на странице. Все они сгруппированы в тройки. Одна в тройке большая, остальные две маленькие. При клике на маленькую, большая подменяется увеличенной копией маленькой, а вместо маленькой - уменьшенная бывшая большая, и тоже самое при клике на вторую уменьшенную. При нажатии обратно картинки снова меняются местами. Как заставить это работать если на странице много троек? Я смог только поменять в одной тройке изображения местами, а распостранить скрипт что бы он работал на все тройки я не знаю как

upd:
/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<div class="covers">
                    <img src="img/02_ru.jpg" alt="Большая обложка" class="ru" />
                   
                    <a class="minicover" href="img/hires/02_us.jpg">
                        <span></span>
                        <img class="thumb" src="img/02_us.jpg" alt="Мини-обложка" />
                    </a>
                   
                    <a class="minicover" href="img/hires/02_uk.jpg">
                        <span></span>
                        <img class="thumb" src="img/02_uk.jpg" alt="Мини-обложка" />
                    </a>
                </div>
 


/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }

<div class="covers">
                    <img src="img/hires/02_us.jpg" alt="Большая обложка" class="ru" />
                   
                    <a class="minicover" href="img/02_ru.jpg">
                        <span></span>
                        <img class="thumb" src="img/02_ru.jpg" alt="Мини-обложка" />
                    </a>
                   
                    <a class="minicover" href="img/hires/02_uk.jpg">
                        <span></span>
                        <img class="thumb" src="img/02_uk.jpg" alt="Мини-обложка" />
                    </a>
                </div>
 

1 ответов


Ну, вот такой скриптик у меня получился. Работает во всех браузерах (IE6-8, Opera, FF, Safari, Chrome), не требует дополнительных библиотек, картинок может быть в ряду сколько угодно. Пример для двух рядов из трех картинок


<div id="imgs1"></div>
<div id="imgs2"></div>
 

    <script language="javascript">
        function Troyka()
        {
            var p_Images = new Array(); // Все картинки
            var p_Places = new Array(); // На каком месте какая картинка стоит
            var p_big_place = -1; // Номер места на котором показывать большую картинку

            function p_GetName()
            {
                // Возвращает случайное имя
                                                                var my_ind = Math.round(Math.random() * 1000);
                var bad_ind = 0;
                while ((document.getElementById('Troyka' + my_ind)) && (bad_ind < 1000))
                {
                    my_ind = Math.round(Math.random() * 1000);
                    bad_ind = parseInt(bad_ind) + 1;
                }

                if (bad_ind < 1000)
                    return 'Troyka' + my_ind;
                else
                    return false;
            }

            function ChangeImg()
            {

                // Меняет картинки при щелчке
                                                                var ind = 0; // Индекс места на который щелкнули

                var pict_len = p_Images.length;
                while ((ind < pict_len) && (p_Images[ind]["name"] != this.id))
                    ind = ind + 1;

                if (ind == pict_len)
                    return false;

                this.src = p_Images[p_Places[p_big_place]]["small"];
                document.getElementById(p_Images[p_big_place]["name"]).src = p_Images[p_Places[ind]]["big"];

                var tmp_place = p_Places[p_big_place];
                p_Places[p_big_place] = p_Places[ind];
                p_Places[ind] = tmp_place;

                return true;
            }

            this.AddImage = function(in_pict_small, in_pict_big)
            {
                // Добавляем картинки к массиву всех картинок и размещаем на новом месте
                var new_img_index = parseInt(p_Images.length);
                p_Images[new_img_index] = new Array();
                p_Images[new_img_index]["big"] = in_pict_big;
                p_Images[new_img_index]["small"] = in_pict_small;
                p_Images[new_img_index]["name"] = p_GetName();

                p_Places[new_img_index] = new_img_index;

                return Boolean(p_Images[new_img_index]["name"]);
            }

            this.ShowMe = function(in_parent_element)
            {
                // Выводит тройку в родительский элемент in_parent_element
                if (!p_Images.length)
                    return false;

                // Определяем стартовые параметры

                p_big_place = 0;

                var newimg = document.createElement('img');
                newimg.id = p_Images[p_Places[p_big_place]]["name"];
                newimg.src = p_Images[p_Places[p_big_place]]["big"];
                in_parent_element.appendChild(newimg);

                for (var key in p_Images)
                {
                    if (key != p_big_place)
                    {
                        newimg = document.createElement('img');
                        newimg.id = p_Images[key]["name"];
                        newimg.src = p_Images[key]["small"];
                        newimg.onclick = ChangeImg;

                        in_parent_element.appendChild(newimg);
                    }
                }
                return true;

            }


        }

        var my_tr1 = new Troyka;
        my_tr1.AddImage('/_img/small1.JPG', '/_img/big1.JPG');
        my_tr1.AddImage('/_img/small2.JPG', '/_img/big2.JPG');
        my_tr1.AddImage('/_img/small3.jpg', '/_img/big3.jpg');

        var my_tr2 = new Troyka;
        my_tr1.AddImage('/_img/small1.JPG', '/_img/big1.JPG');
        my_tr1.AddImage('/_img/small2.JPG', '/_img/big2.JPG');
        my_tr1.AddImage('/_img/small3.jpg', '/_img/big3.jpg');

        my_tr1.ShowMe(document.getElementById('imgs1'));
        my_tr2.ShowMe(document.getElementById('imgs2'));
    </script>
 

Ссылка на файл с примером

А если так:


$(document).ready(function(){

    // берем все обложки
    $(".covers").map(function(){

        // теперь у каждой узнаем табнейлы
        $(this).children(".thumb").map(function(){

            // вешаем на каждый табнейл обработчик клика
            $(this).click(function(){
                // ... узнаем имагу, которую нужно подменять (класс "ru")
                // ... меняем местами src табнейла и имаги
            });

        });

    });

});
 
Разумеется, это только идея и совсем не реализзация.

Подключаем Prototype http://prototypejs.org/ и пользуемся.


Event.observe(window, 'load', function() {
    $$('div.covers').each(function(cover) {
        var bigCover = cover.down('img');
        cover.select('a.minicover').each(function(miniCover) {
            miniCover.observe('click', function(event) {
                Event.stop(event);
              var thumb = miniCover.down('img.thumb');
              var tmp = bigCover.src;
              bigCover.src = thumb.src;
              thumb.src = tmp;
            });
        });
    });
});
 
PS Возможно уже используется JQuery то можно переписать что бы не тащить лишнюю библиотеку. Так же можно эффекты прикрутить если есть желание :)


дак в чём проблема?
у картинок троек общий name сделай..
а дальше уже через document.getElementsByName("name") тебе и выдаст массив с тройкой под именем name
ну и храни общий массив с названиями троек
nm=['name1','name2'] и т.д

потом удобно будет
document.getElementsByName(nm[1]) и тд