Как сделать при событии один пункт активным, а все остальные неактивны при условии что это общая функция

@vooduq · Регистрация: 06.06.2013

Author24 — интернет-сервис помощи студентам

Вот к примеру:

http://jsbin.com/uhiqap/1/edit

на галерею когда клацаешь - чтоб была одна фотка большая, только активная

при условии, что это общая функция.

Вот эта:

Javascript

        bigImg('#site');
        bigImg('#site1');
        bigImg('#site2');
 
        function bigImg(imgId) {
 
            $(imgId).bind('click',function(){
                $(this).animate({
                    width: 379,
                    height: 275,
                    border: '5px solid #330066'
                }).find('img').animate({
                    width: 379,
                    height: 275
                }).end().insertBefore('figure:eq(0)');
            });
 
        };

я пытался сделать как-то так:

Кликните здесь для просмотра всего текста

Javascript

        function bigImg(imgId) {
 
            $(imgId).parent().find('figure').not($(this)).stop()
            .end().bind('click',function(){
                $(this).animate({
                    width: 379,
                    height: 275,
                    border: '5px solid #330066'
                }).find('img').animate({
                    width: 379,
                    height: 275
                }).end().insertBefore('figure:eq(0)');
            });
 
        };

и так:

Кликните здесь для просмотра всего текста

Javascript

        function bigImg(imgId) {
 
            $(imgId).parent().find('figure').not($(this)).animate({
                    width: 182,
                    height: 130
                }).find('img').animate({
                    width: 182,
                    height: 130
                }).end().insertBefore('figure:eq(0)');
            });
 
            $(imgId).bind('click',function(){
                $(this).animate({
                    width: 379,
                    height: 275,
                    border: '5px solid #330066'
                }).find('img').animate({
                    width: 379,
                    height: 275
                }).end().insertBefore('figure:eq(0)');
            });
 
        };

но безуспешно

о, может циклы подключить

просто в падло как-то swith-case писать для каждого id, хотелось бы как то попроще, id ввел, и все

Добавлено через 1 час 18 минут
Как-то так?

Javascript

        function bigImg(imgId) {
 
            $(imgId).bind('click',{'msg:"active"'},function(){
                $(this).parent().not($(this)).each(function(){
                    if ('msg' == 'active')
                    $(this).animate({
                        width: 182,
                        height: 130
                    }).find('img').animate({
                        width: 182,
                        height: 130
                    });
                }))
                .end().animate({
                    width: 379,
                    height: 275
                }).find('img').animate({
                    width: 379,
                    height: 275
                }).end().insertBefore('figure:eq(0)');
            });
 
        };

о_О

@Schtrich · 22.07.2013, 09:30

Javascript

$(document).ready(function () {
 
    $('#top-section .media-figure').click(function () {
 
        var mfig = $(this);
 
        var actEl = $('#top-section .active');
 
        actEl.animate({
            width: mfig.width(),
            height: mfig.height(),
            border: mfig.css('border')
        }).find('img').animate({
            width: mfig.find('img').width(),
            height: mfig.find('img').height()
        });
 
        actEl.removeClass('active');
 
        $(this).animate({
            width: 379,
            height: 275,
            border: '5px solid #330066'
        }).find('img').animate({
            width: 379,
            height: 275
        }).end().insertBefore('figure:eq(0)');
 
        $(this).addClass('active');
 
    });
 
 
    $('#top-section .media-figure').hover(function () {
        $(this).find('figcaption:eq(0)').toggleClass('figcap-money').end().find('figcaption:eq(1)').toggleClass('figcap-first');
    });
});

@vooduq · 22.07.2013, 12:04 **[ТС]**

спс бро, разберу гляну

@vooduq · 24.07.2013, 21:51 **[ТС]**

решение

Добавлено через 2 минуты
о есть аллилуя!

Добавлено через 10 минут

Javascript

        function bigImg(imgId) {
 
            $(imgId).bind('click',function(){
                $(this).animate({
                    width: 379,
                    height: 275,
                    border: '5px solid #330066'
                }).find('img').animate({
                    width: 379,
                    height: 275
                }).end().insertBefore('figure:eq(0)').trigger('MinImg');
            });
 
            $(imgId).bind('MinImg', function(){
                $(this).nextAll('figure').animate({
                    width: 182,
                    height: 130
                }).find('img').animate({
                    width: 182,
                    height: 130
                });
            });
 
        };

@vooduq 69 / 69 / 22 Регистрация: 06.06.2013 Сообщений: 404
	22.07.2013, 12:04 [ТС]	3
	спс бро, разберу гляну 0

	24.07.2013, 21:51