Использование jQuery для загрузки нового изображения в div с другим путем к папке - PullRequest
Новая
       1

Использование jQuery для загрузки нового изображения в div с другим путем к папке

0 голосов
/ 08 февраля 2012

Вот мои настройки:

У меня есть две папки для изображений, 640 и 1024. У меня будут отображаться изображения на странице из папки 640 с именем 001,002,003 и т. Д. И т. Д.

Когда вы щелкаете изображение, оно загружает изображение большего размера в div, который находится в 1024. Каждое изображение в 1024 будет иметь то же имя, что и меньшее изображение в 640.

Имеет ли это смысл? Я пытался написать свой собственный код, но он просто не работал.

Спасибо за помощь.

код 

$('img').click(function() {
    $('#load').load(function() {
        var imageFolder = 'images/2500/';
        $(this).each(function () {
            imageName = $(this).attr('alt');
            $(this).attr('src', imageFolder + imageName);
        });
    });
});

Ответы [ 2 ]

2 голосов
/ 08 февраля 2012

Хорошо, как и было обещано, вот мое решение «лучший из возможных», свободно открытое для крита и комментариев.Я также постараюсь основать это как можно ближе к вашему коду, чтобы вы могли видеть, как элементы соотносятся друг с другом.или на что #load указывает.Для функции .load() в jQuery также требуется URL-адрес для загрузки, который, по-видимому, отсутствует.

Из вашего вопроса я предполагаю, что на вашей странице есть куча изображений, и когдапри нажатии на одну из них их более крупный аналог будет отображаться в div под ними.Надеюсь, это точно.Во-первых, давайте начнем с HTML: 

<div class="small_images_container">
    <img src="/images/640/001.jpg" />
    <img src="/images/640/002.jpg" />
    <img src="/images/640/003.jpg" />
    ...
</div>

<div id="big_image_container"></div>

Итак, у нас есть несколько изображений, и у нас есть контейнер для размещения большего, потрясающе.Теперь для скрипта, который должен добавить события щелчка, а также получить большее изображение и поместить его в .big_image_container ... Меня не беспокоит тег alt в этом решении, и скорее ясобираемся разбить исходные атрибуты src с помощью функции .split() Javascript и таким образом получить имя файла изображения ... вот так: 

<script type='text/javascript'>

    $(document).ready(function(){

        $('.small_images_container img').click(function(){

            // get the image and its 'src' attribute...
            var image = $(this);
            var src = image.attr('src');

            // split the 'src' attribute with the '/' character and get the
            // last element in the array...
            src = src.split('/');
            var filename = src[src.length-1];

            // now we can create the image we're going to put in the
            // large image container...
            var image_folder = '/images/1024/';
            var large_image = $('<img />');
            large_image.attr('src', image_folder + filename);

            // set the HTML of the container to the new image...
            // first, clear out whatever HTML was in there, then add
            // the new image...
            $('#big_image_container').html('');
            $('#big_image_container').append(large_image);

        });

    });

</script>

Надеюсь, это имеет смысл и поможет!Пожалуйста, дайте мне знать, если я что-то пропустил или что-то неясно!

0 голосов
/ 08 февраля 2012

Мне так понравилось: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js">      </script>
<title>Loading...</title>
</head>
<body>
<img src="images/640/error_latest_dump_restore.png"/>
<script>
var smallFolder = '640';
var bigFolder = '1024';
$('img').click(function() {
    var tmp = $(this).attr('src');
    var tmp1 = tmp.replace(smallFolder, bigFolder);
    $(this).attr("src",tmp1);
});
</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...