标签: slideshow
Galleria幻灯片api - 找到当前图片的替代文字
我正在网站上实现Galleria幻灯片,我在大多数情况下都能正常工作.我正在使用api来自定义幻灯片的外观,我想从图像中获取alt文本并显示在div中(我现在只是登录到firebug控制台)
这是我写的脚本:
<script type="text/javascript">
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
$("#gallery").galleria({
width: 420,
height: 370,
autoplay: 5000, // will move forward every 5 seconds
extend: function(options) {
var gallery = this; // "this" is the gallery instance
this.bind("loadstart", function(e) {
var currImg = gallery.getActiveImage();
var altText = $(currImg).attr('alt');
console.log(altText);
});
}
});
</script>
似乎这会起作用,但我在控制台中"未定义".有谁知道如何从"Galleria"图像中获取alt文本？API文档说.getActiveImage()方法返回一个返回IMG元素,所以我不确定我是否以正确的方式使用IMG元素,或者它是否有我可以抓取的替代文本.
我也试过使用我的图像ID,这是
('slideshow_image_' + e.index)
但这也给了我一个未定义的日志结果.
我知道HTML中有一个名为slideshow_image_0等的元素,我认为按元素ID查找alt文本并显示它很容易.如果我查看firebug的HTML选项卡,整个div是完全不同的,并且图像被galleria动态填充到这些部分中.不知道该怎么办...请帮忙!
推荐指数
解决办法
查看次数
jQuery SlidesJS键盘导航
推荐指数
解决办法
查看次数
简单的impress.js不起作用
不知怎的,即使是最简单的地面impress.js幻灯片对我也不起作用:( http://dl.dropbox.com/u/655237/events/GTG.zip ...,总是要用你的例子.
<html lang="en">
<head>
<title>Impress Demo</title>
</head>
<body>
<div id="impress">
<div id="start">
<p style='width:1000px;font-size:80px;
text-align:center'>Creating Stunning Visualizations</p>
<p>Impress.js </p>
</div>
<div id="slide2" data-x="-1200" data-y="0">
<p style='width:1000px;font-size:80px;'>
First Slide Moves From Left To Right</p>
<p>Impress.js </p>
</div>
</div>
<script type="text/javascript">impress().init();</script>
<script type="text/javascript" src="js/impress.js"></script>
</body>
</html>
我有最新的浏览器的JS directory.Still没有下impress.js文件放映的幻灯片.我正在使用Firefox 16.
推荐指数
解决办法
查看次数
如何在简单的jquery幻灯片代码中添加prev和next按钮
我jQuery从这个博客下面的幻灯片中找到了这个简单的代码.
http://leavesofcode.net/2012/08/17/simple-slideshow/
它完美地工作在这个项目我在工作,现在,在那里我可以调用与图像jQuery load()功能和幻灯片仍然有效.虽然我想在相同的代码中实现上一个和下一个按钮,如果可能的话.任何帮助将非常感激.请帮助谢谢.
这是代码:http://jsfiddle.net/mblase75/CRUJJ/
<script>
$(document).ready(function() {
setInterval(function() {
var $curr = $('.slideshow img:visible'), // should be the first image
$next = ($curr.next().length) ? $curr.next() : $('.slideshow img').first();
// if there isn't a next image, loop back to the first image
$next.css('z-index',2).fadeIn('slow', function() { // move it to the top
$curr.hide().css('z-index',0); // move this to the bottom
$next.css('z-index',1); // now move it to the middle
});
}, 6000); // milliseconds
});
</script> …推荐指数
解决办法
查看次数
Set TimeOut to React Function
I have the following object list:
mediaList[
{id:1, url:"www.example.com/image1", adType:"image/jpeg"},
{id:2, url:"www.example.com/image2", adType:"image/jpg"},
{id:3, url:"www.example.com/video1", adType: "video/mp4"}
]
我需要创建一个具有可配置持续时间（1 秒、5 秒、10 秒）的幻灯片。到目前为止，我可以从mediaList
renderSlideshow(ad){
let adType =ad.adType;
if(type.includes("image")){
return(
<div className="imagePreview">
<img src={ad.url} />
</div>
);
}else if (adType.includes("video")){
return(
<video className="videoPreview" controls>
<source src={ad.url} type={adType}/>
Your browser does not support the video tag.
</video>
)
}
}
render(){
return(
<div>
{this.props.mediaList.map(this.renderSlideshow.bind(this))}
</div>
)
}
我现在想要做的是一次生成一个媒体，并具有可配置的自动播放持续时间。
我知道我需要使用某种形式的 setTimeout 函数，如下例所示：
setTimeout(function(){
this.setState({submitted:false});
}.bind(this),5000); // wait 5 seconds, then reset to false …推荐指数
解决办法
查看次数
如果只有一个图像,Nivo滑块会隐藏上一个/下一个按钮
我想知道是否有任何使用Jquery Nivo Slider经验的人知道如果滑块只有1张图像你是否可以隐藏上一个/下一个按钮？我使用滑块的原因是因为我有一大堆其他图像通过分页加载到滑块中:P所以我只是想知道这是否可行？:)
推荐指数
解决办法
查看次数
响应背景,保持宽高比
我正在使用Malsup的Cycle 2在单独的div中创建一个带有相应滑动文本的背景幻灯片.我在这里有一些简单的标记,但似乎无法将图像裁剪掉,因此它总是100%的浏览器高度(如果你做一个薄窗口,你会看到底部的红色).
也许解决方案是jQuery或CSS - 我看到的一切建议height:auto在图像和父div上使用,但无济于事.
<div id="background" class="cycle-slideshow"
data-cycle-fx="scrollHorz"
data-cycle-timeout="2000"
data-cycle-slides="> div"
>
<div style="background:#fcc">
<img src="http://stoptraining.me/staged/IMG_1402.jpg">
</div>
<div style="background:#cfc">
<img src="http://stoptraining.me/staged/IMG_1403.jpg">
</div>
</div>
<div class="center">
<div id="text" class="cycle-slideshow"
data-cycle-fx="fade"
data-cycle-timeout="2000"
data-cycle-slides="> div"
>
<div>
<h2>Title</h2>
<p>Lorem ipsum dolor ...</p>
</div>
<div>
<p>Mel eu pertinax ...
</div>
<div>
<p>Utinam electram pertinacia ...
</div>
</div>
</div>
CSS:
body, html {
background: red;
padding: 0;
margin: 0;
height: auto;
width: 100%;
}
#background {
position: fixed;
width: 100%;
height: …推荐指数
解决办法
查看次数
轨道幻灯片定制下一个prev按钮链接左右箭头
我正在使用zurb基础轨道幻灯片.页面左右边缘的下一个和上一个按钮或链接是默认的黑色三角形.请看一下这个测试页面:
http://www.endsnore.com/_test1b/index.aspx
如何自定义下一个和上一个按钮或链接？如何添加自己的箭头代码:<和>或添加我自己的自定义箭头图像
像这些橙色左右箭头:http: //www.getaveo.com/index.aspx
请提供确切的代码示例.我会很感激.非常感谢你提前!
推荐指数
解决办法
查看次数
如何使用javascript制作简单的自动播放幻灯片？
我想制作一个简单的幻灯片,在页面加载时自动播放.到目前为止,这是我的代码:
HTML:
<div id="slideshow">
<div>
<img src="slide_1.png">
</div>
<div>
<img src="slide_2.png">
</div>
<div>
<img src="slide_3.png">
</div>
</div>
CSS:
#slideshow {
position: relative;
width: 900px;
height: 450px;
}
#slideshow > div {
position: absolute;
}
如果可能,有人可以提供一个JavaScript代码,它将自动播放幻灯片,以及使用幻灯片转换更改幻灯片,并在用户仍然在页面时重播无限次吗？此外,也许是右下角有数字的导航.这是我正在寻找的一个例子:(http://www.http://www.suprafootwear.com/).顶部的大型幻灯片是我想要的,唯一的区别是我希望过渡是线性滑动而不是淡入淡出过渡.请保持900px x 450px的尺寸.任何帮助表示赞赏.先感谢您!
推荐指数
解决办法
查看次数
带按钮栏的离子滑动框
我有一个带有4个幻灯片的离子滑动盒.您可以通过单击屏幕底部的按钮在幻灯片之间切换.当相应的幻灯片处于活动状态时,如何将类"活动"(使用AngularJS)添加到按钮？
例如,如果第二张幻灯片处于活动状态,我希望第二个按钮让课程"有效".当您移动到第三张幻灯片时(通过单击第三个按钮或滑动屏幕),类"活动"将从第二个按钮中删除并添加到第三个按钮.
这是我的代码:
menu.html
<ion-view view-title="Menu">
<ion-content class="padding">
<ion-slide-box on-slide-changed="activateTabs($index)">
<ion-slide>
<h1> Slide 1 </h1>
</ion-slide>
<ion-slide>
<h1> Slide 2 </h1>
</ion-slide>
<ion-slide>
<h1> Slide 3 </h1>
</ion-slide>
<ion-slide>
<h1> Slide 4 </h1>
</ion-slide>
</ion-slide-box>
</ion-content>
<div class="button-bar">
<a class="button button-stable" ng-click="slide(0)">1</a>
<a class="button button-stable" ng-click="slide(1)">2</a>
<a class="button button-stable" ng-click="slide(2)">3</a>
<a class="button button-stable" ng-click="slide(3)">4</a>
</div>
</ion-view>
MenuCtrl.js
myApp
.controller('MenuCtrl', function($scope, $stateParams, $ionicSlideBoxDelegate){
$scope.slide = function(to) {
$scope.current = to;
$ionicSlideBoxDelegate.slide(to);
}
});
推荐指数
解决办法
查看次数