结合 jquery 图像切换和滚动字幕脚本
我正在尝试将(1)图像切换菜单(滚动菜单上的项目,让图像显示在页面上的其他位置)与(2)标题滚动(滚动图像,将标题扩展到显示更长的文本)。
标题翻转是可爱的 jCapSlide 脚本,下面是它的工作示例:
http://steph-morris .com/jCapSlide.html
(来自 http://tympanus.net/codrops/2009/ 11/23/jcapslide-a-jquery-image-caption-plugin/)
这是图像切换菜单完全无法显示标题的示例,在是否处于翻转状态:
希望您能提供任何指导,从“将两个脚本拼凑在一起 101”指南的说明,到使其正常工作的便捷解决方案。
I am trying to hack together (1) an image switch menu (roll over an item on the menu, have an image show up elsewhere on the page) with (2) a caption roll over (roll over the image, have caption expand to show longer text).
The caption roll-over is the lovely jCapSlide script, here's an example of it working:
http://steph-morris.com/jCapSlide.html
(original plug-in from http://tympanus.net/codrops/2009/11/23/jcapslide-a-jquery-image-caption-plugin/)
Here is an example of the image switch menu completely failing to show the captions, in roll-over state or not:
http://steph-morris.com/novel_test.html
An earlier version of this cobbling-together managed to get the caption displaying IF I removed it from the "ic_container" DIV and moved it into the "overlay" DIV. Sadly I can no longer replicate that. That's what I love about hacking other people's scripts, is with how much more finality I manage to break it the more I tinker with it!
Would appreciate any guidance, from directions to a "cobbling two scripts together 101" guide to a handy solution to getting this to work.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
你的javascript大部分都很好,实际上问题出在你的css上。我删除了一些样式,现在第一个样式可以正常工作。您必须稍微尝试一下样式才能达到您想要的效果。至于第二个没有显示问题的是,由于某种原因,当 showcaption 选项设置为 true 时,javascript 出现问题。使其正常工作的解决方法是手动将“ic_caption”div 设置为
style="display:block;"
。我不明白为什么它不起作用,但现在这样做可以让它在开头显示标题。我在这里设置了一个工作示例: http://jsfiddle.net/dbMGg/1/
Your javascript is mostly fine actually the problem lies with your css. I stripped out some of the styles and it now works correctly for the first one. You're going to have to play around with the styles a bit to get it the way you want. As for the 2nd one not showing the issue is that for some reason the javascript is having problems when the showcaption option is set to true. A workaround to get it to work is to manually set the 'ic_caption' div to have
style="display:block;"
. I couldn't figure out why it wasn't working but doing this now makes it show the caption at the beginning.I set up a working example here: http://jsfiddle.net/dbMGg/1/