Jquery изменить источник изображения в зависимости от id Div нажал - PullRequest
Новая
       2

Jquery изменить источник изображения в зависимости от id Div нажал

0 голосов
/ 29 ноября 2011

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

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

Объединяя два, у меня есть следующий скрипт: 

 <script type="text/javascript">
    <!--
    $(function () {
        $('img[id^="thumb"]').click(function () {
        $('#loader').show();
        var id = $(this).attr('id').replace('thumb', '');
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none');
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).attr('src', 'photos/1.jpg');
    }); });

    //-->
    </script>

В конце вы заметите, что источник .attr зафиксирован на одном изображении.Я хочу, чтобы число перед «.jpg» изменялось в зависимости от идентификатора большого пальца (они помечены: «thumb1», «thumb2» и т. Д.)

Есть ли способ сделать это?Большое спасибо!

ps Этот ответ , кажется, близок, но у меня проблема в том, что идентификатор большого пальца, кажется, слишком рано в сценарии, чтобы использовать такие простые решения.

1 Ответ

2 голосов
/ 29 ноября 2011 
<script type="text/javascript">

    $(function () {
        $('img[id^="thumb"]').click(function () {
        var thumbId = $(this).attr('id').substring(5); // assuming the id of the thumb is like "thumb1", "thumb2", ...
        $('#loader').show();
        var id = $(this).attr('id').replace('thumb', '');
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none');
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).attr('src', 'photos/' + thumbId + '.jpg');
    }); });


    </script>
...