Исходное изображение jquery onclick из массива php

Question

Исходное изображение jquery onclick из массива php

0

Я очень новичок в PHP и jquery, и я пытаюсь настроить галерею изображений с эскизами, которые при нажатии отображают большее изображение в div над ними.

Пока у меня есть это:

$(function() {
 $('.thumbnail').click(function(e){
  e.preventDefault();
 $("#large").attr('src',"http://something.com/image.jpg");
 });
});

Я хочу изменить источник изображения из массива изображений. Когда кто-то щелкает эскиз A, например, я хочу, чтобы он загрузил соответствующее большое изображение A в div над эскизами. У меня есть два массива: один для миниатюр и один для больших изображений. Кажется, это довольно простая вещь, но, как я уже сказал, я совершенно новый!

Благодарю!

user2805440 23 сен. 2013, в 04:07

Источник

Теги:

php

javascript

jquery

arrays

onclick

3 ответа

Ещё вопросы

Steven · Answer 1 · 2013-09-23T00-23-00.000Z

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

есть два пути (по моим сведениям), чтобы сделать это.

1) На странице индекса ur после загрузки вашего JS файла вы эхо <script>loading_function("array_in_string")</script>; , и обрабатывать строку в JS и хранить в массиве.

2) используя Ajax, вызовите сервер и запросите полный список.

andrewb · Answer 2 · 2013-09-23T00-01-00.000Z

В HTML миниатюрных изображений добавьте тег данных, такой как

<img src="image.jpg" data-full-imgpath="http://..." class="thumbnail" />
<img src="image2.jpg" data-full-imgpath="http://..." class="thumbnail" />

Затем измените свой JS на это:

$(function() {
    $('.thumbnail').click(function(e){
        e.preventDefault();
        var imgPath = $(this).data("full-imgpath");
        $("#large").attr('src',imgPath);
    });
});

Источники изображений моих миниатюр и больших изображений расположены во внешнем php-файле, который я включил в каждую страницу. В файле php есть несколько массивов для разных продуктов (я создаю интернет-магазин): $products[101] = array( "name" => "Object 3", "imglarge" => array("images/products/image1.jpg", "2", etc), "thumb" => array("images/thumbs/thumb1.jpg", "images/thumbs/thumb2.jpg", etc) ); У каждого товара есть несколько фотографий товара (в виде эскиза и в целом), поэтому они не находятся в HTML. Как мне включить изображения из этих массивов в мой jquery?

Vincent · Answer 3 · 2013-09-22T23-54-00.000Z

Ваш код javascript выглядит корректно. Могу ли я увидеть ваш HTML-код.

<html>
    <head>
        <title>Test</title>
        <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    </head>
    <body>
        <div id="container">
            <img id="large" src="" />

        </div>
        <div id="thumbnail-container">
            <img class="thumbnail" src="large.PNG" width="50" height="50" alt="test1"/>
            <img class="thumbnail" src="large2.PNG" width="50" height="50" alt="test2"/>

        </div>
        <script>
            $(function() {
 $('.thumbnail').click(function(e){
  e.preventDefault();
 $("#large").attr('src',$(this).attr('[REPLACE_WITH_YOUR_LARGE]'));
 });
});
        </script>

    </body>
</html>

И я просто использую ваш код js на примере выше.