Как реализовать вывод нажатой картинки в lightbox?

Question

[Sergey Maley]

Здравствуйте.

Я столкнулся с проблемой вывода нажатой картинки в lightbox'e, точнее, я даже не представляю, как оно должно быть, то есть я писал код для проверки, но мне выводит только одну, последнюю, которою я загрузил на сервер.
Ниже предоставлю вам код, он без комментариев, и так понятно, что он делает.

// код HTML и PHP (вывод картинок из галереи)

<p class="photos_header">Загруженные фотографии</p>
<div id="uploaded_imgs">			
<?
<code lang="php">
	$avasQuery = "SELECT * FROM photos WHERE uploader='$user' AND type='p'";
	$res = $database->query($avasQuery);
	$n = mysql_num_rows($res);
	for($x = 0; $x < $n; $x++)
	{
		$img = mysql_fetch_array($res);
?>
</code>
               <a class="img_show"><img src="imgs/photos/<? echo $user; ?>/<? echo $img['photo_filename']; ?>"></a>
<?
       }
?>		
</div>

//сам блок LightBox'a, в котором я хочу вывести нажатую картинку

<div id="selected_img">
	<img src="imgs/photos/<? echo $user; ?>/<? echo $img['photo_filename']; ?>">
</div>

// ну и сам js/jquery код (но это так... эффекты)

$(".img_show").click(function()
{
	$("#photos").hide();
	modalFone(); // на это не обращайте внимание, здесь хранится стиль самого "модального окна" (тоесть opacity: 0.6 и тому подобное) 
	$("#black_fone").show();
	$("#selected_img").show();
	$("#black_fone").click(function()
	{
		$("#selected_img").hide();
		$("#photos").show();
		$("#black_fone").show();
	});				
);

Переискал массу материалов в поисковиках, как и на youtube.com смотрел - ничего не помогло, иначе я бы здесь не регистрировался.
Спасибо заранее.

Answer 1

[Константин Б.]

Что мешает использовать сторонние скрипты, которые будут работать?
www.lokeshdhakar.com/projects/lightbox2 например?

Вот когда-то писал для себя, посмотри на этот говнокодец :D, мжет что черпнешь, писал когда еше сам был дурачком, но всетаки он работает)))

$(document).ready(function(){

		   $('div.image').live('click', function(){ 
                var index = $("div.image").index($("div[data-rel='modal']"));
                var id = $(this).attr("id");
                link = $(this).attr("data");
                $("div.image:eq("+index+")").attr('data-rel','');
                $('div.image#'+id).attr("data-rel","modal");
                var string = 'link='+ link ;
                $('<div class="overlay"></div>').appendTo('body');
                $('<img class="loader" style="position: fixed;background: rgba(0,0,0, 0.5);padding:20px;left:50%;top:50%;z-index: 99999;" src="/css/loader_rem.gif">').appendTo('body');
                $('<div class="modal"></div>').appendTo('body').html('<img class="lightboximage" src="'+link+'"><div class="close"></div><!--<div class="prev">Назад</div><div class="next">Вперед</div>-->'); 

           });
           $('div.close').live('click', function(){
                $('.overlay').remove();
                $('.modal').remove();
                $('.loader').remove();
           });
		   $('div.overlay').live('click', function(){
                $('.overlay').remove();
                $('.modal').remove();
                $('.loader').remove();
           });
     });

P.S. Смотри efimov.ws/main/develop/javascript/like-lightbox-jq... там много всякого, не ипи мозг

Answer 2

[Sergey Maley]

теперь понял как оно работает
link = $(this).attr("href"); - нужно вытащить ссылку картинки

$(this).append('<img src="'+link+'">'); - и вставить в div в качестве ресурса картинки.