我是 Jquery 和 Javascript 的新手。我使用下面的代码在灯箱中显示图像
<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#album1 a').lightBox();
$('#album2 a').lightBox();
});
</script>
下面是使用上述脚本显示图像的 PHP 代码。
<div class="image-zoom" rel="lightbox" id="gallery">
<div id="album1" style="margin-right:18px;" rel="lightbox">
<?php
if (isset($albums[0])) {
$i = 1;
foreach ($albums[0]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<?php
} else {
?>
<a href="<?= $photo ?>" rel="lightbox"></a>
<?php
}
$i++;
}
?>
<div class="zoom-magnifier" id="gallery">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom"/>
</a>
<div id="more-text" align="left" ><?=$albums[0]['title']?></div>
</div>
<?php
}
?>
</div>
<div id="album2" rel="lightbox">
<?php
foreach (array(1, 0) as $album_id) {
if (isset($albums[$album_id])) {
$i = 1;
foreach ($albums[$album_id]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<?php
} else {
?>
<a href="<?= $photo ?>" rel="lightbox"></a>
<?php
}
$i++;
}
?>
<div class="zoom-magnifier">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom1"/>
</a>
<div id="more-text2" class="more-txt-link"><?=$albums[$album_id]['title']?></div>
</div>
<?php
break;
}
}
?>
</div>
</div>
这会在图像内生成放大镜图像。当我单击图像时，灯箱会将图像从 1 滑动到 6。但是当我单击放大镜（zoom-icon.png）时。灯箱从最后一张图片开始滑动。如何使它从图 1 开始。