幻灯片样式图片库

我想弄清楚如何创建一个图片库，如下图所示，所以我可以把它放到我的网站上。我想知道是否有人可以指导我正确的方向进行教程？我找到了很多不错的画廊来展示我的图片，但是他们都没有展示像我之后的幻灯片样式的图片。幻灯片样式图片库

廊的要求：

当在箭头点击，画廊条要么转移左/右一个画面
悬停在图像会变暗图像，并且显示一些字幕有关图像

example of filmstrip style gallery

来源

2012-06-12 Jon

首次如此疑问，是迄今为止我饿了。 –

@Michael谢谢。我希望我可以为这张华丽的照片作出贡献。 – Jon

我刚刚回答了一个问题，有人使用carouFredSel。这jQuery插件看起来会很好，但我认为它没有内置的悬停效果。说实话，这是更容易的部分。

诀窍是使宽度稍大于要显示的图像，从而导致每一侧的局部图像。

这里是一个jsfiddle来说明。

更新：
OP询问页面导航链接是否可以重新定位。我修改了 jsfiddle以这种方式工作。增加如下：

.list_carousel { 
    position: relative; 
} 
#prev2 { 
    position: absolute; 
    top: 35px; 
    left: 0; 
} 
#next2 { 
    position: absolute; 
    top: 35px; 
    right: 0; 
}

如果你有一个相对定位的容器元素，你可以绝对地定位子元素。我给list_carousel容器添加了相对位置，然后我可以将导航箭头完全放置在容器中。将top值更改为垂直位置，左/右水平放置。

我也一起删除了寻呼机，因为它不是基于原始示例的要求。如果您将页面箭头更改为图片，它几乎是您想要的。

更多更新
我决定更进一步，让 hover的效果更像这个例子。请参阅新的 jsfiddle。这些变化是：

周围列表项中的所有文本
新增$(".list_carousel li span").hide();隐藏所有的跨度增加跨度包装
修改悬停事件来切换跨度

我还添加了一些CSS来定位跨度文本：

.list_carousel li { 
    position: relative; 
} 
.list_carousel li span { 
    position: absolute; 
    bottom: 0; 
    display: block; 
    text-align: center; 
    width: 100%; 
}

最后更新（！我答应）
我决定全力以赴并添加透明层太： jsfiddle

哈弗修改：
$(this).prepend($("<div class='hover-transparency'></div>"));和$(this).find("div:first").remove();添加/上/缩小悬停去除透明层。

CSS修改：

.hover-transparency { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: rgba(0, 0, 0, 0.60); 
}

这些样式的透明层。改变以适应你的口味。

来源

2012-06-12 01:17:25

+1优秀的小提琴和** carouFredSel **也是一个很好的建议。 – arttronics

谢谢jesus.tesh。我想知道是否可以移动箭头和页面，以便它们位于照片之上？我尝试了'margin：-40 0 0 0; z-index：1000'，但我看不到页码，并且无法点击箭头。 – Jon

@Jon - 我认为箭头和页码是从上一个问题中遗留下来的。我会“捣鼓”一下，看看我能想出什么:) –

喜欢的东西jCarousel应该做的伎俩。一旦具备了轮播功能，您就可以通过CSS和包含标题的跨度添加悬停效果。

来源

2012-06-12 00:21:25 Ryan

我只是在看ContentFlow Plugin这是基于JavaScript。

它们包括额外的插件的一个单独的库，你可以使用花费你的幻灯片要求照顾，在这个特殊性一个HERE。当您在3张图片上使用鼠标滚轮时，它会滚动1.也就是说，您可以在插入箭头按钮时修改插件。

样本插件标记的样子：

{ 
    shownItems: 3, //number of visible items 
    showCaption: true // show item caption 
    width: 100,  // relative item width 
    height: 100,  // relative item height 
    space: 0.4  // relative item spacing 
}

为了解决这个字幕只应在鼠标悬停时是可见的，我会成立showCaption总是真的用一个jQuery .hover();事件侦听器将沿着必要时对标题类别名称.caption使用.show();和.hide();。此外，使用jQuery设置不透明度也可以在.hover();事件中完成。

最新版本的ContentFlow v1.0.2支持同一网页上的多个实例，如果需要的话。

来源

2012-06-12 09:12:33 arttronics

幻灯片样式图片库

回答

相关问题