|
|
(6 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | {{:Team:Goettingen/header}}
| |
- | <html>
| |
- | <!-- main part of the subpage -->
| |
- | <div id="subpage">
| |
- | <!-- left column-->
| |
- | <div class="leftpart">
| |
- | <h3>Project</h3>
| |
- | <ul>
| |
- | <li><a href="project_overview">Overview</a></li>
| |
- | <li><a href="project_gallery">Gallery</a></li>
| |
- | <li><a href="project_drylab">Dry lab</a></li>
| |
- | <li><a href="project_wetlab">Wet lab</a></li>
| |
- | </ul>
| |
- | </div>
| |
- | <!-- end of left column-->
| |
| | | |
- | <!-- right column-->
| |
- | <div class="proRP">
| |
- | <h2>Gallery for the lab work</h2>
| |
- | <div class="gallery_single_part">
| |
- | <h3>Meet us in the lab!</h3>
| |
- | <ul class="gallery">
| |
- | <li><a href="https://static.igem.org/mediawiki/2014/4/4c/Goettingen_lab_photo0.jpg" rel="superbox[gallery][in_the_lab]"><img src="https://static.igem.org/mediawiki/2014/b/b4/Goettingen_lab_photo0_reduced.jpg"></a></li>
| |
- | <li><a href="https://static.igem.org/mediawiki/2014/a/ae/Goettingen_lab_photo5.png" rel="superbox[gallery][in_the_lab]"><img src="https://static.igem.org/mediawiki/2014/3/3d/Goettingen_lab_photo5_reduced.png"></a></li>
| |
- | <li><a href="https://static.igem.org/mediawiki/2014/1/10/Goettingen_lab_photo2.jpg" rel="superbox[gallery][in_the_lab]"><img src="https://static.igem.org/mediawiki/2014/4/46/Goettingen_lab_photo2_reduced.jpg"></a></li>
| |
- | <li><a href="https://static.igem.org/mediawiki/2014/5/5d/Goettingen_lab_photo3.jpg" rel="superbox[gallery][in_the_lab]"><img src="https://static.igem.org/mediawiki/2014/1/19/Goettingen_lab_photo3_reduced.jpg"></a></li>
| |
- | <li><a href="https://static.igem.org/mediawiki/2014/1/17/Goettingen_lab_photo1.jpg" rel="superbox[gallery][in_the_lab]"><img src="https://static.igem.org/mediawiki/2014/3/34/Goettingen_lab_photo1_reduced.jpg"></a></li>
| |
- | <li><a href="https://static.igem.org/mediawiki/2014/3/3a/Goettingen_lab_photo4.jpg" rel="superbox[gallery][in_the_lab]"><img src="https://static.igem.org/mediawiki/2014/c/c7/Goettingen_lab_photo4_reduced.jpg"></a></li>
| |
- | </ul>
| |
- | <br /><br />
| |
- | </div>
| |
- | </div>
| |
- | <!-- end of right column-->
| |
- |
| |
- | </div>
| |
- |
| |
- | <!-- superbox -->
| |
- | <script type="text/javascript">
| |
- | $(function(){
| |
- | $.superbox();
| |
- | });
| |
- | $.superbox.settings = {
| |
- | boxId: "superbox", // Id attribute of the "superbox" element
| |
- | boxClasses: "", // Class of the "superbox" element
| |
- | overlayOpacity: .8, // Background opaqueness
| |
- | boxWidth: "600", // Default width of the box
| |
- | boxHeight: "400", // Default height of the box
| |
- | loadTxt: "Loading...", // Loading text
| |
- | closeTxt: "Close", // "Close" button text
| |
- | prevTxt: "Previous", // "Previous" button text
| |
- | nextTxt: "Next" // "Next" button text
| |
- | };
| |
- |
| |
- | (function(i){var l,t,r,q,a,p,h,o,j,w,b={boxId:"superbox",boxClasses:"",overlayOpacity:0.8,boxWidth:"600",boxHeight:"400",loadTxt:"Loading...",closeTxt:"Close",prevTxt:"Previous",nextTxt:"Next",beforeShow:function(){}},x={},m=false,s=i([]);
| |
- | i.superbox=function(){w=i.extend({},b,i.superbox.settings);if(i.browser.msie&&i.browser.version<7){s=s.add("select")
| |
- | }n();z()};function z(){i("a[rel^=superbox],area[rel^=superbox]").each(function(){var D=i(this),F=D.attr("rel"),B=F.match(/^superbox\[([^#\.\]]+)/)[1],E=F.replace("superbox","").match(/([#\.][^#\.\]]+)/g)||[],C=w.boxId,A=w.boxClasses;
| |
- | this._relSettings=F.replace("superbox["+B+E.join("")+"]","");i.each(E,function(G,H){if(H.substr(0,1)=="#"){C=H.substr(1)
| |
- | }else{if(H.substr(0,1)=="."){A+=" "+H.substr(1)}}});if(B.search(/^image|gallery|iframe|content|ajax$/)!=-1){D.superbox(B,{boxId:C,boxClasses:A})
| |
- | }})}i.fn.superbox=function(B,A){A=i.extend({},w,A);i.superbox[B](this,A)};i.extend(i.superbox,{image:function(C,A,B){var E=f(C.get(0)),D=false;
| |
- | if(E&&B=="gallery"){D=E[1]}else{if(E){D=E[0]}}C.click(function(F){F.preventDefault();
| |
- | k();if(B=="gallery"){c(C,E[0])}y(function(){var H=false,G;if(D){H=D.split("x")}G=i('<img src="'+C.attr("href")+'" title="'+(C.attr("title")||C.text())+'" />');
| |
- | G.load(function(){g(G,H);e({boxClasses:"image "+A.boxClasses,boxId:A.boxId});u()}).appendTo($innerbox)
| |
- | })})},gallery:function(B,A){var C=f(B.get(0));if(!x[C[0]]){x[C[0]]=[]}x[C[0]].push(B);
| |
- | B.get(0)._superboxGroupKey=(x[C[0]].length-1);i.superbox.image(B,A,"gallery")},iframe:function(B,A){var C=f(B.get(0));
| |
- | B.click(function(D){D.preventDefault();k();y(function(){var F=false,E;if(C){F=C[0].split("x")
| |
- | }A=i.extend({},A,{boxWidth:F[0]||A.boxWidth,boxHeight:F[1]||A.boxHeight});E=i('<iframe src="'+B.attr("href")+'" name="'+B.attr("href")+'" frameborder="0" scrolling="auto" hspace="0" width="'+A.boxWidth+'" height="'+A.boxHeight+'"></iframe>');
| |
- | E.load(function(){q.width(A.boxWidth+"px");$innerbox.height(A.boxHeight+"px");e({boxClasses:"iframe "+A.boxClasses,boxId:A.boxId});
| |
- | u()}).appendTo($innerbox)})})},content:function(B,A){var C=f(B.get(0));B.click(function(D){D.preventDefault();
| |
- | k();y(function(){var E=false;if(C){E=C[0].split("x")}A=i.extend({},A,{boxWidth:E[0]||A.boxWidth,boxHeight:E[1]||A.boxHeight});
| |
- | q.width(A.boxWidth+"px");$innerbox.height(A.boxHeight+"px");i(B.attr("href")).clone().appendTo($innerbox).show();
| |
- | e({boxClasses:"content "+A.boxClasses,boxId:A.boxId});u()})})},ajax:function(B,A){var C=f(B.get(0));
| |
- | B.click(function(D){D.preventDefault();k();y(function(){var E=false;if(C&&C[3]){E=C[3].split("x")
| |
- | }A=i.extend({},A,{boxWidth:E[0]||A.boxWidth,boxHeight:E[1]||A.boxHeight});q.width(A.boxWidth+"px");
| |
- | $innerbox.height(A.boxHeight+"px");i.get(C[2],function(F){i(F).appendTo($innerbox)
| |
- | });e({boxClasses:"ajax "+A.boxClasses,boxId:A.boxId});u()})})}});function f(A){return A._relSettings.match(/([^\[\]]+)/g)
| |
- | }function g(A,B){q.width(A.width()+($innerbox.css("paddingLeft").slice(0,-2)-0)+($innerbox.css("paddingRight").slice(0,-2)-0));
| |
- | $innerbox.height(A.height());if(B&&B[0]!=""){q.width(B[0]+"px")}if(B&&B[1]!=""&&B[1]>A.height()){$innerbox.height(B[1]+"px")
| |
- | }}function c(C,D){h.show();m=true;var A=C.get(0)._superboxGroupKey+1,B=A-2;if(x[D][A]){o.removeClass("disabled").unbind("click").bind("click",function(){x[D][A].click()
| |
- | })}else{o.addClass("disabled").unbind("click")}if(x[D][B]){j.removeClass("disabled").unbind("click").bind("click",function(){x[D][B].click()
| |
- | })}else{j.addClass("disabled").unbind("click")}}function e(A){q.attr("id",A.boxId).attr("class",A.boxClasses)
| |
- | }function d(){i(document).unbind("keydown");p.hide();h.hide();t.hide().css({position:"fixed",top:0});
| |
- | $innerbox.empty()}function v(A){d();l.fadeOut(300,function(){s.show()});m=false}function y(B){var A=function(){if(i.browser.msie&&i.browser.version<7){t.css({position:"absolute",top:"50%"})
| |
- | }s.hide();p.show();B()};if(m){l.css("opacity",w.overlayOpacity).show();A()}else{l.css("opacity",0).show().fadeTo(300,w.overlayOpacity,A)
| |
- | }}function k(){t.show();$innerbox.empty();q.css({position:"absolute",top:"-99999px"})
| |
- | }function u(A,B){p.hide();i(document).unbind("keydown").bind("keydown",function(C){if(C.keyCode==27){v()
| |
- | }if(C.keyCode==39&&o.is(":visible")){o.click()}if(C.keyCode==37&&j.is(":visible")){j.click()
| |
- | }});q.css({position:"static",top:0,opacity:0});if(i.browser.msie&&i.browser.version<8){q.css({position:"relative",top:"-50%"});
| |
- | if(i.browser.msie&&i.browser.version<7){t.css({position:"absolute",top:"50%"})}}if(i(window).height()<t.height()){t.css({position:"absolute",top:(t.offset().top+10)+"px"})
| |
- | }w.beforeShow();q.fadeTo(300,1)}function n(){if(!i.superbox.elementsReady){l=i('<div id="superbox-overlay"></div>').appendTo("body").hide();
| |
- | t=i('<div id="superbox-wrapper"></div>').appendTo("body").hide();r=i('<div id="superbox-container"></div>').appendTo(t);
| |
- | q=i('<div id="superbox"></div>').appendTo(r);$innerbox=i('<div id="superbox-innerbox"></div>').appendTo(q);
| |
- | h=i('<p class="nextprev"></p>').appendTo(q).hide();j=i('<a class="prev"><strong><span>'+w.prevTxt+"</span></strong></a>").appendTo(h);
| |
- | o=i('<a class="next"><strong><span>'+w.nextTxt+"</span></strong></a>").appendTo(h);
| |
- | a=i('<p class="close"><a><strong><span>'+w.closeTxt+"</span></strong></a></p>").prependTo(q).find("a");
| |
- | p=i('<p class="loading">'+w.loadTxt+"</p>").appendTo(r).hide();l.add(t).add(a).click(function(){v()
| |
- | });q.click(function(A){A.stopPropagation()});i.superbox.elementsReady=true}}})(jQuery);
| |
- |
| |
- |
| |
- | ;(function($){
| |
- | // Local variables
| |
- | var $overlay, $wrapper, $container, $superbox, $closeBtn, $loading, $nextprev, $nextBtn, $prevBtn, settings,
| |
- | // Default settings
| |
- | defaultSettings = {
| |
- | boxId: "superbox",
| |
- | boxClasses: "",
| |
- | overlayOpacity: .8,
| |
- | boxWidth: "600",
| |
- | boxHeight: "400",
| |
- | loadTxt: "Loading...",
| |
- | closeTxt: "Close",
| |
- | prevTxt: "Previous",
| |
- | nextTxt: "Next",
| |
- | beforeShow: function(){}
| |
- | },
| |
- | galleryGroups = {},
| |
- | galleryMode = false,
| |
- | hideElts = $([]);
| |
- | // Init dispatcher
| |
- | $.superbox = function(){
| |
- | // Settings
| |
- | settings = $.extend({}, defaultSettings, $.superbox.settings);
| |
- | // If IE6, select elements to hide
| |
- | if ($.browser.msie && $.browser.version < 7){
| |
- | hideElts = hideElts.add("select");
| |
- | }
| |
- | // Create base elements
| |
- | createElements();
| |
- | // Dispatch types
| |
- | dispatch();
| |
- | };
| |
- | // Dispatch types
| |
- | function dispatch(){
| |
- | // Match all superbox links
| |
- | $("a[rel^=superbox],area[rel^=superbox]").each(function(){
| |
- | // Optimisation
| |
- | var $this = $(this),
| |
- | relAttr = $this.attr("rel"),
| |
- | // Match type (ex : superbox[gallery#my_id.my_class][my_gallery] > gallery
| |
- | type = relAttr.match(/^superbox\[([^#\.\]]+)/)[1],
| |
- | // Match additionnal classes or IDs (#xxx.yyy.zzz)
| |
- | boxCurrentAttrs = relAttr.replace("superbox", "").match(/([#\.][^#\.\]]+)/g) || [],
| |
- | // Box ID and classes
| |
- | newBoxId = settings.boxId,
| |
- | newBoxClasses = settings.boxClasses;
| |
- |
| |
- | // Additionnal rel settings
| |
- | this._relSettings = relAttr.replace("superbox["+ type + boxCurrentAttrs.join("") +"]", "");
| |
- |
| |
- | // Redefine settings
| |
- | $.each(boxCurrentAttrs, function(i, val){ // each class or id
| |
- | if (val.substr(0,1) == "#"){
| |
- | newBoxId = val.substr(1);
| |
- | }
| |
- | else if (val.substr(0,1) == "."){
| |
- | newBoxClasses += " " + val.substr(1);
| |
- | }
| |
- | });
| |
- |
| |
- | // Call type method
| |
- | if (type.search(/^image|gallery|iframe|content|ajax$/) != -1) {
| |
- | $this.superbox(type, {boxId: newBoxId, boxClasses: newBoxClasses});
| |
- | }
| |
- | });
| |
- | };
| |
- |
| |
- | /*-- Superbox Method --*/
| |
- | $.fn.superbox = function(type, curSettings){
| |
- | curSettings = $.extend({}, settings, curSettings);
| |
- | $.superbox[type](this, curSettings);
| |
- | };
| |
- |
| |
- | /*-- Types --*/
| |
- | $.extend($.superbox, {
| |
- |
| |
- | // Image
| |
- | image: function($elt, curSettings, type){
| |
- |
| |
- | var relSettings = getRelSettings($elt.get(0)),
| |
- | dimensions = false;
| |
- |
| |
- | // Extra settings
| |
- | if (relSettings && type == "gallery")
| |
- | dimensions = relSettings[1];
| |
- | else if (relSettings)
| |
- | dimensions = relSettings[0];
| |
- |
| |
- | // On click event
| |
- | $elt.click(function(e){
| |
- | e.preventDefault();
| |
- |
| |
- | prepareBox();
| |
- |
| |
- | // "Prev / Next" buttons
| |
- | if (type == "gallery")
| |
- | nextPrev($elt, relSettings[0]);
| |
- |
| |
- | // Loading anim
| |
- | initLoading(function(){
| |
- |
| |
- | // Dimensions
| |
- | var dims = false,
| |
- |
| |
- | // Image
| |
- | $curImg;
| |
- |
| |
- | if (dimensions) {
| |
- | dims = dimensions.split("x");
| |
- | }
| |
- |
| |
- | // Image
| |
- | $curImg = $('<img src="'+ $elt.attr("href") +'" title="'+ ($elt.attr("title") || $elt.text()) +'" />');
| |
- |
| |
- | // On image load
| |
- | $curImg.load(function(){
| |
- |
| |
- | // Resize
| |
- | resizeImageBox($curImg, dims);
| |
- |
| |
- | // Id and Classes
| |
- | setBoxAttrs({boxClasses: "image " + curSettings.boxClasses, boxId: curSettings.boxId});
| |
- |
| |
- | // Show box
| |
- | showBox();
| |
- |
| |
- | }).appendTo($innerbox);
| |
- |
| |
- | });
| |
- |
| |
- | });
| |
- | },
| |
- |
| |
- | // Gallery
| |
- | gallery: function($elt, curSettings){
| |
- |
| |
- | // Extra settings
| |
- | var extraSettings = getRelSettings($elt.get(0));
| |
- |
| |
- | // Create group
| |
- | if(!galleryGroups[extraSettings[0]]) {
| |
- | galleryGroups[extraSettings[0]] = [];
| |
- | }
| |
- |
| |
- | // Add element to current group
| |
- | galleryGroups[extraSettings[0]].push($elt);
| |
- |
| |
- | $elt.get(0)._superboxGroupKey = (galleryGroups[extraSettings[0]].length - 1);
| |
- |
| |
- | // Image Box
| |
- | $.superbox["image"]($elt, curSettings, "gallery");
| |
- | },
| |
- |
| |
- | // iframe
| |
- | iframe: function($elt, curSettings){
| |
- |
| |
- | // Extra settings
| |
- | var extraSettings = getRelSettings($elt.get(0));
| |
- |
| |
- | // On click event
| |
- | $elt.click(function(e){
| |
- | e.preventDefault();
| |
- |
| |
- | prepareBox();
| |
- |
| |
- | // Loading anim
| |
- | initLoading(function(){
| |
- |
| |
- | // Dimensions
| |
- | var dims = false,
| |
- |
| |
- | // iframe
| |
- | $iframe;
| |
- |
| |
- | if (extraSettings) {
| |
- | dims = extraSettings[0].split("x");
| |
- | }
| |
- |
| |
- | curSettings = $.extend({}, curSettings, {
| |
- | boxWidth: dims[0] || curSettings.boxWidth,
| |
- | boxHeight: dims[1] || curSettings.boxHeight
| |
- | });
| |
- |
| |
- | // iframe
| |
- | $iframe = $('<iframe src="'+ $elt.attr("href") +'" name="'+ $elt.attr("href") +'" frameborder="0" scrolling="auto" hspace="0" width="'+ curSettings.boxWidth +'" height="'+ curSettings.boxHeight +'"></iframe>');
| |
- |
| |
- | // On iframe load
| |
- | $iframe.load(function(){
| |
- |
| |
- | // Specified dimensions
| |
- | $superbox.width( curSettings.boxWidth+"px" );
| |
- | $innerbox.height( curSettings.boxHeight+"px" );
| |
- |
| |
- | // Id and Classes
| |
- | setBoxAttrs({boxClasses: "iframe " + curSettings.boxClasses, boxId: curSettings.boxId});
| |
- |
| |
- | // Show box
| |
- | showBox();
| |
- |
| |
- | }).appendTo($innerbox);
| |
- | });
| |
- |
| |
- | });
| |
- | },
| |
- |
| |
- | // Content
| |
- | content: function($elt, curSettings){
| |
- | // Extra settings
| |
- | var extraSettings = getRelSettings($elt.get(0));
| |
- |
| |
- | // On click event
| |
- | $elt.click(function(e){
| |
- | e.preventDefault();
| |
- |
| |
- | prepareBox();
| |
- |
| |
- | // Loading anim
| |
- | initLoading(function(){
| |
- |
| |
- | // Dimensions
| |
- | var dims = false;
| |
- | if (extraSettings)
| |
- | dims = extraSettings[0].split("x");
| |
- |
| |
- | curSettings = $.extend({}, curSettings, {
| |
- | boxWidth: dims[0] || curSettings.boxWidth,
| |
- | boxHeight: dims[1] || curSettings.boxHeight
| |
- | });
| |
- |
| |
- | // Specified dimensions
| |
- | $superbox.width( curSettings.boxWidth+"px" );
| |
- | $innerbox.height( curSettings.boxHeight+"px" );
| |
- |
| |
- | $($elt.attr('href')).clone().appendTo($innerbox).show();
| |
- |
| |
- | // Id and Classes
| |
- | setBoxAttrs({boxClasses: "content " + curSettings.boxClasses, boxId: curSettings.boxId});
| |
- |
| |
- | // Show box
| |
- | showBox();
| |
- | });
| |
- |
| |
- | });
| |
- | },
| |
- |
| |
- | // Ajax
| |
- | ajax: function($elt, curSettings){
| |
- |
| |
- | // Extra settings
| |
- | var extraSettings = getRelSettings($elt.get(0));
| |
- |
| |
- | // On click event
| |
- | $elt.click(function(e){
| |
- | e.preventDefault();
| |
- |
| |
- | prepareBox();
| |
- |
| |
- | // Loading anim
| |
- | initLoading(function(){
| |
- |
| |
- | // Dimensions
| |
- | var dims = false;
| |
- | if (extraSettings && extraSettings[3]) {
| |
- | dims = extraSettings[3].split("x");
| |
- | }
| |
- |
| |
- | // Extend default dimension settings
| |
- | curSettings = $.extend({}, curSettings, {
| |
- | boxWidth: dims[0] || curSettings.boxWidth,
| |
- | boxHeight: dims[1] || curSettings.boxHeight
| |
- | });
| |
- |
| |
- | // Specified dimensions
| |
- | $superbox.width( curSettings.boxWidth+"px" );
| |
- | $innerbox.height( curSettings.boxHeight+"px" );
| |
- |
| |
- | $.get( extraSettings[2], function(data){
| |
- | $(data).appendTo($innerbox);
| |
- | });
| |
- |
| |
- | // Id and Classes
| |
- | setBoxAttrs({boxClasses: "ajax " + curSettings.boxClasses, boxId: curSettings.boxId});
| |
- |
| |
- | // Show box
| |
- | showBox();
| |
- | });
| |
- | });
| |
- | }
| |
- | });
| |
- |
| |
- |
| |
- | // Get extra settings in rel attribute
| |
- | function getRelSettings(elt){
| |
- | return elt._relSettings.match(/([^\[\]]+)/g);
| |
- | };
| |
- |
| |
- | // Set image box dimensions
| |
- | function resizeImageBox($curImg, dims){
| |
- |
| |
- | // Auto
| |
- | $superbox.width($curImg.width() + ($innerbox.css("paddingLeft").slice(0,-2)-0) + ($innerbox.css("paddingRight").slice(0,-2)-0)); // Padding ajouté, pour corriger le problème de définition padding sur $innerbox
| |
- | $innerbox.height($curImg.height());
| |
- |
| |
- | // Specified
| |
- | if (dims && dims[0] != "") {
| |
- | $superbox.width(dims[0] + "px");
| |
- | }
| |
- | if (dims && dims[1] != "" && dims[1] > $curImg.height()) {
| |
- | $innerbox.height(dims[1] + "px");
| |
- | }
| |
- | };
| |
- |
| |
- | // Next / Previous
| |
- | function nextPrev($elt, group){
| |
- | $nextprev.show();
| |
- |
| |
- | galleryMode = true;
| |
- |
| |
- | var nextKey = $elt.get(0)._superboxGroupKey + 1,
| |
- | prevKey = nextKey - 2;
| |
- |
| |
- | // Next
| |
- | if (galleryGroups[group][nextKey]){
| |
- | $nextBtn.removeClass("disabled").unbind("click").bind("click", function(){
| |
- | galleryGroups[group][nextKey].click();
| |
- | });
| |
- | }
| |
- | else
| |
- | $nextBtn.addClass("disabled").unbind("click");
| |
- |
| |
- | // Prev
| |
- | if (galleryGroups[group][prevKey]){
| |
- | $prevBtn.removeClass("disabled").unbind("click").bind("click", function(){
| |
- | galleryGroups[group][prevKey].click();
| |
- | });
| |
- | }
| |
- | else
| |
- | $prevBtn.addClass("disabled").unbind("click");
| |
- | };
| |
- |
| |
- | // Set ID and Class
| |
- | function setBoxAttrs(attrs){
| |
- | $superbox.attr("id", attrs.boxId).attr("class", attrs.boxClasses);
| |
- | };
| |
- |
| |
- | // Hide Box
| |
- | function hideBox(){
| |
- | $(document).unbind("keydown");
| |
- | $loading.hide();
| |
- | $nextprev.hide();
| |
- | $wrapper.hide().css({position: "fixed", top: 0});
| |
- | $innerbox.empty();
| |
- | };
| |
- |
| |
- | // Hide Box + Overlay
| |
- | function hideAll(callback){
| |
- | hideBox();
| |
- | $overlay.fadeOut(300, function(){
| |
- | // Show hidden elements for IE6
| |
- | hideElts.show();
| |
- | });
| |
- | galleryMode = false;
| |
- | };
| |
- |
| |
- | // "Loading..."
| |
- | function initLoading(callback){
| |
- |
| |
- | var loading = function(){
| |
- |
| |
- | // IE6
| |
- | if($.browser.msie && $.browser.version < 7){
| |
- | $wrapper.css({position: "absolute", top:"50%"});
| |
- | }
| |
- |
| |
- | // Hide elements for IE6
| |
- | hideElts.hide();
| |
- |
| |
- | $loading.show();
| |
- | callback();
| |
- | };
| |
- |
| |
- | if (galleryMode){
| |
- | $overlay.css("opacity", settings.overlayOpacity).show();
| |
- | loading();
| |
- | }
| |
- | else {
| |
- | $overlay.css("opacity", 0).show().fadeTo(300, settings.overlayOpacity, loading);
| |
- | }
| |
- | };
| |
- |
| |
- | // "Prepare" box : Show $superbox with top:-99999px;
| |
- | function prepareBox(){
| |
- | $wrapper.show();
| |
- | $innerbox.empty();
| |
- | $superbox.css({position: "absolute", top: "-99999px"});
| |
- | };
| |
- |
| |
- | // Display box
| |
- | function showBox(curSettings, $elt){
| |
- | // Stop "Loading..."
| |
- | $loading.hide();
| |
- |
| |
- | // Keys shortcuts
| |
- | $(document).unbind("keydown").bind("keydown",function(e){
| |
- | // Escape
| |
- | if (e.keyCode == 27)
| |
- | hideAll();
| |
- | // Left/right arrows
| |
- | if (e.keyCode == 39 && $nextBtn.is(":visible"))
| |
- | $nextBtn.click();
| |
- | if (e.keyCode == 37 && $prevBtn.is(":visible"))
| |
- | $prevBtn.click();
| |
- | });
| |
- |
| |
- | // Show $superbox
| |
- | $superbox.css({position: "static", top: 0, opacity: 0});
| |
- |
| |
- | // IE6 and IE7
| |
- | if ($.browser.msie && $.browser.version < 8){
| |
- | $superbox.css({position: "relative", top:"-50%"});
| |
- | // IE6
| |
- | if ($.browser.msie && $.browser.version < 7)
| |
- | $wrapper.css({position: "absolute", top:"50%"});
| |
- | }
| |
- |
| |
- | // Position absolute if image height > window height
| |
- | if ( $(window).height() < $wrapper.height() ){
| |
- | $wrapper.css({position: "absolute", top: ($wrapper.offset().top + 10) + "px"});
| |
- | }
| |
- |
| |
- | settings.beforeShow();
| |
- |
| |
- | $superbox.fadeTo(300,1);
| |
- |
| |
- | };
| |
- |
| |
- | // Create base elements (overlay, wrapper, box, loading)
| |
- | function createElements(){
| |
- | if (!$.superbox.elementsReady){
| |
- |
| |
- | // Overlay (background)
| |
- | $overlay = $('<div id="superbox-overlay"></div>').appendTo("body").hide();
| |
- |
| |
- | // Wrapper
| |
- | $wrapper = $('<div id="superbox-wrapper"></div>').appendTo("body").hide();
| |
- |
| |
- | // Box container
| |
- | $container = $('<div id="superbox-container"></div>').appendTo($wrapper);
| |
- |
| |
- | // Box
| |
- | $superbox = $('<div id="superbox"></div>').appendTo($container);
| |
- |
| |
- | // Inner box
| |
- | $innerbox = $('<div id="superbox-innerbox"></div>').appendTo($superbox);
| |
- |
| |
- | // "Next / Previous"
| |
- | $nextprev = $('<p class="nextprev"></p>').appendTo($superbox).hide();
| |
- | $prevBtn = $('<a class="prev"><strong><span>'+ settings.prevTxt +'</span></strong></a>').appendTo($nextprev);
| |
- | $nextBtn = $('<a class="next"><strong><span>'+ settings.nextTxt +'</span></strong></a>').appendTo($nextprev);
| |
- |
| |
- | // Add close button
| |
- | $closeBtn = $('<p class="close"><a><strong><span>'+ settings.closeTxt +'</span></strong></a></p>').prependTo($superbox).find("a");
| |
- |
| |
- | // "Loading..."
| |
- | $loading = $('<p class="loading">'+ settings.loadTxt +'</p>').appendTo($container).hide();
| |
- |
| |
- | // Hide on click
| |
- | $overlay.add($wrapper).add($closeBtn).click(function(){
| |
- | hideAll();
| |
- | });
| |
- |
| |
- | // Remove "hide on click" on superbox
| |
- | $superbox.click(function(e){
| |
- | e.stopPropagation();
| |
- | });
| |
- |
| |
- | // Dont call this function twice
| |
- | $.superbox.elementsReady = true;
| |
- | }
| |
- | };
| |
- | })(jQuery);
| |
- |
| |
- |
| |
- |
| |
- | </script>
| |
- | </body>
| |
- | </html>
| |