Skip to content

Commit

Permalink
added slide_container support
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@suabo
suabo committed May 26, 2014
1 parent 2ccedfd commit d857c46
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 0 deletions.
147 changes: 147 additions & 0 deletions slideshow/demo_slide_container.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!--
Supersized - Fullscreen Slideshow jQuery Plugin
Version : 3.2.7
Site : www.buildinternet.com/project/supersized
Author : Sam Dunn
Company : One Mighty Roar (www.onemightyroar.com)
License : MIT License / GPL License
-->

<head>

<title>Supersized - Full Screen Background Slideshow jQuery Plugin</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>

<script type="text/javascript" src="js/supersized.3.2.7.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>

<script type="text/javascript">

jQuery(function($){

$.supersized({

// Functionality
slideshow : 1, // Slideshow on/off
autoplay : 1, // 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 : 0, // 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
slide_container : '#demo-pics',

// Theme Options
progress_bar : 1, // Timer for each slide
mouse_scrub : 0

});
});

</script>

</head>

<style type="text/css">
ul#demo-block{ margin:0 15px 15px 15px; }
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; }
ul#demo-block li a{ color:#eee; font-weight:bold; }
</style>

<body>

<ul id="demo-pics">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</ul>

<!--Demo styles (you can delete this block)-->

<ul id="demo-block">
<li><a href="http://buildinternet.com/project/supersized/" target="_blank"><img src="img/supersized-logo.png"/></a></li>
<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>
</ul>

<!--End of styles-->

<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>

<!--Arrow Navigation-->
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>

<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>

<!--Time Bar-->
<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>

<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">

<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>

<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>

<!--Slide captions displayed here-->
<div id="slidecaption"></div>

<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>

<!--Navigation-->
<ul id="slide-list"></ul>

</div>
</div>

</body>
</html>
14 changes: 14 additions & 0 deletions slideshow/js/supersized.3.2.7.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,23 @@
$.supersized.vars.options = $.extend({},$.supersized.defaultOptions, $.supersized.themeOptions, options);
base.options = $.supersized.vars.options;

if(base.options.slide_container != null) base._getSlides();
base._build();
};

base._getSlides = function() {
base.options.slides = [];
var container = base.options.slide_container;
$.each($(container+' img'), function(i, v) {
var slide_image = $(v).attr('src');
var slide_title = $(v).attr('title');
var slide_thumb = $(v).attr('thumb');
var slide_url = $(v).attr('url');
base.options.slides.push({image : slide_image, title : slide_title, thumb : slide_thumb, url : slide_url});
});
$(container).remove();
};


/* Build Elements
----------------------------*/
Expand Down

0 comments on commit d857c46

Please sign in to comment.