"
Team:Potsdam Bioware/javascript
From 2012.igem.org
(Difference between revisions)
| Line 120: | Line 120: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| - | function simpleSlide(e){jQuery(function($){var | + | |
| + | // | ||
| + | // | ||
| + | // simpleSlide 1.6 | ||
| + | // | ||
| + | // website:http://www.simplesli.de/ | ||
| + | // author: David Drew | ||
| + | // email: david@ddrewdesign.com | ||
| + | // | ||
| + | // | ||
| + | // simpleSlide is a jQuery plugin that addresses the problem of lack of designer control over | ||
| + | // their slideshow plugin. The philosophy was to create a plugin that would take care of the | ||
| + | // mundane issues of instantiating a slideshow plugin, but make it easy for a designer to | ||
| + | // manipulate the parts of the process that they would want control over, such as visual | ||
| + | // treatment, integration and additional functionality. | ||
| + | // | ||
| + | // Parameters | ||
| + | // ---------- | ||
| + | // | ||
| + | // simpleSlide is instantiated, at minimum, like this: | ||
| + | // | ||
| + | // simpleSlide(); | ||
| + | // | ||
| + | // Upon activating this function, simpleSlide goes into your DOM and finds several key | ||
| + | // elements. The simpleSlide HTML structure (and key elements) will look like this: | ||
| + | // | ||
| + | // <div class="simpleSlide-window" rel="group_name"> | ||
| + | // <div class="simpleSlide-tray" rel="group_name"> | ||
| + | // <div class="simpleSlide-slide" rel="group_name"> | ||
| + | // /* Individual slide content. If content is merely an image, simpleSlide will | ||
| + | // * automatically configure each slide to accommodate the slide. If you have | ||
| + | // * opted to create content that doesn't have an apparent width or height, it | ||
| + | // * it may be in your best interest to give this content a defined width and | ||
| + | // * height. You do not, however, need to define the "simpleSlide-slide" class' | ||
| + | // * width and height. The function will take care of that for you. | ||
| + | // */ | ||
| + | // </div> | ||
| + | // </div> | ||
| + | // </div> | ||
| + | // | ||
| + | // The user may also instantiate a graphical representative element vis-a-vis the simpleSlide | ||
| + | // status element. This element is entirely optional, and will or will not be placed based on the | ||
| + | // user's desire to place the following elements into their HTML: | ||
| + | // | ||
| + | // <div class="simpleSlideStatus-tray" rel="group_name"> | ||
| + | // <div class="simpleSlideStatus-window" rel="group_name"></div> | ||
| + | // </div> | ||
| + | // | ||
| + | // Please visit http://www.simplesli.de and click on "features" for more configuration information. | ||
| + | // | ||
| + | // It should be noted, however, that after simpleSlide() has processed this structure, each slide | ||
| + | // will house an "alt" attribute with an integer as its value. This integer (counting up from '1') | ||
| + | // represents that slide's "page" placement among the slides in the window. This is to help the | ||
| + | // designer set up functionality that allows page jumping. | ||
| + | // | ||
| + | // The buttons that control the slideshow may be used in whatever manner you wish, and anywhere | ||
| + | // in the site's structure that you wish to place them. They only must have the same "rel" as | ||
| + | // the window (and accompanying elements) you wish for them to control. simpleSlide() automatically | ||
| + | // treats them as clickable regions. "jump-to" is special in that you also have to pass the | ||
| + | // desired "jump-to" page through the "alt" attribute. | ||
| + | // | ||
| + | // <div class="left-button" rel="group_name"></div> | ||
| + | // <div class="right-button" rel="group_name"></div> | ||
| + | // <div class="jump-to" rel="group_name" alt="1"></div> | ||
| + | // | ||
| + | // The user is also allowed several options that they may customize. They are instantiated like this: | ||
| + | // | ||
| + | // simpleSlide({ | ||
| + | // 'status_width': 20, // Integer. Sets the width of the status slideshow's window element. | ||
| + | // 'status_color_inside': '#000', // String. Sets color of status window element. | ||
| + | // 'status_color_outside': '#FFF', // String. Sets color of status tray element. | ||
| + | // 'set_speed': 500, // Integer. Sets speed of all animations. Represented in milliseconds. | ||
| + | // 'fullscreen' : 'false', // String. 'true' sets slide window for full screen. For obvious reasons, cannot | ||
| + | // work with more than one simpleSlide window per page. | ||
| + | // 'swipe' : 'false', // String. 'true' turns on swipe functionality for touch devices. | ||
| + | // 'callback': 'function()' // String. Sets callback to actuate after simpleSlide initial config. | ||
| + | // }); | ||
| + | // | ||
| + | // If you have any further questions on the usage of simpleSlide, or suggestions on making it better, | ||
| + | // please e-mail me at david@ddrewdesign.com, or visit http://www.ddrewdesign.com/contact/ to email me. | ||
| + | // Thank you for using this plugin, and I hope you enjoy it. I had a blast making it. | ||
| + | // | ||
| + | // | ||
| + | |||
| + | function simpleSlide(incoming_options) { | ||
| + | jQuery(function($) { | ||
| + | var options = { | ||
| + | 'status_width': 20, | ||
| + | 'status_color_inside': '#fff', | ||
| + | 'status_color_outside': '#aaa', | ||
| + | 'set_speed': 500, | ||
| + | 'fullscreen' : 'false', | ||
| + | 'swipe': 'false', | ||
| + | 'callback': 'function()' | ||
| + | }; | ||
| + | |||
| + | $.extend(options, incoming_options); | ||
| + | |||
| + | $.ss_options = options; | ||
| + | |||
| + | $('.simpleSlide-slide').css('opacity', '0'); | ||
| + | |||
| + | $('.simpleSlide-tray').css('margin', '0'); | ||
| + | |||
| + | $('.simpleSlide-window').prepend('<span id="ssLoading" style="color: #808080;font-family:Helvetica, Arial, sans-serif;font-size: 12px; margin: 10px 0 0 10px;display: block">Loading slides...</span>'); | ||
| + | |||
| + | var no_of_images = $('.simpleSlide-slide img').size(); | ||
| + | |||
| + | if(no_of_images > 0) { | ||
| + | |||
| + | var images = new Array(); | ||
| + | var i = 0; | ||
| + | $('.simpleSlide-slide img').each( function() { | ||
| + | images[i] = $(this).attr('src'); | ||
| + | i++; | ||
| + | }); | ||
| + | |||
| + | i = 0; | ||
| + | |||
| + | $(images).each( function(){ | ||
| + | var imageObj = new Image(); | ||
| + | imageObj.src = images[i]; | ||
| + | |||
| + | if(imageObj.complete){ | ||
| + | no_of_images--; | ||
| + | i++; | ||
| + | if(no_of_images == 0) { | ||
| + | ssInit(); | ||
| + | }; | ||
| + | } else { | ||
| + | $(imageObj).load( function() { | ||
| + | no_of_images--; | ||
| + | i++; | ||
| + | if(no_of_images == 0){ | ||
| + | ssInit(); | ||
| + | }; | ||
| + | }); | ||
| + | }; | ||
| + | }); | ||
| + | } else { | ||
| + | ssInit(); | ||
| + | }; | ||
| + | }); | ||
| + | }; | ||
| + | |||
| + | function ssInit(){ | ||
| + | /* Set the dimensions of each simpleSlide window and tray | ||
| + | * based on the size of the first 'slide' inside that window. | ||
| + | * Every slide within a given tray/window should be uniform in dimensions. | ||
| + | * Also, set Status Window size, if it's being used. Fire callback when finished. | ||
| + | */ | ||
| + | |||
| + | jQuery(function($) { | ||
| + | $('.simpleSlide-window').each( function() { | ||
| + | if($.ss_options.fullscreen == 'true'){ | ||
| + | $('body').css('overflow', 'hidden'); | ||
| + | } | ||
| + | var window_contents = $(this).html(); | ||
| + | var cleaned_contents = removeWhiteSpace(window_contents); | ||
| + | $(this).html(cleaned_contents); | ||
| + | |||
| + | var slide_count = $(this).find('.simpleSlide-slide').size(); | ||
| + | $(this).find('.simpleSlide-slide').css('display','block'); | ||
| + | var window_height = $(this).find('.simpleSlide-slide').first().outerHeight(); | ||
| + | |||
| + | if($.ss_options.fullscreen == 'true'){ | ||
| + | fullScreen(this); | ||
| + | }; | ||
| + | |||
| + | $(this).find('.simpleSlide-slide').css({ | ||
| + | 'display':'inline', | ||
| + | 'float':'left' | ||
| + | }); | ||
| + | |||
| + | var window_width = $(this).find('.simpleSlide-slide').first().outerWidth(); | ||
| + | |||
| + | var window_rel = $(this).attr('rel'); | ||
| + | |||
| + | if($.ss_options.fullscreen == 'false'){ | ||
| + | $(this).css({ | ||
| + | 'height': window_height, | ||
| + | 'width': window_width, | ||
| + | 'position': 'relative' | ||
| + | }); | ||
| + | }; | ||
| + | |||
| + | $(this).css('overflow','hidden'); | ||
| + | |||
| + | setTraySize(this, slide_count, window_width); | ||
| + | |||
| + | setSimpleSlideStatus(window_rel, window_height, window_width, slide_count); | ||
| + | |||
| + | setPaging(this); | ||
| + | |||
| + | $(this).find('#ssLoading').remove(); | ||
| + | |||
| + | if($.ss_options.swipe == 'true' && !$.browser.msie){ | ||
| + | simpleSwipe(this); | ||
| + | }; | ||
| + | |||
| + | $(this).find('.simpleSlide-slide').animate({ | ||
| + | 'opacity': '1' | ||
| + | }, 300, "swing"); | ||
| + | |||
| + | }); | ||
| + | |||
| + | /* Fire callback after completion of image load and simpleSlide initialization */ | ||
| + | if(typeof($.ss_options.callback) == 'function'){ | ||
| + | $.ss_options.callback.call(this); | ||
| + | }; | ||
| + | |||
| + | /* Gives each slide an 'alt' with the slide number */ | ||
| + | function setPaging(this_window) { | ||
| + | var page_count = 1; | ||
| + | |||
| + | $(this_window).find('.simpleSlide-slide').each( function() { | ||
| + | $(this).attr('alt', page_count); | ||
| + | page_count++; | ||
| + | }); | ||
| + | }; | ||
| + | |||
| + | function fullScreen(this_s_window){ | ||
| + | var base_img = new Image(); | ||
| + | base_img.src = $(this_s_window).find('img').first().attr('src'); | ||
| + | /*var rendered_img = $(this_s_window).find('img').first();*/ | ||
| + | var window_prop = $(window).width() / $(window).height(); | ||
| + | var image_prop = base_img.width / base_img.height; | ||
| + | var wh = $(window).height(); | ||
| + | var ww = $(window).width(); | ||
| + | |||
| + | if(window_prop > image_prop){ | ||
| + | var new_height = (ww / base_img.width) * base_img.height; | ||
| + | var height_offset = (new_height - wh) / 2; | ||
| + | $(this_s_window).find('img').attr('width', ww).attr('height', new_height).css('marginLeft', 0); | ||
| + | $(this_s_window).css({ | ||
| + | 'marginLeft': 0, /* Reset to beginning */ | ||
| + | 'marginTop':'-' + height_offset + 'px', | ||
| + | 'height': wh + height_offset | ||
| + | }); | ||
| + | $(this_s_window).find('.simpleSlide-slide').css({ | ||
| + | 'width': ww, | ||
| + | 'height': new_height, | ||
| + | 'overflow': 'hidden' | ||
| + | }); | ||
| + | } else { | ||
| + | var new_width = (wh / base_img.height) * base_img.width; | ||
| + | var width_offset = (new_width - ww) / 2; | ||
| + | $(this_s_window).find('img').attr('height', wh).attr('width', new_width); | ||
| + | $(this_s_window).find('img').css({ | ||
| + | 'marginLeft': '-' + width_offset + 'px' | ||
| + | }); | ||
| + | $(this_s_window).find('.simpleSlide-slide').css({ | ||
| + | 'width': ww, | ||
| + | 'height': wh, | ||
| + | 'overflow': 'hidden' | ||
| + | }); | ||
| + | |||
| + | /* Reset from other orientation */ | ||
| + | $(this_s_window).css({ | ||
| + | 'marginTop': 0, | ||
| + | 'height': wh | ||
| + | }); | ||
| + | }; | ||
| + | |||
| + | $(this_s_window).find('.simpleSlide-tray').css('marginLeft', 0); | ||
| + | }; | ||
| + | |||
| + | /* Sets size of the "tray" that holds the "slides" */ | ||
| + | function setTraySize(slideWindow, count, viewer_width) { | ||
| + | |||
| + | var slider_width = count * viewer_width; | ||
| + | |||
| + | $(slideWindow).find('.simpleSlide-tray').css({ | ||
| + | 'width': slider_width + 'px' | ||
| + | }); | ||
| + | |||
| + | $(slideWindow).find('.simpleSlide-slide').css('display','inline-block'); | ||
| + | |||
| + | }; | ||
| + | |||
| + | /* If user chooses to establish Status Window, this function will set | ||
| + | * the dimensions of the window based on the desired width. | ||
| + | * The window (and its inherent slide's) dimensions are a relative factor | ||
| + | * of the main window's size, so the status window will be proportionally | ||
| + | * the same as the main window and its tray. | ||
| + | */ | ||
| + | function setSimpleSlideStatus(this_rel, height, width, image_count) { | ||
| + | |||
| + | var ratio = $.ss_options.status_width/width; | ||
| + | var status_height = ratio*height; | ||
| + | |||
| + | $('.simpleSlideStatus-tray[rel="' + this_rel + '"]') | ||
| + | .css({ | ||
| + | 'width': $.ss_options.status_width * image_count, | ||
| + | 'height': status_height, | ||
| + | 'background-color': $.ss_options.status_color_outside | ||
| + | }); | ||
| + | |||
| + | $('.simpleSlideStatus-window[rel="' + this_rel + '"]') | ||
| + | .css({ | ||
| + | 'width': $.ss_options.status_width, | ||
| + | 'height': status_height, | ||
| + | 'background-color': $.ss_options.status_color_inside | ||
| + | }); | ||
| + | |||
| + | if(jQuery.support.opacity){ | ||
| + | $('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + this_rel + '"]') | ||
| + | .css({ | ||
| + | 'opacity': '.5', | ||
| + | 'background-color': $.ss_options.status_color_inside | ||
| + | }); | ||
| + | }; | ||
| + | |||
| + | if(!jQuery.support.opacity){ | ||
| + | $('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + this_rel + '"]').css({ | ||
| + | 'filter': 'alpha(opacity=50)', | ||
| + | 'background-color': $.ss_options.status_color_inside | ||
| + | }); | ||
| + | }; | ||
| + | }; | ||
| + | |||
| + | /* Actuates upon the clicking of a left- or right-button classed element */ | ||
| + | $('.left-button, .right-button, .jump-to').live('click', function() { | ||
| + | |||
| + | var rel = $(this).attr('rel'); | ||
| + | |||
| + | if (!$('div.simpleSlide-tray[rel="' + rel + '"]').is(':animated')) { | ||
| + | simpleSlideAction(this, rel); | ||
| + | }; | ||
| + | }); | ||
| + | }); | ||
| + | }; | ||
| + | |||
| + | function simpleSwipe(this_window) { | ||
| + | // Default thresholds & swipe functions | ||
| + | var defaults = { | ||
| + | threshold: { | ||
| + | x: $(this_window).width() * .15, | ||
| + | y: $(this_window).height() * .1 | ||
| + | }, | ||
| + | swipeLeft: function() { | ||
| + | simpleSlideAction('.right-button', $(this_window).attr('rel')); | ||
| + | }, | ||
| + | swipeRight: function() { | ||
| + | simpleSlideAction('.left-button', $(this_window).attr('rel')); | ||
| + | }, | ||
| + | preventDefaultEvents: true | ||
| + | }; | ||
| + | |||
| + | var options = $.extend(defaults, options); | ||
| + | |||
| + | if (!this_window) return false; | ||
| + | |||
| + | return $(this_window).each(function() { | ||
| + | |||
| + | var me = $(this_window); | ||
| + | |||
| + | // Private variables for each element | ||
| + | var originalCoord = { x: 0, y: 0 }; | ||
| + | var finalCoord = { x: 0, y: 0 }; | ||
| + | |||
| + | // Screen touched, store the original coordinate | ||
| + | function touchStart(event) { | ||
| + | originalCoord.x = event.targetTouches[0].pageX; | ||
| + | originalCoord.y = event.targetTouches[0].pageY; | ||
| + | }; | ||
| + | |||
| + | // Store coordinates as finger is swiping | ||
| + | function touchMove(event) { | ||
| + | if (defaults.preventDefaultEvents){ | ||
| + | event.preventDefault(); | ||
| + | }; | ||
| + | finalCoord.x = event.targetTouches[0].pageX; // Updated X,Y coordinates | ||
| + | finalCoord.y = event.targetTouches[0].pageY; | ||
| + | }; | ||
| + | |||
| + | // Done Swiping | ||
| + | // Swipe should only be on X axis, ignore if swipe on Y axis | ||
| + | // Calculate if the swipe was left or right | ||
| + | function touchEnd(event) { | ||
| + | var changeY = originalCoord.y - finalCoord.y; | ||
| + | if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) { | ||
| + | changeX = originalCoord.x - finalCoord.x; | ||
| + | |||
| + | if(changeX > defaults.threshold.x) { | ||
| + | defaults.swipeLeft(); | ||
| + | }; | ||
| + | if(changeX < (defaults.threshold.x*-1)) { | ||
| + | defaults.swipeRight(); | ||
| + | }; | ||
| + | }; | ||
| + | }; | ||
| + | |||
| + | // Swipe was canceled | ||
| + | function touchCancel(event) { | ||
| + | console.log('Canceling swipe gesture...'); | ||
| + | }; | ||
| + | |||
| + | // Add gestures to all swipable areas | ||
| + | this_window.addEventListener("touchstart", touchStart, false); | ||
| + | this_window.addEventListener("touchmove", touchMove, false); | ||
| + | this_window.addEventListener("touchend", touchEnd, false); | ||
| + | this_window.addEventListener("touchcancel", touchCancel, false); | ||
| + | |||
| + | }); | ||
| + | }; | ||
| + | |||
| + | function simpleSlideAction(action, rel_no) { | ||
| + | jQuery(function($) { | ||
| + | var move_speed = $.ss_options.set_speed; | ||
| + | var image_count = $('.simpleSlide-window[rel="' + rel_no + '"]').find('.simpleSlide-slide').size(); | ||
| + | var window_width = $('.simpleSlide-window[rel="' + rel_no + '"]').innerWidth(); | ||
| + | var status_window_width = $('.simpleSlideStatus-window[rel="' + rel_no + '"]').innerWidth(); | ||
| + | var status_tray_width = status_window_width * image_count; | ||
| + | var current_tray_margin = parseInt($('.simpleSlide-tray[rel="' + rel_no + '"]').css('marginLeft'), 10); | ||
| + | var current_status_window_margin = parseInt($('.simpleSlideStatus-tray .simpleSlideStatus-window[rel="' + rel_no + '"]').css('marginLeft'), 10); | ||
| + | var current_status_tray_margin = parseInt($('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + rel_no + '"]').css('marginLeft'), 10); | ||
| + | |||
| + | if($(action).is('.jump-to')) { | ||
| + | var to_page = $(action).attr('alt'); | ||
| + | var j_margin = (to_page - 1) * (window_width * (-1)); | ||
| + | var st_margin = (to_page - 1) * (status_window_width * (-1)); | ||
| + | var sw_margin = (to_page - 1) * (status_window_width); | ||
| + | |||
| + | move(j_margin, sw_margin, st_margin); | ||
| + | }; | ||
| + | |||
| + | if($(action).is('.left-button')) { | ||
| + | if(current_tray_margin == 0) { | ||
| + | var j_margin = current_tray_margin - ((image_count - 1) * window_width); | ||
| + | var st_margin = current_status_tray_margin - ((image_count - 1) * status_window_width); | ||
| + | var sw_margin = current_status_window_margin + ((image_count - 1) * status_window_width); | ||
| + | } else { | ||
| + | var j_margin = current_tray_margin + window_width; | ||
| + | var st_margin = current_status_tray_margin + status_window_width; | ||
| + | var sw_margin = current_status_window_margin - status_window_width; | ||
| + | }; | ||
| + | |||
| + | move(j_margin, sw_margin, st_margin); | ||
| + | }; | ||
| + | |||
| + | if($(action).is('.right-button')) { | ||
| + | if(current_tray_margin == (image_count - 1) * (window_width * -1)) { | ||
| + | var j_margin = 0; | ||
| + | var st_margin = 0; | ||
| + | var sw_margin = 0; | ||
| + | } else { | ||
| + | var j_margin = current_tray_margin - window_width; | ||
| + | var st_margin = current_status_tray_margin - status_window_width; | ||
| + | var sw_margin = current_status_window_margin + status_window_width; | ||
| + | }; | ||
| + | |||
| + | move(j_margin, sw_margin, st_margin); | ||
| + | }; | ||
| + | |||
| + | function move(new_margin, new_swindow_margin, new_stray_margin) { | ||
| + | $('.simpleSlide-tray[rel="' + rel_no + '"]').animate({ | ||
| + | 'marginLeft': new_margin | ||
| + | }, move_speed, "swing"); | ||
| + | |||
| + | $('.simpleSlideStatus-window .simpleSlideStatus-tray[rel="' + rel_no + '"]') | ||
| + | .animate({ | ||
| + | 'marginLeft': new_stray_margin | ||
| + | }, move_speed, "swing"); | ||
| + | |||
| + | $('.simpleSlideStatus-tray .simpleSlideStatus-window[rel="' + rel_no + '"]').animate({ | ||
| + | 'marginLeft': new_swindow_margin | ||
| + | }, move_speed, "swing"); | ||
| + | }; | ||
| + | }); | ||
| + | }; | ||
| + | |||
| + | function removeWhiteSpace(raw) { | ||
| + | var cleaned_string = raw.replace(/[\r+\n+\t+]\s\s+/g, ""); | ||
| + | return cleaned_string; | ||
| + | }; | ||
| + | |||
</script> | </script> | ||
</head> | </head> | ||
</html> | </html> | ||
Revision as of 15:53, 22 September 2012
