Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Resize & preloading functions added

  • Loading branch information...
commit 7a68c5d3e760889bf23b3371418d06663b04c814 1 parent 5a23b6d
@samdunn samdunn authored
View
18 css/supersized.css
@@ -23,7 +23,7 @@ img {
display: block;
}
#supersized-loader {
- background: url(../img/progress.gif) no-repeat center center;
+ background: url('../img/progress.gif') no-repeat center center;
height: 60px;
left: 50%;
margin: -30px 0 0 -30px;
@@ -41,7 +41,6 @@ img {
position: fixed;
top: 0;
width: 100%;
- z-index: -999;
}
.supersized a {
display: block;
@@ -50,7 +49,6 @@ img {
}
.supersized img {
border: none;
- display: none;
height: auto;
outline: none;
position: relative;
@@ -76,23 +74,23 @@ img {
width: 100%;
z-index: -30;
}
-.supersized li.prevslide {
+.supersized li.ss-prev-slide {
z-index: -20;
}
-.supersized li.prevslide img {
+.supersized li.ss-prev-slide img {
display: inline-block;
}
-.supersized li.activeslide {
+.supersized li.ss-active-slide {
z-index: -10;
}
-.supersized li.activeslide img {
+.supersized li.ss-active-slide img {
display: inline-block;
}
-.supersized li.image-loading {
- background: #111111 url(../img/progress.gif) no-repeat center center;
+.supersized li.ss-loading {
+ background: #111111 url('../img/progress.gif') no-repeat center center;
height: 100%;
width: 100%;
}
-.supersized li.image-loading img {
+.supersized li.ss-loading img {
visibility: hidden;
}
View
15 css/supersized.less
@@ -27,7 +27,7 @@ img{
}
#supersized-loader{
- background: url(../img/progress.gif) no-repeat center center;
+ background: url('../img/progress.gif') no-repeat center center;
height: 60px;
left: 50%;
margin: -30px 0 0 -30px;
@@ -46,8 +46,7 @@ img{
position: fixed;
top: 0;
width: 100%;
- z-index: -999;
-
+ //z-index:-999;
a{
display: block;
height: 100%;
@@ -57,7 +56,7 @@ img{
// IMAGE FORMATTING
img{
border: none;
- display: none;
+ //display: none;
height: auto;
outline: none;
position: relative;
@@ -90,22 +89,22 @@ img{
width: 100%;
z-index: -30;
- &.prevslide{
+ &.ss-prev-slide{
z-index: -20;
img{
display:inline-block;
}
}
- &.activeslide{
+ &.ss-active-slide{
z-index: -10;
img{
display:inline-block;
}
}
- &.image-loading{
- background: #111 url(../img/progress.gif) no-repeat center center;
+ &.ss-loading{
+ background: #111 url('../img/progress.gif') no-repeat center center;
height: 100%;
width: 100%;
img{
View
BIN  img/progress.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
4 index.html
@@ -23,8 +23,8 @@
$('#main-image').supersized({
slides : [ // Slideshow Images
{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Refreshing Collection', url : 'http://google.com'},
- {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Refreshing Collection', url : 'http://google.com'},
- {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Refreshing Collection', url : 'http://google.com'}
+ {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Refreshing Collection', url : 'http://google.com'},
+ {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Refreshing Collection', url : 'http://google.com'}
]
});
var superInstance = $('#main-image').data("supersized");
View
228 js/jquery.supersized.4.0.0.js
@@ -17,7 +17,7 @@
function Supersized(element, options) {
// Define Element
- var base = this;
+ window.base = this;
base.$el = $(element);
base.el = element;
@@ -26,103 +26,187 @@
// Add Supersized to element
base.$el.append('<ul class="supersized"></ul>');
- base.$ss = base.$el.find('.supersized');
+ base.$ss = base.$el.find('.supersized'); // Set Supersized reference
- // Variables
- base.currentSlide = base.settings.start_slide - 1;
-
- // Build Slideshow
- base._buildSlide = 0;
- base._slideSet = '';
-
- while(base._buildSlide <= base.settings.slides.length-1){
- base._slideSet += '<li class="slide-'+base._buildSlide+'"></li>';
- base._buildSlide++;
- }
- base.$ss.html(base._slideSet);
-
-
- /*// Load Slide
- imageLink = (api.getField('url')) ? "href='" + api.getField('url') + "'" : "";
- var img = $('<img src="'+api.getField('image')+'"/>');
-
- var slideCurrent= base.el+' li:eq('+vars.current_slide+')';
- img.appendTo(slideCurrent).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading activeslide');
-
- img.load(function(){
- base._origDim($(this));
- base.resizeNow(); // Resize background image
- base.launch();
- if( typeof theme != 'undefined' && typeof theme._init == "function" ) theme._init(); // Load Theme
- });
- */
+ // General Variables
+ this.currentSlide = base.settings.start_slide - 1;
+ // Build Slideshow
+ // --------------------------------------------------
+ this._slideSet = '',
+ this._slideStack = [];
+ // Temp slide meta
+ var slideMeta = {
+ isLoaded: false,
+ origHeight: 0,
+ origWidth: 0,
+ ratio: 1
+ };
+
+ $.each(base.settings.slides, function(i){
+ base._slideStack.push(slideMeta); // Push placeholder to array
+ base._slideSet += '<li class="slide-'+ i +'"></li>';
+ });
- // Place Navigation Links
- base._buildMarkers = 0,
- base._slideSet = '',
- base._markers = '',
- base._markerContent
- base._thumbMarkers = '',
- base._thumbImage;
+ base.$ss.html(base._slideSet); // Add HTML for list items
+
+ // Adjust on Resize
+ $(window).on('resize', function(){
+ base.resizeImages();
+ });
- if(base._buildSlide == base.settings.start_slide - 1){
- /*// Slide links
- if (base.settings.slide_links)base._markers = base._markers+'<li class="slide-link-'+buildSlide+' current-slide"><a>'+base._markerContent+'</a></li>';
- // Slide Thumbnail Links
- if (base.settings.thumb_links){
- base.settings.slides[base._buildSlide].thumb ? base._thumbImage = base.settings.slides[base._buildSlide].thumb : base._thumbImage = base.settings.slides[base._buildSlide].image;
- base._thumbMarkers = base._thumbMarkers+'<li class="thumb'+base._buildSlide+' current-thumb"><img src="'+base._thumbImage+'"/></li>';
- };
- }else{
- // Slide links
- if (base.settings.slide_links) base._markers = base._markers+'<li class="slide-link-'+buildSlide+'" ><a>'+base._markerContent+'</a></li>';
- // Slide Thumbnail Links
- if (base.settings.thumb_links){
- base.settings.slides[base._buildSlide].thumb ? base._thumbImage = base.settings.slides[buildSlide].thumb : thumbImage = base.settings.slides[buildSlide].image;
- base._thumbMarkers = base._thumbMarkers+'<li class="thumb'+base._buildSlide+'"><img src="'+base._thumbImage+'"/></li>';
- };
- }
- base._buildSlide++;*/
- }
+ // Load Initial Slides
+ // --------------------------------------------------
+ base.loadSlide(2);
};
- $.fn.supersized = function(options) {
- return this.each(function(){
- var supersized = new Supersized($(this), options);
- $(this).data("supersized", supersized);
- });
- };
+
- // Supersized Prototype
- // --------------------------------------------------
+/* -------------------- Supersized Prototype -------------------- */
+
Supersized.prototype = {
// PUBLIC METHODS
- // ==============
- nameEl:function(){
- console.log(this.settings.slideshow);
+ // --------------------------------------------------
+
+ // Load new slide
+ loadSlide:function(slide){
+
+ var targetSlide = base.$ss.find('li').eq(slide).addClass('ss-loading');
+ var slideToLoad = $('<img/>').attr('src', this.settings.slides[slide].image);
+
+ slideToLoad.one('load', function(){
+
+ targetSlide.html(slideToLoad.hide()).removeClass('ss-loading');
+
+ // Add to slide stack
+ base._slideStack[slide].isLoaded = true;
+ base._slideStack[slide].origHeight = slideToLoad.height();
+ base._slideStack[slide].origWidth = slideToLoad.width();
+ base._slideStack[slide].ratio = (slideToLoad.height() / slideToLoad.width()).toFixed(2);
+
+ base.resizeImages();
+
+ slideToLoad.fadeIn();
+
+ }).each(function() { // When load isn't fired (cache/compatibility)
+ if(this.complete) $(this).trigger('load');
+ });
+
},
+ // Resize slides
+ resizeImages:function(targetSlide){
+
+ // Gather slideshow size
+ this.ssWidth = base.$el.width(),
+ this.ssHeight = base.$el.height(),
+ this.focusResize,
+ this.ratio,
+ this.offset;
+
+ //alert(base.$el.height());
+
+ $('img', this.$ss).each(function(){
+ if (base._slideStack[$(this).index()].isLoaded){ // make sure image loaded
+ base.ratio = base._slideStack[$(this).index()].ratio; // image ratio
+
+ base.focusResize = $(this); // image to be resized
+
+ base._resizeWidth();
+
+ // Horizontally Center
+ if (base.settings.horizontal_center) base.focusResize.css('left', (base.ssWidth - base.focusResize.width())/2);
+
+ // Vertically Center
+ if (base.settings.vertical_center) base.focusResize.css('top', (base.ssHeight - base.focusResize.height())/2);
+
+ }
+ });
+
+ },
// PRIVATE METHODS
- // ===============
- _resizeEvent:function(){
- console.log(this);
+ // --------------------------------------------------
+
+ _resizeWidth:function(min){
+
+ if (min){ // If min height needs to be considered
+ if(this.focusResize.width() < this.ssWidth || this.focusResize.width() < this.settings.min_width ){
+ if (this.focusResize.width() * this.ratio >= this.settings.min_height){
+ this.focusResize.width(this.settings.min_width);
+ this.focusResize.height(this.focusResize.width() * this.ratio);
+ }else{
+ base.resizeHeight();
+ }
+ }
+ }else{
+ if (this.settings.min_height >= this.ssHeight && !this.settings.fit_landscape){ // If min height needs to be considered
+ if (this.ssWidth * this.ratio >= this.settings.min_height || (this.ssWidth * this.ratio >= this.settings.min_height && this.ratio <= 1)){ // If resizing would push below min height or image is a landscape
+ this.focusResize.width(this.ssWidth);
+ this.focusResize.height(this.ssWidth * this.ratio);
+ } else if (this.ratio > 1){ // Else the image is portrait
+ this.focusResize.height(this.settings.min_height);
+ this.focusResize.width(this.focusResize.height() / this.ratio);
+ } else if (this.focusResize.width() < this.ssWidth) {
+ this.focusResize.width(this.ssWidth);
+ this.focusResize.height(this.focusResize.width() * this.ratio);
+ }
+ }else{ // Otherwise, resize as normal
+ this.focusResize.width(this.ssWidth);
+ this.focusResize.height(this.ssWidth * this.ratio);
+ }
+ }
+
+ },
+
+ _resizeHeight:function(min){
+ if (min){ // If minimum height needs to be considered
+ if(this.focusResize.height() < this.ssHeight){
+ if (this.focusResize.height() / this.ratio >= this.settings.min_width){
+ this.focusResize.height(this.settings.min_height);
+ this.focusResize.width(this.focusResize.height() / this.ratio);
+ }else{
+ base.resizeWidth(true);
+ }
+ }
+ }else{ // Otherwise, resized as normal
+ if (this.settings.min_width >= this.ssWidth){ // If minimum width needs to be considered
+ if (this.ssHeight / ratio >= this.settings.min_width || this.ratio > 1){ // If resizing would push below minimum width or image is a portrait
+ this.focusResize.height(this.ssHeight);
+ this.focusResize.width(this.ssHeight / this.ratio);
+ } else if (this.ratio <= 1){ // Else the image is landscape
+ this.focusResize.width(this.settings.min_width);
+ this.focusResize.height(this.focusResize.width() * this.ratio);
+ }
+ }else{ // Otherwise, resize as normal
+ this.focusResize.height(this.ssHeight);
+ this.focusResize.width(this.ssHeight / this.ratio);
+ }
+ }
}
};
+/* -------------------- End Supersized Prototype -------------------- */
+
+
+ $.fn.supersized = function(options) {
+ return this.each(function(){
+ var supersized = new Supersized($(this), options);
+ $(this).data("supersized", supersized);
+ });
+ };
// Default Options
@@ -150,8 +234,8 @@
fit_portrait : 1, // Portrait images will not exceed browser height
min_width : 0, // Min width allowed (in pixels)
min_height : 0, // Min height allowed (in pixels)
- horizontal_center : 1, // Horizontally center background
- vertical_center : 1, // Vertically center background
+ horizontal_center : 0, // Horizontally center background
+ vertical_center : 0, // Vertically center background
// Components
slide_links : 1, // Individual links for each slide (Options: false, 'num', 'name', 'blank')
View
1  theme/obsidian/obsidian.css
@@ -13,7 +13,6 @@
-------------------------------------------------- */
body {
- background-image: url('http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg');
background-size: cover;
background-repeat: no-repeat;
}
View
3  theme/obsidian/obsidian.less
@@ -16,7 +16,7 @@
// DUMMY STYLES
body{
- background-image:url('http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg');
+ //background-image:url('http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg');
background-size: cover;
background-repeat: no-repeat;
}
@@ -26,7 +26,6 @@ body{
text-rendering: optimizeLegibility;
}
-
// CONTROL BAR
// --------------------------------------
#ss-control-bar{
Please sign in to comment.
Something went wrong with that request. Please try again.