проблема с плагином lightbox()

hk416 · November 21, 2012

Приветствую вас всех уважаемые. В общем для своей галереи решил использовать вот этот lightbox(), Моя ссылка В общем как в примере, все работает.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery lightBox plugin</title>

	<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />    

    <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
    <!-- / fim dos arquivos utilizados pelo jQuery lightBox plugin -->

    <!-- Ativando o jQuery lightBox plugin -->
    <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
    </script>
   	<style type="text/css">
	/* jQuery lightBox plugin - Gallery style */
	#gallery {
		background-color: #444;
		padding: 10px;
		width: 520px;
	}
	#gallery ul { list-style: none; }
	#gallery ul li { display: inline; }
	#gallery ul img {
		border: 5px solid #3e3e3e;
		border-width: 5px 5px 20px;
	}
	#gallery ul a:hover img {
		border: 5px solid #fff;
		border-width: 5px 5px 20px;
		color: #fff;
	}
	#gallery ul a:hover { color: #fff; }
	</style>
</head>

<body>

<h2 id="example">Example</h2>
<p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p>
<div id="gallery">
    <ul>
        <li>
            <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image2.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image4.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image5.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery a').lightBox();">
                <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    </ul>
</div>

</body>
</html>

А вот когда допустим эту же галерею с начала распечатываешь в ПХП, то к сожалению эта функция начинает работать только для первой картинке в родительском диве. Если написать просто вот так


 $('a').lightBox();

Функция поглощает все cskrn на странице, а это совсем не нужно.

Я попробовал перебрать коллекцию ссылок которые нужны, но тоже не заработало.


$('#post a').each(function(i,d){
		$(d).lightBox();
		});

Здесь #post это див в котором лежат картинки. Если назначить каждой нужно ссылке один ID, и потом их так перебрать тоже к сожалению не получается. Скажите плизз, что можно сделать.

Edited November 21, 2012 by hk416

Great Rash · November 21, 2012

$('#post a').lightbox();

Зачем each писать?

hk416 · November 21, 2012

$('#post a').lightbox();
Зачем each писать?

Затем что у меня уже была подобного рода проблема, имеется много объектов в дереве DOM с одним и тем значение ID, ну так вот если не пройтись по всем объектам с этим ID, то функция будет работать только для 1-го объекта с этим id. В общем когда есть много объектом с одним ID они образуют массив объектов, который нужно пройти, и на каждый навесить ф-ю, иначе не как. Я уже сталкивался с этим когда писал полностью динамический форум, и писал для постов функцию удаления, и на каждый новый пост нужно было навешивать события, вот такой код тогда был. И все работало.


var max = document.getElementsByTagName('P'); 
	for(var i=0; i<max.length; i++)
		max[i].onclick = deletepost;

Здесь как вы понимаете функция deletepost() навешивалась на всю коллекцию тегов P, так же можно сделать и с ID document.getElementByID('m'); . В jquery за проход по коллекции отвечает функция each().

И ещё надеюсь вы знаете, какая разница между тем что страница сразу готова, то есть на ней чисто готовый HTML, и то когда в процессе работы появляются новые объекты и как это отражается на работе JS. Для меня в своё время это было открытием, в общем надеюсь вы мне поможете разобраться с данной проблемой)))

Вот если что, как распечатывается галерея. но вы и без меня отлично знаете как это делается


	$DBH=connect();

	$STH = $DBH->query('SELECT * FROM galeri');  

	$STH->setFetchMode(PDO::FETCH_ASSOC);  



	if(!$_SESSION['status']){

	while($row = $STH->fetch()) {  
	echo '<div id="post">';


	echo '<a id="m" href="'.$row[img_src].'" title="'.$row[title].'">';
    echo '<img src="'.$row[img_src].'" width="150" height="150" />';
    echo "</a>";

	echo "<div> Описание ".$row[title]."</div>";
	echo "<div> Дата ".$row[date_img]."</div>";
	echo "<div> Автор ".$row[login]."</div>";



	echo "</div>";	
  }

Edited November 21, 2012 by hk416

mishka · November 21, 2012

может тут проблема?

lightbox()

lightBox()

Не, не там. Там вроде правильно. Давай линку на сайт, будем там смотреть.

Great Rash · November 21, 2012

ID на то и ID, чтобы быть уникальным, jQuery умеет находить коллекции элементов по классу, не понимаю зачем вам привязываться к ID.

hk416 · November 21, 2012

ID на то и ID, чтобы быть уникальным, jQuery умеет находить коллекции элементов по классу, не понимаю зачем вам привязываться к ID.

Мужики, огромное спасибо за помощь, прицепил эту штуку по классу и всё заработало как часы, даже не нужно использовать обёртку в виде дива.


$('.m2').lightBox();

Чпок, и нуль проблем )))))

С уважением к вам и вашему труду hk416!!!!

Sign In

проблема с плагином lightbox()

Question

hk416

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

hk416

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

hk416

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information