Skip to content

Commit d857c46

Browse files
suabosuabo
committed
added slide_container support
Now you can read in the slides from the dom by a jQuery selector in options named slide_container. see demo_slide_container.html ... this post fixed th issue (buildinternet#177) i opend
1 parent 2ccedfd commit d857c46

File tree

2 files changed

+161
-0
lines changed

2 files changed

+161
-0
lines changed

‎slideshow/demo_slide_container.html

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
3+
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4+
5+
<!--
6+
Supersized - Fullscreen Slideshow jQuery Plugin
7+
Version : 3.2.7
8+
Site : www.buildinternet.com/project/supersized
9+
10+
Author : Sam Dunn
11+
Company : One Mighty Roar (www.onemightyroar.com)
12+
License : MIT License / GPL License
13+
-->
14+
15+
<head>
16+
17+
<title>Supersized - Full Screen Background Slideshow jQuery Plugin</title>
18+
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
19+
20+
<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
21+
<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />
22+
23+
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
24+
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
25+
26+
<script type="text/javascript" src="js/supersized.3.2.7.js"></script>
27+
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
28+
29+
<script type="text/javascript">
30+
31+
jQuery(function($){
32+
33+
$.supersized({
34+
35+
// Functionality
36+
slideshow : 1, // Slideshow on/off
37+
autoplay : 1, // Slideshow starts playing automatically
38+
start_slide : 1, // Start slide (0 is random)
39+
stop_loop : 0, // Pauses slideshow on last slide
40+
random : 0, // Randomize slide order (Ignores start slide)
41+
slide_interval : 3000, // Length between transitions
42+
transition : 6, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
43+
transition_speed : 1000, // Speed of transition
44+
new_window : 1, // Image links open in new window/tab
45+
pause_hover : 0, // Pause slideshow on hover
46+
keyboard_nav : 1, // Keyboard navigation on/off
47+
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
48+
image_protect : 1, // Disables image dragging and right click with Javascript
49+
50+
// Size & Position
51+
min_width : 0, // Min width allowed (in pixels)
52+
min_height : 0, // Min height allowed (in pixels)
53+
vertical_center : 1, // Vertically center background
54+
horizontal_center : 1, // Horizontally center background
55+
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
56+
fit_portrait : 1, // Portrait images will not exceed browser height
57+
fit_landscape : 0, // Landscape images will not exceed browser width
58+
59+
// Components
60+
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
61+
thumb_links : 1, // Individual thumb links for each slide
62+
thumbnail_navigation : 0, // Thumbnail navigation
63+
slide_container : '#demo-pics',
64+
65+
// Theme Options
66+
progress_bar : 1, // Timer for each slide
67+
mouse_scrub : 0
68+
69+
});
70+
});
71+
72+
</script>
73+
74+
</head>
75+
76+
<style type="text/css">
77+
ul#demo-block{ margin:0 15px 15px 15px; }
78+
ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; float:left; clear:both; color:#aaa; background:url('img/bg-black.png'); font:11px Helvetica, Arial, sans-serif; }
79+
ul#demo-block li a{ color:#eee; font-weight:bold; }
80+
</style>
81+
82+
<body>
83+
84+
<ul id="demo-pics">
85+
<li><img src="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg" title="Image Credit: Maria Kazvan" thumb="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg" url="http://www.nonsensesociety.com/2011/04/maria-kazvan/" /></li>
86+
<li><img src="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg" title="Image Credit: Maria Kazvan" thumb="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg" url="http://www.nonsensesociety.com/2011/04/maria-kazvan/" /></li>
87+
<li><img src="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg" title="Image Credit: Maria Kazvan" thumb="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg" url="http://www.nonsensesociety.com/2011/04/maria-kazvan/" /></li>
88+
<li><img src="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg" title="Image Credit: Colin Wojno" thumb="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg" url="http://www.nonsensesociety.com/2011/03/colin/" /></li>
89+
<li><img src="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg" title="Image Credit: Colin Wojno" thumb="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg" url="http://www.nonsensesociety.com/2011/03/colin/" /></li>
90+
<li><img src="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg" title="Image Credit: Colin Wojno" thumb="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg" url="http://www.nonsensesociety.com/2011/03/colin/" /></li>
91+
<li><img src="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg" title="Image Credit: Brooke Shaden" thumb="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg" url="http://www.nonsensesociety.com/2011/06/brooke-shaden/" /></li>
92+
<li><img src="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg" title="Image Credit: Brooke Shaden" thumb="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg" url="http://www.nonsensesociety.com/2011/06/brooke-shaden/" /></li>
93+
<li><img src="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg" title="Image Credit: Brooke Shaden" thumb="http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg" url="http://www.nonsensesociety.com/2011/06/brooke-shaden/" /></li>
94+
</ul>
95+
96+
<!--Demo styles (you can delete this block)-->
97+
98+
<ul id="demo-block">
99+
<li><a href="http://buildinternet.com/project/supersized/" target="_blank"><img src="img/supersized-logo.png"/></a></li>
100+
<li>Photographers: <a href="http://cargocollective.com/mariakazvan" target="_blank">Maria Kazvan</a>, <a href="http://colindub.com" target="_blank">Colin Wojno</a>, &amp; <a href="http://brookeshaden.com/" target="_blank">Brooke Shaden</a></li>
101+
</ul>
102+
103+
<!--End of styles-->
104+
105+
<!--Thumbnail Navigation-->
106+
<div id="prevthumb"></div>
107+
<div id="nextthumb"></div>
108+
109+
<!--Arrow Navigation-->
110+
<a id="prevslide" class="load-item"></a>
111+
<a id="nextslide" class="load-item"></a>
112+
113+
<div id="thumb-tray" class="load-item">
114+
<div id="thumb-back"></div>
115+
<div id="thumb-forward"></div>
116+
</div>
117+
118+
<!--Time Bar-->
119+
<div id="progress-back" class="load-item">
120+
<div id="progress-bar"></div>
121+
</div>
122+
123+
<!--Control Bar-->
124+
<div id="controls-wrapper" class="load-item">
125+
<div id="controls">
126+
127+
<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
128+
129+
<!--Slide counter-->
130+
<div id="slidecounter">
131+
<span class="slidenumber"></span> / <span class="totalslides"></span>
132+
</div>
133+
134+
<!--Slide captions displayed here-->
135+
<div id="slidecaption"></div>
136+
137+
<!--Thumb Tray button-->
138+
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
139+
140+
<!--Navigation-->
141+
<ul id="slide-list"></ul>
142+
143+
</div>
144+
</div>
145+
146+
</body>
147+
</html>

‎slideshow/js/supersized.3.2.7.js

+14
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,23 @@
3939
$.supersized.vars.options = $.extend({},$.supersized.defaultOptions, $.supersized.themeOptions, options);
4040
base.options = $.supersized.vars.options;
4141

42+
if(base.options.slide_container != null) base._getSlides();
4243
base._build();
4344
};
4445

46+
base._getSlides = function() {
47+
base.options.slides = [];
48+
var container = base.options.slide_container;
49+
$.each($(container+' img'), function(i, v) {
50+
var slide_image = $(v).attr('src');
51+
var slide_title = $(v).attr('title');
52+
var slide_thumb = $(v).attr('thumb');
53+
var slide_url = $(v).attr('url');
54+
base.options.slides.push({image : slide_image, title : slide_title, thumb : slide_thumb, url : slide_url});
55+
});
56+
$(container).remove();
57+
};
58+
4559

4660
/* Build Elements
4761
----------------------------*/

0 commit comments

Comments
 (0)