Commit ad938f79 authored by Eric Rasmussen's avatar Eric Rasmussen
Browse files

Add local copy of new WDN Carousel/Blueberry plugin since latest updates...

Add local copy of new WDN Carousel/Blueberry plugin since latest updates developed against aren't yet released in WDN dependents
parent f56c1b0f
/*
* jQuery Blueberry Slider v0.5 BETA
* Originally created and developed by: http://marktyrrell.com/labs/blueberry/
* Forked and expanded by: https://github.com/smeranda/
*
* Copyright (C) 2011, Mark Tyrrell <me@marktyrrell.com>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
#wdn_Carousel { margin: 0 auto; position: relative; }
#wdn_Carousel .slides {
display: block;
position: relative;
overflow: hidden;
padding: 0;
margin: 0;
}
#wdn_Carousel .slides > li {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: block;
width: 100%;
max-width: none;
vertical-align: bottom;
line-height: 1;
padding: 0;
margin: 0;
}
#wdn_Carousel .slides > li > img, #wdn_Carousel .slides > li > a {
display: block;
}
#wdn_Carousel .slides > li > img + div, #wdn_Carousel .slides > li > a + div {
position: absolute;
bottom: 0;
left: 0;
width:100%;
font-size: 100%;
line-height: 1.2;
}
#wdn_Carousel .slides > li > img + div *, #wdn_Carousel .slides > li > a + div * {
font-size: 100%;
}
#wdn_Carousel .slides > li > img, #wdn_Carousel .slides > li > a > img, #wdn_Carousel .slides > li video, #wdn_Carousel .slides > li audio {
width: 100%;
max-width: 100%;
}
#wdn_Carousel .slides > li > div img {
width: auto;
max-width: 100%;
}
#wdn_Carousel .slides > li.active { display: block; position: relative; }
#wdn_Carousel .crop > li > img { width: auto; }
/* For the pagination between slides (the numbers) */
#wdn_Carousel .pagerWrapper {
text-align: center;
}
#wdn_Carousel .pager {
height: auto;
display: inline-block;
text-align: center;
margin: -1px auto 10px auto;
border-radius: 0 0 5px 5px;
border: 1px solid #679cbb;
border-top-color: #85b9d7;
border-left-color: #85b9d7;
background: #A7CEE5; /* Old browsers */
background: -moz-linear-gradient(top, #b1daf2 0%, #95b8cc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b1daf2), color-stop(100%,#95b8cc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b1daf2 0%,#95b8cc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b1daf2 0%,#95b8cc 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #b1daf2 0%,#95b8cc 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1daf2', endColorstr='#95b8cc',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #b1daf2 0%,#95b8cc 100%); /* W3C */
opacity: 0.3;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
padding:0;
}
#wdn_Carousel:hover .pager{
opacity: 1;
}
#wdn_Carousel .pager > li {
display: inline-block;
font-weight: bold;
text-shadow: 0px 0px 2px #16425c;
border-right: 1px solid #9ad0eb;
line-height: 1;
zoom:1; *display:inline; /*IE Hacks*/
}
#wdn_Carousel .pager > li a {
display: block;
padding: 5px 8px;
color: #fff;
font-weight:bold;
}
#wdn_Carousel .pager > li.nav a {
font-size: 80%;
color: #c7e3ea;
}
#wdn_Carousel .pager > li a:hover {
text-decoration: none;
}
#wdn_Carousel .pager > li.active {
background: #446999; /* Old browsers */
background: -moz-radial-gradient(50% 100%, circle cover, rgba(157, 218, 233, 0.5), rgba(255, 255, 255, 0) 38%), -moz-linear-gradient(top, #446999 0%, #5189b5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#446999), color-stop(100%,#5189b5)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(50% 100%, circle cover, rgba(157, 218, 233, 0.5), rgba(255, 255, 255, 0) 38%), -webkit-linear-gradient(top, #446999 0%,#5189b5 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(50% 100%, circle cover, rgba(157, 218, 233, 0.5), rgba(255, 255, 255, 0) 38%), -o-linear-gradient(top, #446999 0%,#5189b5 100%); /* Opera11.10+ */
background: -ms-radial-gradient(50% 100%, circle cover, rgba(157, 218, 233, 0.5), rgba(255, 255, 255, 0) 38%), -ms-linear-gradient(top, #446999 0%,#5189b5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#446999', endColorstr='#5189b5',GradientType=0 ); /* IE6-9 */
background: radial-gradient(50% 100%, circle cover, rgba(157, 218, 233, 0.5), rgba(255, 255, 255, 0) 38%), linear-gradient(top, #446999 0%,#5189b5 100%); /* W3C */
color: #fff;
}
/* WDN Overrides */
#wdn_Carousel .slides div p {margin:0;}
#maincontent #wdn_Carousel a:focus {color:#fff !important;}
@media only screen
and (min-device-width: 320px)
and (max-device-width : 480px) {
#wdn_Carousel {
overflow: initial;
}
#wdn_Carousel .wdn_Carousel_slides {
height: auto !important;
}
#wdn_Carousel .wdn_Carousel_slides li div p {
position: static;
background: #e7e7e7;
font-size:0.8em;
line-height:1em;
/* margin-top:-5px; We want this for new proxy? */
}
#wdn_Carousel .wdn_Carousel_slides li div p span {
margin-left:0.5em;
font-size:0.8em;
}
#wdn_Carousel .pager {
padding: 0;
margin-bottom: 20px;
}
}
\ No newline at end of file
/*
* jQuery Blueberry Slider v0.5 BETA
* Originally created and developed by: http://marktyrrell.com/labs/blueberry/
* Forked and expanded by: https://github.com/smeranda/
*
* Copyright (C) 2011, Mark Tyrrell <me@marktyrrell.com>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
(function($){
$.fn.extend({
blueberry: function(options) {
//default values for plugin options
var defaults = {
interval: 5000,
duration: 500,
lineheight: 1,
height: 'auto', //reserved
hoverpause: true,
clickstop: true,
pager: true,
nav: true, //reserved
keynav: true,
nav: true
};
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
var obj = $(this);
//store the slide and pager lis
var slides = $('.slides > li', obj);
var pager = $('.pager li', obj);
//set initial current and next slide index values
var current = 0;
var next = current+1;
//get height and width of initial slide image and calculate size ratio
var slideHeight = slides.eq(current).height();
var slideWidth = slides.eq(current).width();
var slideRatio = slideWidth/slideHeight;
//define vars for setsize function
var sliderWidth = 0;
var cropHeight = 0;
//hide all slides, fade in the first, add active class to first slide
slides.hide().eq(current).fadeIn(o.duration).addClass('active');
//build pager if it doesn't already exist and if enabled
if(pager.length) {
pager.eq(current).addClass('active');
} else if(o.pager){
obj.append('<div class="pagerWrapper"><ul class="pager"></ul></div>');
slides.each(function(index) {
$('.pager', obj).append('<li><a href="#">'+(index+1)+'</a></li>');
});
pager = $('.pager li', obj);
pager.eq(current).addClass('active');
}
//Add the left/right nav if enabled
if(o.nav && o.pager){
pager.parent().prepend('<li class="prev nav"><a href="#">&#9664;</a></li>');
pager.parent().append('<li class="next nav"><a href="#">&#9654;</a></li>');
}
//rotate to selected slide on pager click
if(pager){
$('.pager li:not(.nav) a').click(function() {
//stop the timer
//set the slide index based on pager index
if(o.nav) { //if we have nav, the index will be a bit off
next = $(this).parent().index() - 1;
} else {
next = $(this).parent().index();
}
//rotate the slides
rotate();
return false;
});
}
//primary function to change slides
var rotate = function(){
//fade out current slide and remove active class,
//fade in next slide and add active class
slides.eq(current).fadeOut(o.duration).removeClass('active')
.end().eq(next).fadeIn(o.duration).addClass('active').queue(function(){
//add rotateTimer function to end of animation queue
//this prevents animation buildup caused by requestAnimationFrame
//rotateTimer starts a timer for the next rotate
rotateTimer();
$(this).dequeue();
});
//update pager to reflect slide change
if(pager){
pager.eq(current).removeClass('active')
.end().eq(next).addClass('active');
}
//update current and next vars to reflect slide change
//set next as first slide if current is the last
current = next;
next = current >= slides.length-1 ? 0 : current+1;
};
//rotate the slide on direction click
if(o.nav){
$('#wdn_Carousel .nav a').click(function () {
if($(this).parent().hasClass('next')) {
rotate();
} else {
next = $('.pager .active').index() - 2;
rotate();
}
return false;
});
};
//create a timer to control slide rotation interval
var rotateTimer = function(){
clearTimeout(obj.play);
obj.play = setTimeout(function(){
//trigger slide rotate function at end of timer
rotate();
}, o.interval);
};
//start the timer for the first time
rotateTimer();
//pause the slider on hover
//disabled by default due to bug
if(o.hoverpause){
slides.hover(function(){
//stop the timer in mousein
clearTimeout(obj.play);
}, function(){
//start the timer on mouseout
rotateTimer();
});
}
//stop the slides from progressing if one is clicked.
if(o.clickstop){
slides.click(function(){
WDN.log('slide clicked');
clearTimeout(obj.play);
slides.unbind('mouseenter mouseleave');
});
}
//calculate and set height based on image width/height ratio and specified line height
var setsize = function(){
sliderWidth = $('.slides', obj).width();
cropHeight = Math.floor(((sliderWidth/slideRatio)/o.lineheight))*o.lineheight;
$('.slides', obj).css({height: cropHeight});
};
//set the size of the slider
setsize();
//bind setsize function to window resize event
$(window).resize(function(){
setsize();
});
//Add keyboard navigation
if(o.keynav){
$(document).keyup(function(e){
switch (e.which) {
case 39: case 32: //right arrow & space
rotate();
break;
case 37: // left arrow
next = $('.pager .active').index() - 2;
rotate();
break;
}
});
}
});
}
});
})(WDN.jQuery);
\ No newline at end of file
/*
*
* Function to create a carousel. See http://www1.unl.edu/wdn/wiki/Carousel for more details
*
*/
WDN.carousel = (function() {
return {
supportJSON : false,
imageHeight : function() {
return WDN.jQuery('#wdn_Carousel img').height();
},
imageWidth : function() {
return WDN.jQuery('#wdn_Carousel img').width();
},
initialize : function() {
WDN.log('carousel initialized');
WDN.loadCSS('blueberry/blueberry.css');
WDN.loadJQuery(function(){
WDN.carousel.cleanUpDeprecated();
WDN.jQuery('#wdn_Carousel img').removeAttr('width').removeAttr('height');
if (WDN.carousel.supportJSON) {
WDN.loadJS(WDN.carousel.supportJSON);
} else {
WDN.carousel.start();
}
});
},
cleanUpDeprecated : function() {
if (!WDN.jQuery('#wdn_Carousel .slides').length) {
WDN.jQuery('#wdn_Carousel > ul:first > li > a, #wdn_Carousel > ul:first > li > img').addClass('toMove');
WDN.jQuery('#wdn_Carousel > ul:first').addClass('slides').children('li').each(function() {
WDN.jQuery(this).wrapInner('<div />');
WDN.jQuery(this).find('.toMove').insertBefore(WDN.jQuery(this).children('div')).removeClass('toMove');
});
if (WDN.jQuery('#wdn_Carousel').parent('.zenbox').length) {
WDN.jQuery('#wdn_Carousel').unwrap();
}
}
},
start : function() {
WDN.loadJS('blueberry/blueberry.v0.5.js', function() {
WDN.jQuery('#wdn_Carousel').blueberry();
});
},
buildFoundation : function(data) { //we've grabbed the JSON
//now find out how many items exist
totalObjects = data.length;
startingObject = Math.floor(Math.random()*(totalObjects + 1)); //we'll randomly start at any given object.
remainingObjects = (WDN.carousel.numberToDisplay -1) - (totalObjects - startingObject); //this will let us know how many remain to be looped through. We subtract 1 from the numberToDisplay because we expect one to already be on the page.
WDN.log('remainingObjects: '+remainingObjects);
for (var i=startingObject; i<totalObjects; i++) { //loop through the objects starting with the random one
WDN.jQuery("#wdn_Carousel ul").prepend('<li><div><img src="'+data[i].img+'" height="'+WDN.carousel.imageHeight()+'" width="'+WDN.carousel.imageWidth()+'" /><p>'+data[i].title +'<a href="'+data[i].link+'">'+data[i].linktext+'</a></p></div>');
if (i>=(startingObject + WDN.carousel.numberToDisplay - 2)) {
break;
}
}
if (remainingObjects > 0) { //now let's go back to the begining and grab more objects to fill in for the remaining spots.
for (var j=0; j<remainingObjects; j++) {
WDN.jQuery("#wdn_Carousel ul").prepend('<li><div><img src="'+data[j].img+'" height="'+WDN.carousel.imageHeight()+'" width="'+WDN.carousel.imageWidth()+'" /><p>'+data[j].title +'<a href="'+data[j].link+'">'+data[j].linktext+'</a></p></div>');
}
}
WDN.carousel.start();
}
};
})();
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment