Team:Goettingen/project gallery

From 2014.igem.org

(Difference between revisions)
m
(Blanked the page)
 
(10 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>
 
-
$(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($){
 
-
// 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>
 

Latest revision as of 17:28, 17 September 2014

Retrieved from "http://2014.igem.org/Team:Goettingen/project_gallery"