フォトギャラリーでポップアップを取得して、JavaScriptを使用してライトボックスを有効にする

Question

フォトギャラリーをクリックすると正しく動作しないようです。私は、ライトボックスタイプの影響をさせるためにJava関数を使用しようとしています。

は、ここに私のコードです：私はSmoothboxを使用しています

<div style="max-width: 888px; width: 100%; margin: 0 auto; text-align: center;" id="thumbnails"> 
$images_dir = 'images/med/full/'; 
$thumbs_dir = 'images/med/thumb/'; 
$thumbs_width = 300; 
$thumbs_height = 300; 
$images_per_row = 3; 

/** generate photo gallery **/ 
$image_files = get_files($images_dir); 
if(count($image_files)) { 
$index = 0; 
foreach($image_files as $index=>$file) { 
$index++; 
$thumbnail_image = $thumbs_dir.$file; 
if(!file_exists($thumbnail_image)) { 
    $extension = get_file_extension($thumbnail_image); 
    if($extension) { 
     make_thumb ($images_dir.$file,$thumbnail_image,$thumbs_width,$thumbs_height); 
    } 
} 
echo '<a href="',$images_dir.$file,'" class="photo-link smoothbox" rel="gallery"><img src="',$thumbnail_image,'" /></a>'; 
if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; } 
} 
echo '<div class="clear"></div>'; 
} 
else { 
echo '<p>There are no images in this gallery.</p>'; 
} 

?> 
</div> 

、私はそれが仕事を得ることができませんでした。私は、上記のリンクからのスクリプトを使用する代わりに、より小さなスクリプトを書くことができることを願っていました。

私はこの1つのような単純なライトボックスの作成を研究しましたが、私は上記のコードとどのように統合するのか分かりません。 http://davishosting.net/ginger/mediterranean

私はその背後にあるすべてのものの上に半透明の背景と拡大写真とセンターを、希望：ここ

は、私は、これは上の仕事をしたい、私の写真をウェブサイトへのリンクです。

Answer 1

あなたのコードを見直すと、あなたのJavaへの呼び出しが行われていないように見えます。

jsファイルをリンクするときに、要素がアクティブになっていることをJavaに伝えるスクリプト要素を追加する必要があります。

は、あなたの頭のタグわたってるしきたり、サムネイルのdiv要素の終了タグの下に次を配置してみてください。

<script type="text/javascript"> 
$(function() { 
    $('#thumbnails a').lightbox(); 
}); 
</script> 

私は滑らかボックスを使用しましたし、そのコードが私のためにうまく働きました。