将文本添加到幻灯片-超大jQuery
[英]add text to slide - supersized jquery
问题描述
I'm trying to add a DIV with information to each slide from Supersized plugin. 
我正在尝试将具有信息的DIV添加到Supersized插件的每张幻灯片中。 I was searching for information and I found this Supersized, show a div depending on the slide , (I asked a new question about it, because it is from the last year). 我正在搜索信息，但我发现这个“ 超大尺寸”显示根据幻灯片的一个div （我问了一个新问题，因为它来自去年）。
I would like to add some text to each slide, so here is my code: 我想在每张幻灯片中添加一些文本，所以这是我的代码：
<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>
and in slideshow/theme/supersized.shutter.js I copied the example what I mention above 在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');
}
But this example it's not working, maybe I am doing something wrong, hope you can help me, thanks in advance. 但是此示例无法正常工作，也许我做错了事，希望您能为我提供帮助，在此先感谢。
2 个解决方案
解决方案1
1 2014-03-29 20:34:52
so I know that this is an old thread, but I wanted to do this too and found a pretty easy answer. 所以我知道这是一个旧线程，但是我也想这样做，并且找到了一个很简单的答案。 I thought I'd post incase others come along needing the same help. 我以为我会发帖，以防其他人需要同样的帮助。
If you look at the html page that Supersized! 如果您查看超大尺寸的html页面！ provides, you'll notice at the bottom of the document all the divs containing the buttons for navigation, thumbnails, etc. One of those is labeled "Slide Captions Displayed Here" 提供的内容时，您会在文档底部注意到所有div，其中包含用于导航，缩略图等的按钮。其中之一标记为“此处显示幻灯片标题”
If you just take that div and move it where you want it placed within your html document, you can just use the "title" attribute within the "slideshow images" area. 如果您只是将该div并将其移动到要放置在html文档中的位置，则可以使用“幻灯片图像”区域中的“标题”属性。 The id to use in your CSS is "#slidecaption". CSS中使用的ID是“ #slidecaption”。 (Probably already stylized in an included CSS document so go find it if you don't want your styles to conflict). （可能已经在随附的CSS文档中进行了样式化，如果您不希望样式冲突，请去查找它）。
Also, that "title" area works with regular html tags, so use <p> , <br> , or anything else you want within there to help control the style for it. 另外，该“标题”区域可与常规html标签一起使用，因此请使用<p> ， <br>或其中想要的其他任何内容来帮助控制其样式。
hope this helps! 希望这可以帮助！
解决方案2
0 2013-05-02 20:58:20
you are on the right way. 您走对了路。
I have made it like this! 我已经做到了！
in the slide array 在幻灯片数组中
{
image : 'one.jpg',
title : '<a href="url"><div id="slidefillimage"> <b>blablabla and blablabla</div></a>',
thumb : 'url photo',
url : ''
}
and this in the supersized.shutter.css, i modified the slidecaption 这是在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;
}
and make an new entry for the new div 并为新的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;
}
This works perfect for me! 这对我来说很完美！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.