| |
|
|
| | Приветствую вас всех уважаемые. В общем для своей галереи решил использовать вот этот lightbox(), http://leandrovieira.com/projects/jquery/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>
|
А вот когда допустим эту же галерею с начала распечатываешь в ПХП, то к сожалению эта функция начинает работать только для первой картинке в родительском диве. Если написать просто вот так
Функция поглощает все cskrn на странице, а это совсем не нужно.
Я попробовал перебрать коллекцию ссылок которые нужны, но тоже не заработало.
$('#post a').each(function(i,d){
$(d).lightBox();
});
|
Здесь #post это див в котором лежат картинки. Если назначить каждой нужно ссылке один ID, и потом их так перебрать тоже к сожалению не получается. Скажите плизз, что можно сделать. | |
| |
|
|
| |
|
|
| |
для: hk416
(21.11.2012 в 15:40)
| | | >"когда допустим эту же галерею с начала распечатываешь в ПХП"
распечатывайте с конца :)
------
зачем вы здесь выложили нормально работающий код
и не выложили код, который у вас формирует PHP и который не работает???
мы здесь угадывать должны - что вы там такого напутали в PHP-коде, что сформированный им HTML-код не работает?
в общем, сделайте так:
-- запустите ваш неработающий файл в браузере
-- в браузере же кликните по пункту меню "Исходный код"
-- скопируйте этот исходный HTML-код и выложите его сюда
тогда будет возможность посмотреть - что именно у вас не так
и не вздумайте здесь выкладывать ваш PHP-исходник - он никому, кроме вас, не нужен
смотреть и ловить ошибки можно (и надо!) в чистом HTML-коде, который видит браузер | |
| |
|
|
| |
|
|
| |
для: ЯСА
(21.11.2012 в 19:34)
| | | Спасибо за ответ, проблему благо решил, мне народ подсказал прицепить это дело по классу и все отлично заработало, даже без обертки.
echo '<a class="m2" href="'.$row[img_src].'" title="'.$row[title].'">';
echo '<img src="'.$row[img_src].'" width="150" height="150" />';
echo "</a>";
|
И сколько угодно картинок, будет показываться в lightBox.
Благодарю за внимание, но чертов день на это потратил. | |
| |
|
|
