Как использовать jQuery - PullRequest
Новая
       22

Как использовать jQuery

0 голосов
/ 16 декабря 2008

Я написал код jQuery, в файлах Main.html и ajax.php. Файл ajax.php возвращает ссылку на изображение Main.html.

Теперь в Main.html, у меня есть Image1, Image2, Image3 и т. Д.

Мой Main.html файл: 

<html>
    ...
    # ajax.php Call
    ...
    # Return fields from Ajax.php
</html>

Мой файл ajax.php 

echo "<a href='src1'><img src='src_path1' id='fid1' alt='Name1' /></a>Click To View image1\n";
echo "<a href='src2'><img src='src_path2' id='fid2' alt='Name2' /></a>Click To View image2\n";
// etc.

Итак, после выполнения ajax.php я получаю расположение изображений в Main.html.

Теперь, когда я нажимаю ссылку Image1 из Main.html, соответствующее изображение должно отображаться в том же окне.

Поэтому я подумал, стоит ли снова использовать jQuery для просмотра изображения на той же странице. Как мне этого добиться?

Ответы [ 4 ]

1 голос
/ 16 декабря 2008

Похоже, вы захотите взглянуть на плагин лайтбокса jQuery .

0 голосов
/ 17 декабря 2008

Файл ajax.php вывод должен возвращать ниже HTML : 

<a href="#" class="imageLink" title="fid1"><img src="src1" id="fid1" alt="Name1" style="display:none;" /><span>Click To View image1</span></a> 
<a href="#" class="imageLink" title="fid2"><img src="src2" id="fid2" alt="Name2" style="display:none;" /><span>Click To View image2</span></a> 
<a href="#" class="imageLink" title="fid3"><img src="src3" id="fid3" alt="Name3" style="display:none;" /><span>Click To View image3</span></a>

И JQuery Код: 

$(document).ready(function(){
    $("a.imageLink").click(function(){
            $("#"+$(this).attr("title")).show();
        $(this).find("span").hide();
    });
});
0 голосов
/ 16 декабря 2008

Попробуйте это:

Поместите на страницу скрытый элемент div с изображением (тег img): 

<div id="imageDivisionHolder" style="disply:none;">
    <img id="imageItemHolder" src="" alt="" />
</div>

Установите класс для всех изображений, которые приходят из файла ajax.php, и поместите источник большого изображения в его атрибут. Я положил его в атрибут Title. 

<img src='src_path1' id='fid1' alt='Name1' class='item' Title='src_path1_bigimage' />

И код jQuery: 

$(document).ready(function(){
    $("img.item").click(function(){
        $("#imageItemHolder").attr("src",$(this).attr("title"));
        $("#imageDivisionHolder").show();
    });
});

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

0 голосов
/ 16 декабря 2008

Вы можете сделать что-то вроде этого:

Определите этот div в вашем html: 

<div id="pictureframe"></div>

Теперь добавьте обработчик onclick для ссылок на изображения, чтобы сделать следующее: 

$("#pictureframe").load(image_url);

Вам нужно структурировать свой код, чтобы легко получить image_url.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...