将文本添加到幻灯片-超大jQuery
[英]add text to slide - supersized jquery
问题描述
我正在尝试将具有信息的DIV添加到Supersized插件的每张幻灯片中。 我正在搜索信息，但我发现这个“ 超大尺寸”显示根据幻灯片的一个div （我问了一个新问题，因为它来自去年）。
我想在每张幻灯片中添加一些文本，所以这是我的代码：
<head>
....
<script type="text/javascript">
jQuery(function($){
$.supersized({
// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 0, // Slideshow starts playing automatically
start_slide : 1, // Start slide (0 is random)
stop_loop : 0, // Pauses slideshow on last slide
random : 0, // Randomize slide order (Ignores start slide)
slide_interval : 3000, // Length between transitions
transition : 6, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 1000, // Speed of transition
new_window : 1, // Image links open in new window/tab
pause_hover : 1, // Pause slideshow on hover
keyboard_nav : 1, // Keyboard navigation on/off
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, // Disables image dragging and right click with Javascript
// Size & Position
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
vertical_center : 1, // Vertically center background
horizontal_center : 1, // Horizontally center background
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, // Portrait images will not exceed browser height
fit_landscape : 0, // Landscape images will not exceed browser width
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
thumb_links : 1, // Individual thumb links for each slide
thumbnail_navigation : 0, // Thumbnail navigation
slides : [ // Slideshow Images
{image : 'img/1.jpg', title : '', thumb : '', url : ''},
{image : 'img/2.jpg', title : '', thumb : '', url : ''},
{image : 'img/3.jpg', title : '', thumb : '', url : ''},
{image : 'img/4.jpg', title : '', thumb : '', url : ''},
{image : 'img/5.jpg', title : '', thumb : '', url : ''}
],
// Theme Options
progress_bar : 1, // Timer for each slide
mouse_scrub : 0
});
});
</script>
</head>
<body>
<div id="txtslide">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
在slideshow / theme / supersized.shutter.js中，我复制了上面提到的示例
/* After Slide Transition
----------------------------*/
afterAnimation : function(){
if (api.options.progress_bar && !vars.is_paused) theme.progressBar(); // Start progress bar
// current slide is #3
if (vars.current_slide == 3) {
// Get contents of the 'testfield' field
var testfield = api.getField(testfield);
// Set the HTML content of testfielddiv to the value of testfield
if (testfield != "undefined") {
$("#txtslide").html(testfield);
// Show testfielddiv (which was hidden for all other slides)
// The 'fast' argument is for a simple animation; it can be omitted
// to show without animation, or changed to 'slow' or a number in ms
$("#txtslide").show('fast');
}
}
else {
// Hide testfielddiv for any other slide
$("#txtslide").hide('fast');
}
但是此示例无法正常工作，也许我做错了事，希望您能为我提供帮助，在此先感谢。
2 个解决方案
解决方案1
1 2014-03-29 20:34:52
所以我知道这是一个旧线程，但是我也想这样做，并且找到了一个很简单的答案。 我以为我会发帖，以防其他人需要同样的帮助。
如果您查看超大尺寸的html页面！ 提供的内容时，您会在文档底部注意到所有div，其中包含用于导航，缩略图等的按钮。其中之一标记为“此处显示幻灯片标题”
如果您只是将该div并将其移动到要放置在html文档中的位置，则可以使用“幻灯片图像”区域中的“标题”属性。 CSS中使用的ID是“ #slidecaption”。 （可能已经在随附的CSS文档中进行了样式化，如果您不希望样式冲突，请去查找它）。
另外，该“标题”区域可与常规html标签一起使用，因此请使用<p> ， <br>或其中想要的其他任何内容来帮助控制其样式。
希望这可以帮助！
解决方案2
0 2013-05-02 20:58:20
您走对了路。
我已经做到了！
在幻灯片数组中
{
image : 'one.jpg',
title : '<a href="url"><div id="slidefillimage"> <b>blablabla and blablabla</div></a>',
thumb : 'url photo',
url : ''
}
这是在supersized.shutter.css中，我修改了slidecaption
#slidecaption {
position:absolute;
height: 80px;
top: 300px;
bottom:0;
right: 0;
overflow: hidden;
text-indent: 10px;
text-align:left;
color: #FFFFFF;
font: 400 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0 0 0 0;
line-height: 30px;
}
并为新的div输入一个新条目
#slidefillimage {
height: 60px;
min-width: 150px;
max-width: 900px;
width: expression(document.body.clientWidth < 152? "150px" : document.body.clientWidth > 902? "900px" : "auto");
text-indent: 10px;
color: #FFFFFF;
background-color: #00517D;
font: 400 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0 0 0 0;
line-height: 30px;
}
这对我来说很完美！
超大（jQuery插件）仅加载第一张幻灯片
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.