"
Team:Goettingen/project gallery
From 2014.igem.org
(Difference between revisions)
Gwen Eleven (Talk | contribs) m |
Gwen Eleven (Talk | contribs) m |
||
| Line 51: | Line 51: | ||
nextTxt: "Next" // "Next" button text | nextTxt: "Next" // "Next" button text | ||
}; | }; | ||
| + | |||
;(function($){ | ;(function($){ | ||
// Local variables | // Local variables | ||
| Line 70: | Line 71: | ||
galleryMode = false, | galleryMode = false, | ||
hideElts = $([]); | hideElts = $([]); | ||
| - | |||
// Init dispatcher | // Init dispatcher | ||
$.superbox = function(){ | $.superbox = function(){ | ||
| Line 84: | Line 84: | ||
dispatch(); | dispatch(); | ||
}; | }; | ||
| - | |||
// Dispatch types | // Dispatch types | ||
| - | function dispatch(){ | + | function dispatch(){ |
| - | + | ||
// Match all superbox links | // Match all superbox links | ||
| - | $("a[rel^=superbox],area[rel^=superbox]").each(function(){ | + | $("a[rel^=superbox],area[rel^=superbox]").each(function(){ |
| - | + | ||
// Optimisation | // Optimisation | ||
var $this = $(this), | var $this = $(this), | ||
| - | relAttr = $this.attr("rel"), | + | relAttr = $this.attr("rel"), |
| - | + | ||
// Match type (ex : superbox[gallery#my_id.my_class][my_gallery] > gallery | // Match type (ex : superbox[gallery#my_id.my_class][my_gallery] > gallery | ||
| - | type = relAttr.match(/^superbox\[([^#\.\]]+)/)[1], | + | type = relAttr.match(/^superbox\[([^#\.\]]+)/)[1], |
| - | + | ||
// Match additionnal classes or IDs (#xxx.yyy.zzz) | // Match additionnal classes or IDs (#xxx.yyy.zzz) | ||
boxCurrentAttrs = relAttr.replace("superbox", "").match(/([#\.][^#\.\]]+)/g) || [], | boxCurrentAttrs = relAttr.replace("superbox", "").match(/([#\.][^#\.\]]+)/g) || [], | ||
| - | |||
// Box ID and classes | // Box ID and classes | ||
newBoxId = settings.boxId, | newBoxId = settings.boxId, | ||
| Line 447: | Line 441: | ||
} | } | ||
}; | }; | ||
| + | |||
// "Prepare" box : Show $superbox with top:-99999px; | // "Prepare" box : Show $superbox with top:-99999px; | ||
function prepareBox(){ | function prepareBox(){ | ||
| Line 458: | Line 453: | ||
// Stop "Loading..." | // Stop "Loading..." | ||
$loading.hide(); | $loading.hide(); | ||
| + | |||
// Keys shortcuts | // Keys shortcuts | ||
$(document).unbind("keydown").bind("keydown",function(e){ | $(document).unbind("keydown").bind("keydown",function(e){ | ||
| Line 469: | Line 465: | ||
$prevBtn.click(); | $prevBtn.click(); | ||
}); | }); | ||
| + | |||
// Show $superbox | // Show $superbox | ||
$superbox.css({position: "static", top: 0, opacity: 0}); | $superbox.css({position: "static", top: 0, opacity: 0}); | ||
| + | |||
// IE6 and IE7 | // IE6 and IE7 | ||
if ($.browser.msie && $.browser.version < 8){ | if ($.browser.msie && $.browser.version < 8){ | ||
| Line 478: | Line 476: | ||
$wrapper.css({position: "absolute", top:"50%"}); | $wrapper.css({position: "absolute", top:"50%"}); | ||
} | } | ||
| + | |||
// Position absolute if image height > window height | // Position absolute if image height > window height | ||
if ( $(window).height() < $wrapper.height() ){ | if ( $(window).height() < $wrapper.height() ){ | ||
$wrapper.css({position: "absolute", top: ($wrapper.offset().top + 10) + "px"}); | $wrapper.css({position: "absolute", top: ($wrapper.offset().top + 10) + "px"}); | ||
} | } | ||
| + | |||
settings.beforeShow(); | settings.beforeShow(); | ||
| + | |||
$superbox.fadeTo(300,1); | $superbox.fadeTo(300,1); | ||
| Line 490: | Line 491: | ||
function createElements(){ | function createElements(){ | ||
if (!$.superbox.elementsReady){ | if (!$.superbox.elementsReady){ | ||
| + | |||
// Overlay (background) | // Overlay (background) | ||
$overlay = $('<div id="superbox-overlay"></div>').appendTo("body").hide(); | $overlay = $('<div id="superbox-overlay"></div>').appendTo("body").hide(); | ||
| + | |||
// Wrapper | // Wrapper | ||
$wrapper = $('<div id="superbox-wrapper"></div>').appendTo("body").hide(); | $wrapper = $('<div id="superbox-wrapper"></div>').appendTo("body").hide(); | ||
| + | |||
// Box container | // Box container | ||
$container = $('<div id="superbox-container"></div>').appendTo($wrapper); | $container = $('<div id="superbox-container"></div>').appendTo($wrapper); | ||
| + | |||
// Box | // Box | ||
$superbox = $('<div id="superbox"></div>').appendTo($container); | $superbox = $('<div id="superbox"></div>').appendTo($container); | ||
| + | |||
// Inner box | // Inner box | ||
$innerbox = $('<div id="superbox-innerbox"></div>').appendTo($superbox); | $innerbox = $('<div id="superbox-innerbox"></div>').appendTo($superbox); | ||
| + | |||
// "Next / Previous" | // "Next / Previous" | ||
$nextprev = $('<p class="nextprev"></p>').appendTo($superbox).hide(); | $nextprev = $('<p class="nextprev"></p>').appendTo($superbox).hide(); | ||
| Line 507: | Line 514: | ||
// Add close button | // Add close button | ||
$closeBtn = $('<p class="close"><a><strong><span>'+ settings.closeTxt +'</span></strong></a></p>').prependTo($superbox).find("a"); | $closeBtn = $('<p class="close"><a><strong><span>'+ settings.closeTxt +'</span></strong></a></p>').prependTo($superbox).find("a"); | ||
| + | |||
// "Loading..." | // "Loading..." | ||
| - | $loading = $('<p class="loading">'+ settings.loadTxt +'</p>').appendTo($container).hide(); | + | $loading = $('<p class="loading">'+ settings.loadTxt +'</p>').appendTo($container).hide(); |
| + | |||
// Hide on click | // Hide on click | ||
$overlay.add($wrapper).add($closeBtn).click(function(){ | $overlay.add($wrapper).add($closeBtn).click(function(){ | ||
hideAll(); | hideAll(); | ||
| - | }); | + | }); |
| + | |||
// Remove "hide on click" on superbox | // Remove "hide on click" on superbox | ||
$superbox.click(function(e){ | $superbox.click(function(e){ | ||
e.stopPropagation(); | e.stopPropagation(); | ||
| - | }); | + | }); |
| + | |||
// Dont call this function twice | // Dont call this function twice | ||
$.superbox.elementsReady = true; | $.superbox.elementsReady = true; | ||
} | } | ||
| - | }; | + | }; |
})(jQuery); | })(jQuery); | ||
| + | |||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 14:17, 2 September 2014
