在php中,找到显示的数组元素,并提供到下一个和上一个的链接
In php, find which array element is shown and provide a link to the next and the previous
我遇到了以下问题。我正在处理一个html/php/js的情况,我有一些带有特定链接类的图像缩略图,所以当它们被点击时,javascript函数会获取图像src并将图像加载到特定的位置。
有没有一种方法可以让我每次都知道当前显示的图像,因为javascript函数Windows不会再次加载页面,它只是替换图像,就像AJAX
一样。如果我知道PHP中当前显示的是什么图像,我可以创建一些指向prev($array)
和next($array)
的链接。
代码如下:
<ul id="<?php echo $gal_id; ?>" class="<?php echo $extraWrapperClass; ?>" style="list-style-type: none;" >
<?php foreach($gallery as $count=>$photo): ?>
<li class="Thumb">
<span class="LinkOuterWrapper">
<span class="LinkWrapper">
<a href="<?php echo $photo->sourceImageFilePath; ?>" class="GalleriaLink Link<?php if($count==0) echo ' LinkSelected'; ?>" style="width:<?php echo $photo->width; ?>px;height:<?php echo $photo->height; ?>px;" title="<?php echo $photo->captionDescription.$photo->downloadLink.$modulePosition; ?>" target="_blank">
<?php if(($gal_singlethumbmode && $count==0) || !$gal_singlethumbmode): ?>
<img class="Img" src="<?php echo $transparent; ?>" style="width:<?php echo $photo->width; ?>px;height:<?php echo $photo->height; ?>px;background-image:url(<?php echo $photo->thumbImageFilePath; ?>);" />
<?php endif; ?>
</a>
</span>
</span>
</li>
<?php endforeach; ?>
</ul>
js代码:
$('.GalleriaLink').click(function(event){
event.preventDefault();
// Prevent clicks upon animation
if($(':animated').length) return false;
// Assign element
var el = $(this);
// Parent container
var outerContainer = el.parent().parent().parent().parent().parent();
var placeholderContainer = outerContainer.find(".PlaceholderContainer div:first");
// Placeholder elements
var targetLink = placeholderContainer.find("a:first");
var targetTitle = placeholderContainer.find("p:first");
var targetImg = targetLink.find("img:first");
// Source elements
var sourceLinkHref = el.attr("href");
var sourceLinkTitle = el.attr("title");
var sourceImage = el.find("img:first");
if(targetLink.attr("href")!==sourceLinkHref && targetLink.hasClass('TargetLink')){
if(el.find("span:nth-child(2)")){
var sourceTitle = el.find(".Caption").html();
} else {
var sourceTitle = false;
}
placeholderContainer.animate({'opacity':0},300,function(){
targetImg.attr("src",sourceLinkHref);
var counter = 0;
targetImg.load(function(){
if (counter++ == 0) {
targetImg.attr("title",sourceImage.attr("title"));
targetImg.attr("alt",sourceImage.attr("alt"));
targetLink.attr("href",sourceLinkHref);
targetLink.attr("title",sourceLinkTitle);
if(targetTitle.hasClass('TargetTitle') && sourceTitle) targetTitle.html(sourceTitle);
placeholderContainer.animate({'opacity':1},600);
}
});
});
因为您根本没有显示任何代码,所以我所能做的就是假设。
如果通过ul
显示缩略图,则可以保存当前元素的索引。
假设以下结构<ul><li><a class="thumbnail"><img src=".."></a></li></ul>
,并且您正在使用jquery:
$(document).ready(function() {
var currentIndex = -1;
$("a").click(function() {
//show the image in another place
-- magic stuff --
//get the index of current li
currentIndex = $(this).parent().index();
}
});
有了这个,你可以检查是否有上一个或下一个图像:
function prev() {
if(currentIndex < 1)
{
//there is no prev image --> perhaps show the last one
$("ul li").last()
} else
{
//get prev image
}
}
function next() {
if(currentIndex >= $("ul").children().length-1)
{
//there is no next image --> perhaps show first one
$("ul li").first()
} else {
//get next image
}
}
相关文章:
- 当滑块只有一个图像时,如何禁用下一个/上一个按钮
- jQuery UI 选项卡 - 将参数设置为下一个/上一个按钮单击
- 下一个/上一个锚链接,如何在用户滚动时更新下一个/上一个链接
- Jquery UI选项卡&选择方框-下一个/上一个按钮
- 引导分页下一个上一个不起作用
- 使用“下一个”/“上一个”按钮切换图像
- 角度 - ng 网格通过分组按语法选择下一个/上一个项目
- 下一个/上一个 jQuery 控件类跳转了太多的列表项
- 显示带有缩略图和下一个/上一个按钮的图像
- 花式框下一个/上一个不显示 iframe
- j查询滑动选项卡:控制选项 - 下一个/上一个
- 如何将左/右箭头(下一个/上一个)功能添加到我的 jQuery 图像和文本滑块
- j查询带有下一个/上一个的 UI 选项卡
- 如何通过幻灯片查看活动箭头(下一个/上一个)
- 尝试运行下一个上一个按钮以播放列表媒体播放器代码中的视频,出现错误
- 修复了标题导航和滚动到()下一个/上一个元素
- 将下一个/上一个输入集中在达到最大长度或退格键上
- 数据表:禁用第一个下一个上一个最后一个,并在处理时显示/搜索记录
- 如何从简介.js工具提示中动态添加或删除下一个/上一个按钮
- Javascript幻灯片与播放暂停和下一个上一个按钮