Team:AUC TURKEY/HumanPractices/iGEMism/Posters

From 2013hs.igem.org

(Difference between revisions)
 
(9 intermediate revisions not shown)
Line 1: Line 1:
{{AUC_Turkey}}
{{AUC_Turkey}}
-
{{IGEMism}}
+
{{iGEMism}}
=Posters=
=Posters=
 +
 +
Each movement has its diverse fields and effects. For a movement to have influence, it must be potent in many fields and one of the most significant of these fields are art.
 +
 +
In general, graphics surpass words in expressing ideas. iGEMist posters are also a great way to express the iGEMist ideology to people. One can incorporate many things from our posters.
 +
 +
We prepared these posters in order to attract many people from many principles to iGEM and iGEMism. Being visually attractive is really crucial in convincing people and with these posters, we believe that people will wish to learn more about iGEM.
 +
 +
<html>
 +
<head>
 +
<script type="text/javascript">/**
 +
* jQuery Galleriffic plugin
 +
*
 +
* Copyright (c) 2008 Trent Foley (http://trentacular.com)
 +
* Licensed under the MIT License:
 +
*  http://www.opensource.org/licenses/mit-license.php
 +
*
 +
* Much thanks to primary contributer Ponticlaro (http://www.ponticlaro.com)
 +
*/
 +
;(function($) {
 +
// Globally keep track of all images by their unique hash.  Each item is an image data object.
 +
var allImages = {};
 +
var imageCounter = 0;
 +
 +
// Galleriffic static class
 +
$.galleriffic = {
 +
version: '2.0.1',
 +
 +
// Strips invalid characters and any leading # characters
 +
normalizeHash: function(hash) {
 +
return hash.replace(/^.*#/, '').replace(/\?.*$/, '');
 +
},
 +
 +
getImage: function(hash) {
 +
if (!hash)
 +
return undefined;
 +
 +
hash = $.galleriffic.normalizeHash(hash);
 +
return allImages[hash];
 +
},
 +
 +
// Global function that looks up an image by its hash and displays the image.
 +
// Returns false when an image is not found for the specified hash.
 +
// @param {String} hash This is the unique hash value assigned to an image.
 +
gotoImage: function(hash) {
 +
var imageData = $.galleriffic.getImage(hash);
 +
if (!imageData)
 +
return false;
 +
 +
var gallery = imageData.gallery;
 +
gallery.gotoImage(imageData);
 +
 +
return true;
 +
},
 +
 +
// Removes an image from its respective gallery by its hash.
 +
// Returns false when an image is not found for the specified hash or the
 +
// specified owner gallery does match the located images gallery.
 +
// @param {String} hash This is the unique hash value assigned to an image.
 +
// @param {Object} ownerGallery (Optional) When supplied, the located images
 +
// gallery is verified to be the same as the specified owning gallery before
 +
// performing the remove operation.
 +
removeImageByHash: function(hash, ownerGallery) {
 +
var imageData = $.galleriffic.getImage(hash);
 +
if (!imageData)
 +
return false;
 +
 +
var gallery = imageData.gallery;
 +
if (!(!ownerGallery || ownerGallery == gallery))
 +
return false;
 +
 +
return gallery.removeImageByIndex(imageData.index);
 +
}
 +
};
 +
 +
var defaults = {
 +
delay:                    3000,
 +
numThumbs:                20,
 +
preloadAhead:              40, // Set to -1 to preload all images
 +
enableTopPager:            false,
 +
enableBottomPager:        true,
 +
maxPagesToShow:            7,
 +
imageContainerSel:        '',
 +
captionContainerSel:      '',
 +
controlsContainerSel:      '',
 +
loadingContainerSel:      '',
 +
renderSSControls:          true,
 +
renderNavControls:        true,
 +
playLinkText:              'Play',
 +
pauseLinkText:            'Pause',
 +
prevLinkText:              'Previous',
 +
nextLinkText:              'Next',
 +
nextPageLinkText:          'Next &rsaquo;',
 +
prevPageLinkText:          '&lsaquo; Prev',
 +
enableHistory:            false,
 +
enableKeyboardNavigation:  true,
 +
autoStart:                false,
 +
syncTransitions:          false,
 +
defaultTransitionDuration: 1000,
 +
onSlideChange:            undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
 +
onTransitionOut:          undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
 +
onTransitionIn:            undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
 +
onPageTransitionOut:      undefined, // accepts a delegate like such: function(callback) { ... }
 +
onPageTransitionIn:        undefined, // accepts a delegate like such: function() { ... }
 +
onImageAdded:              undefined, // accepts a delegate like such: function(imageData, $li) { ... }
 +
onImageRemoved:            undefined  // accepts a delegate like such: function(imageData, $li) { ... }
 +
};
 +
 +
// Primary Galleriffic initialization function that should be called on the thumbnail container.
 +
$.fn.galleriffic = function(settings) {
 +
//  Extend Gallery Object
 +
$.extend(this, {
 +
// Returns the version of the script
 +
version: $.galleriffic.version,
 +
 +
// Current state of the slideshow
 +
isSlideshowRunning: false,
 +
slideshowTimeout: undefined,
 +
 +
// This function is attached to the click event of generated hyperlinks within the gallery
 +
clickHandler: function(e, link) {
 +
this.pause();
 +
 +
if (!this.enableHistory) {
 +
// The href attribute holds the unique hash for an image
 +
var hash = $.galleriffic.normalizeHash($(link).attr('href'));
 +
$.galleriffic.gotoImage(hash);
 +
e.preventDefault();
 +
}
 +
},
 +
 +
// Appends an image to the end of the set of images.  Argument listItem can be either a jQuery DOM element or arbitrary html.
 +
// @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
 +
appendImage: function(listItem) {
 +
this.addImage(listItem, false, false);
 +
return this;
 +
},
 +
 +
// Inserts an image into the set of images.  Argument listItem can be either a jQuery DOM element or arbitrary html.
 +
// @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
 +
// @param {Integer} position The index within the gallery where the item shouold be added.
 +
insertImage: function(listItem, position) {
 +
this.addImage(listItem, false, true, position);
 +
return this;
 +
},
 +
 +
// Adds an image to the gallery and optionally inserts/appends it to the DOM (thumbExists)
 +
// @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
 +
// @param {Boolean} thumbExists Specifies whether the thumbnail already exists in the DOM or if it needs to be added.
 +
// @param {Boolean} insert Specifies whether the the image is appended to the end or inserted into the gallery.
 +
// @param {Integer} position The index within the gallery where the item shouold be added.
 +
addImage: function(listItem, thumbExists, insert, position) {
 +
var $li = ( typeof listItem === "string" ) ? $(listItem) : listItem;
 +
var $aThumb = $li.find('a.thumb');
 +
var slideUrl = $aThumb.attr('href');
 +
var title = $aThumb.attr('title');
 +
var $caption = $li.find('.caption').remove();
 +
var hash = $aThumb.attr('name');
 +
 +
// Increment the image counter
 +
imageCounter++;
 +
 +
// Autogenerate a hash value if none is present or if it is a duplicate
 +
if (!hash || allImages[''+hash]) {
 +
hash = imageCounter;
 +
}
 +
 +
// Set position to end when not specified
 +
if (!insert)
 +
position = this.data.length;
 +
 +
var imageData = {
 +
title:title,
 +
slideUrl:slideUrl,
 +
caption:$caption,
 +
hash:hash,
 +
gallery:this,
 +
index:position
 +
};
 +
 +
// Add the imageData to this gallery's array of images
 +
if (insert) {
 +
this.data.splice(position, 0, imageData);
 +
 +
// Reset index value on all imageData objects
 +
this.updateIndices(position);
 +
}
 +
else {
 +
this.data.push(imageData);
 +
}
 +
 +
var gallery = this;
 +
 +
// Add the element to the DOM
 +
if (!thumbExists) {
 +
// Update thumbs passing in addition post transition out handler
 +
this.updateThumbs(function() {
 +
var $thumbsUl = gallery.find('ul.thumbs');
 +
if (insert)
 +
$thumbsUl.children(':eq('+position+')').before($li);
 +
else
 +
$thumbsUl.append($li);
 +
 +
if (gallery.onImageAdded)
 +
gallery.onImageAdded(imageData, $li);
 +
});
 +
}
 +
 +
// Register the image globally
 +
allImages[''+hash] = imageData;
 +
 +
// Setup attributes and click handler
 +
$aThumb.attr('rel', 'history')
 +
.attr('href', '#'+hash)
 +
.removeAttr('name')
 +
.click(function(e) {
 +
gallery.clickHandler(e, this);
 +
});
 +
 +
return this;
 +
},
 +
 +
// Removes an image from the gallery based on its index.
 +
// Returns false when the index is out of range.
 +
removeImageByIndex: function(index) {
 +
if (index < 0 || index >= this.data.length)
 +
return false;
 +
 +
var imageData = this.data[index];
 +
if (!imageData)
 +
return false;
 +
 +
this.removeImage(imageData);
 +
 +
return true;
 +
},
 +
 +
// Convenience method that simply calls the global removeImageByHash method.
 +
removeImageByHash: function(hash) {
 +
return $.galleriffic.removeImageByHash(hash, this);
 +
},
 +
 +
// Removes an image from the gallery.
 +
removeImage: function(imageData) {
 +
var index = imageData.index;
 +
 +
// Remove the image from the gallery data array
 +
this.data.splice(index, 1);
 +
 +
// Remove the global registration
 +
delete allImages[''+imageData.hash];
 +
 +
// Remove the image's list item from the DOM
 +
this.updateThumbs(function() {
 +
var $li = gallery.find('ul.thumbs')
 +
.children(':eq('+index+')')
 +
.remove();
 +
 +
if (gallery.onImageRemoved)
 +
gallery.onImageRemoved(imageData, $li);
 +
});
 +
 +
// Update each image objects index value
 +
this.updateIndices(index);
 +
 +
return this;
 +
},
 +
 +
// Updates the index values of the each of the images in the gallery after the specified index
 +
updateIndices: function(startIndex) {
 +
for (i = startIndex; i < this.data.length; i++) {
 +
this.data[i].index = i;
 +
}
 +
 +
return this;
 +
},
 +
 +
// Scraped the thumbnail container for thumbs and adds each to the gallery
 +
initializeThumbs: function() {
 +
this.data = [];
 +
var gallery = this;
 +
 +
this.find('ul.thumbs > li').each(function(i) {
 +
gallery.addImage($(this), true, false);
 +
});
 +
 +
return this;
 +
},
 +
 +
isPreloadComplete: false,
 +
 +
// Initalizes the image preloader
 +
preloadInit: function() {
 +
if (this.preloadAhead == 0) return this;
 +
 +
this.preloadStartIndex = this.currentImage.index;
 +
var nextIndex = this.getNextIndex(this.preloadStartIndex);
 +
return this.preloadRecursive(this.preloadStartIndex, nextIndex);
 +
},
 +
 +
// Changes the location in the gallery the preloader should work
 +
// @param {Integer} index The index of the image where the preloader should restart at.
 +
preloadRelocate: function(index) {
 +
// By changing this startIndex, the current preload script will restart
 +
this.preloadStartIndex = index;
 +
return this;
 +
},
 +
 +
// Recursive function that performs the image preloading
 +
// @param {Integer} startIndex The index of the first image the current preloader started on.
 +
// @param {Integer} currentIndex The index of the current image to preload.
 +
preloadRecursive: function(startIndex, currentIndex) {
 +
// Check if startIndex has been relocated
 +
if (startIndex != this.preloadStartIndex) {
 +
var nextIndex = this.getNextIndex(this.preloadStartIndex);
 +
return this.preloadRecursive(this.preloadStartIndex, nextIndex);
 +
}
 +
 +
var gallery = this;
 +
 +
// Now check for preloadAhead count
 +
var preloadCount = currentIndex - startIndex;
 +
if (preloadCount < 0)
 +
preloadCount = this.data.length-1-startIndex+currentIndex;
 +
if (!(!(this.preloadAhead >= 0) || !(preloadCount > this.preloadAhead))) {
 +
// Do this in order to keep checking for relocated start index
 +
setTimeout(function() { gallery.preloadRecursive(startIndex, currentIndex); }, 500);
 +
return this;
 +
}
 +
 +
var imageData = this.data[currentIndex];
 +
if (!imageData)
 +
return this;
 +
 +
// If already loaded, continue
 +
if (imageData.image)
 +
return this.preloadNext(startIndex, currentIndex);
 +
 +
// Preload the image
 +
var image = new Image();
 +
 +
image.onload = function() {
 +
imageData.image = this;
 +
gallery.preloadNext(startIndex, currentIndex);
 +
};
 +
 +
image.alt = imageData.title;
 +
image.src = imageData.slideUrl;
 +
 +
return this;
 +
},
 +
 +
// Called by preloadRecursive in order to preload the next image after the previous has loaded.
 +
// @param {Integer} startIndex The index of the first image the current preloader started on.
 +
// @param {Integer} currentIndex The index of the current image to preload.
 +
preloadNext: function(startIndex, currentIndex) {
 +
var nextIndex = this.getNextIndex(currentIndex);
 +
if (nextIndex == startIndex) {
 +
this.isPreloadComplete = true;
 +
} else {
 +
// Use setTimeout to free up thread
 +
var gallery = this;
 +
setTimeout(function() { gallery.preloadRecursive(startIndex, nextIndex); }, 100);
 +
}
 +
 +
return this;
 +
},
 +
 +
// Safe way to get the next image index relative to the current image.
 +
// If the current image is the last, returns 0
 +
getNextIndex: function(index) {
 +
var nextIndex = index+1;
 +
if (nextIndex >= this.data.length)
 +
nextIndex = 0;
 +
return nextIndex;
 +
},
 +
 +
// Safe way to get the previous image index relative to the current image.
 +
// If the current image is the first, return the index of the last image in the gallery.
 +
getPrevIndex: function(index) {
 +
var prevIndex = index-1;
 +
if (prevIndex < 0)
 +
prevIndex = this.data.length-1;
 +
return prevIndex;
 +
},
 +
 +
// Pauses the slideshow
 +
pause: function() {
 +
this.isSlideshowRunning = false;
 +
if (this.slideshowTimeout) {
 +
clearTimeout(this.slideshowTimeout);
 +
this.slideshowTimeout = undefined;
 +
}
 +
 +
if (this.$controlsContainer) {
 +
this.$controlsContainer
 +
.find('div.ss-controls a').removeClass().addClass('play')
 +
.attr('title', this.playLinkText)
 +
.attr('href', '#play')
 +
.html(this.playLinkText);
 +
}
 +
 +
return this;
 +
},
 +
 +
// Plays the slideshow
 +
play: function() {
 +
this.isSlideshowRunning = true;
 +
 +
if (this.$controlsContainer) {
 +
this.$controlsContainer
 +
.find('div.ss-controls a').removeClass().addClass('pause')
 +
.attr('title', this.pauseLinkText)
 +
.attr('href', '#pause')
 +
.html(this.pauseLinkText);
 +
}
 +
 +
if (!this.slideshowTimeout) {
 +
var gallery = this;
 +
this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay);
 +
}
 +
 +
return this;
 +
},
 +
 +
// Toggles the state of the slideshow (playing/paused)
 +
toggleSlideshow: function() {
 +
if (this.isSlideshowRunning)
 +
this.pause();
 +
else
 +
this.play();
 +
 +
return this;
 +
},
 +
 +
// Advances the slideshow to the next image and delegates navigation to the
 +
// history plugin when history is enabled
 +
// enableHistory is true
 +
ssAdvance: function() {
 +
if (this.isSlideshowRunning)
 +
this.next(true);
 +
 +
return this;
 +
},
 +
 +
// Advances the gallery to the next image.
 +
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
 +
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled. 
 +
next: function(dontPause, bypassHistory) {
 +
this.gotoIndex(this.getNextIndex(this.currentImage.index), dontPause, bypassHistory);
 +
return this;
 +
},
 +
 +
// Navigates to the previous image in the gallery.
 +
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
 +
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
 +
previous: function(dontPause, bypassHistory) {
 +
this.gotoIndex(this.getPrevIndex(this.currentImage.index), dontPause, bypassHistory);
 +
return this;
 +
},
 +
 +
// Navigates to the next page in the gallery.
 +
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
 +
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
 +
nextPage: function(dontPause, bypassHistory) {
 +
var page = this.getCurrentPage();
 +
var lastPage = this.getNumPages() - 1;
 +
if (page < lastPage) {
 +
var startIndex = page * this.numThumbs;
 +
var nextPage = startIndex + this.numThumbs;
 +
this.gotoIndex(nextPage, dontPause, bypassHistory);
 +
}
 +
 +
return this;
 +
},
 +
 +
// Navigates to the previous page in the gallery.
 +
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
 +
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
 +
previousPage: function(dontPause, bypassHistory) {
 +
var page = this.getCurrentPage();
 +
if (page > 0) {
 +
var startIndex = page * this.numThumbs;
 +
var prevPage = startIndex - this.numThumbs;
 +
this.gotoIndex(prevPage, dontPause, bypassHistory);
 +
}
 +
 +
return this;
 +
},
 +
 +
// Navigates to the image at the specified index in the gallery
 +
// @param {Integer} index The index of the image in the gallery to display.
 +
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
 +
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
 +
gotoIndex: function(index, dontPause, bypassHistory) {
 +
if (!dontPause)
 +
this.pause();
 +
 +
if (index < 0) index = 0;
 +
else if (index >= this.data.length) index = this.data.length-1;
 +
 +
var imageData = this.data[index];
 +
 +
if (!(bypassHistory || !this.enableHistory))
 +
$.historyLoad(String(imageData.hash));  // At the moment, historyLoad only accepts string arguments
 +
else
 +
this.gotoImage(imageData);
 +
 +
return this;
 +
},
 +
 +
// This function is garaunteed to be called anytime a gallery slide changes.
 +
// @param {Object} imageData An object holding the image metadata of the image to navigate to.
 +
gotoImage: function(imageData) {
 +
var index = imageData.index;
 +
 +
if (this.onSlideChange)
 +
this.onSlideChange(this.currentImage.index, index);
 +
 +
this.currentImage = imageData;
 +
this.preloadRelocate(index);
 +
 +
this.refresh();
 +
 +
return this;
 +
},
 +
 +
// Returns the default transition duration value.  The value is halved when not
 +
// performing a synchronized transition.
 +
// @param {Boolean} isSync Specifies whether the transitions are synchronized.
 +
getDefaultTransitionDuration: function(isSync) {
 +
if (isSync)
 +
return this.defaultTransitionDuration;
 +
return this.defaultTransitionDuration / 2;
 +
},
 +
 +
// Rebuilds the slideshow image and controls and performs transitions
 +
refresh: function() {
 +
var imageData = this.currentImage;
 +
if (!imageData)
 +
return this;
 +
 +
var index = imageData.index;
 +
 +
// Update Controls
 +
if (this.$controlsContainer) {
 +
this.$controlsContainer
 +
.find('div.nav-controls a.prev').attr('href', '#'+this.data[this.getPrevIndex(index)].hash).end()
 +
.find('div.nav-controls a.next').attr('href', '#'+this.data[this.getNextIndex(index)].hash);
 +
}
 +
 +
var previousSlide = this.$imageContainer.find('span.current').addClass('previous').removeClass('current');
 +
var previousCaption = 0;
 +
 +
if (this.$captionContainer) {
 +
previousCaption = this.$captionContainer.find('span.current').addClass('previous').removeClass('current');
 +
}
 +
 +
// Perform transitions simultaneously if syncTransitions is true and the next image is already preloaded
 +
var isSync = !(!this.syncTransitions || !imageData.image);
 +
 +
// Flag we are transitioning
 +
var isTransitioning = true;
 +
var gallery = this;
 +
 +
var transitionOutCallback = function() {
 +
// Flag that the transition has completed
 +
isTransitioning = false;
 +
 +
// Remove the old slide
 +
previousSlide.remove();
 +
 +
// Remove old caption
 +
if (previousCaption)
 +
previousCaption.remove();
 +
 +
if (!isSync) {
 +
if (!(!imageData.image || imageData.hash != gallery.data[gallery.currentImage.index].hash)) {
 +
gallery.buildImage(imageData, isSync);
 +
} else {
 +
// Show loading container
 +
if (gallery.$loadingContainer) {
 +
gallery.$loadingContainer.show();
 +
}
 +
}
 +
}
 +
};
 +
 +
if (previousSlide.length == 0) {
 +
// For the first slide, the previous slide will be empty, so we will call the callback immediately
 +
transitionOutCallback();
 +
} else {
 +
if (this.onTransitionOut) {
 +
this.onTransitionOut(previousSlide, previousCaption, isSync, transitionOutCallback);
 +
} else {
 +
previousSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, transitionOutCallback);
 +
if (previousCaption)
 +
previousCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
 +
}
 +
}
 +
 +
// Go ahead and begin transitioning in of next image
 +
if (isSync)
 +
this.buildImage(imageData, isSync);
 +
 +
if (!imageData.image) {
 +
var image = new Image();
 +
 +
// Wire up mainImage onload event
 +
image.onload = function() {
 +
imageData.image = this;
 +
 +
// Only build image if the out transition has completed and we are still on the same image hash
 +
if (!(isTransitioning || imageData.hash != gallery.data[gallery.currentImage.index].hash)) {
 +
gallery.buildImage(imageData, isSync);
 +
}
 +
};
 +
 +
// set alt and src
 +
image.alt = imageData.title;
 +
image.src = imageData.slideUrl;
 +
}
 +
 +
// This causes the preloader (if still running) to relocate out from the currentIndex
 +
this.relocatePreload = true;
 +
 +
return this.syncThumbs();
 +
},
 +
 +
// Called by the refresh method after the previous image has been transitioned out or at the same time
 +
// as the out transition when performing a synchronous transition.
 +
// @param {Object} imageData An object holding the image metadata of the image to build.
 +
// @param {Boolean} isSync Specifies whether the transitions are synchronized.
 +
buildImage: function(imageData, isSync) {
 +
var gallery = this;
 +
var nextIndex = this.getNextIndex(imageData.index);
 +
 +
// Construct new hidden span for the image
 +
var newSlide = this.$imageContainer
 +
.append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'">&nbsp;</a></span>')
 +
.find('span.current').css('opacity', '0');
 +
 +
newSlide.find('a')
 +
.append(imageData.image)
 +
.click(function(e) {
 +
gallery.clickHandler(e, this);
 +
});
 +
 +
var newCaption = 0;
 +
if (this.$captionContainer) {
 +
// Construct new hidden caption for the image
 +
newCaption = this.$captionContainer
 +
.append('<span class="image-caption current"></span>')
 +
.find('span.current').css('opacity', '0')
 +
.append(imageData.caption);
 +
}
 +
 +
// Hide the loading conatiner
 +
if (this.$loadingContainer) {
 +
this.$loadingContainer.hide();
 +
}
 +
 +
// Transition in the new image
 +
if (this.onTransitionIn) {
 +
this.onTransitionIn(newSlide, newCaption, isSync);
 +
} else {
 +
newSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
 +
if (newCaption)
 +
newCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
 +
}
 +
 +
if (this.isSlideshowRunning) {
 +
if (this.slideshowTimeout)
 +
clearTimeout(this.slideshowTimeout);
 +
 +
this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay);
 +
}
 +
 +
return this;
 +
},
 +
 +
// Returns the current page index that should be shown for the currentImage
 +
getCurrentPage: function() {
 +
return Math.floor(this.currentImage.index / this.numThumbs);
 +
},
 +
 +
// Applies the selected class to the current image's corresponding thumbnail.
 +
// Also checks if the current page has changed and updates the displayed page of thumbnails if necessary.
 +
syncThumbs: function() {
 +
var page = this.getCurrentPage();
 +
if (page != this.displayedPage)
 +
this.updateThumbs();
 +
 +
// Remove existing selected class and add selected class to new thumb
 +
var $thumbs = this.find('ul.thumbs').children();
 +
$thumbs.filter('.selected').removeClass('selected');
 +
$thumbs.eq(this.currentImage.index).addClass('selected');
 +
 +
return this;
 +
},
 +
 +
// Performs transitions on the thumbnails container and updates the set of
 +
// thumbnails that are to be displayed and the navigation controls.
 +
// @param {Delegate} postTransitionOutHandler An optional delegate that is called after
 +
// the thumbnails container has transitioned out and before the thumbnails are rebuilt.
 +
updateThumbs: function(postTransitionOutHandler) {
 +
var gallery = this;
 +
var transitionOutCallback = function() {
 +
// Call the Post-transition Out Handler
 +
if (postTransitionOutHandler)
 +
postTransitionOutHandler();
 +
 +
gallery.rebuildThumbs();
 +
 +
// Transition In the thumbsContainer
 +
if (gallery.onPageTransitionIn)
 +
gallery.onPageTransitionIn();
 +
else
 +
gallery.show();
 +
};
 +
 +
// Transition Out the thumbsContainer
 +
if (this.onPageTransitionOut) {
 +
this.onPageTransitionOut(transitionOutCallback);
 +
} else {
 +
this.hide();
 +
transitionOutCallback();
 +
}
 +
 +
return this;
 +
},
 +
 +
// Updates the set of thumbnails that are to be displayed and the navigation controls.
 +
rebuildThumbs: function() {
 +
var needsPagination = this.data.length > this.numThumbs;
 +
 +
// Rebuild top pager
 +
if (this.enableTopPager) {
 +
var $topPager = this.find('div.top');
 +
if ($topPager.length == 0)
 +
$topPager = this.prepend('<div class="top pagination"></div>').find('div.top');
 +
else
 +
$topPager.empty();
 +
 +
if (needsPagination)
 +
this.buildPager($topPager);
 +
}
 +
 +
// Rebuild bottom pager
 +
if (this.enableBottomPager) {
 +
var $bottomPager = this.find('div.bottom');
 +
if ($bottomPager.length == 0)
 +
$bottomPager = this.append('<div class="bottom pagination"></div>').find('div.bottom');
 +
else
 +
$bottomPager.empty();
 +
 +
if (needsPagination)
 +
this.buildPager($bottomPager);
 +
}
 +
 +
var page = this.getCurrentPage();
 +
var startIndex = page*this.numThumbs;
 +
var stopIndex = startIndex+this.numThumbs-1;
 +
if (stopIndex >= this.data.length)
 +
stopIndex = this.data.length-1;
 +
 +
// Show/Hide thumbs
 +
var $thumbsUl = this.find('ul.thumbs');
 +
$thumbsUl.find('li').each(function(i) {
 +
var $li = $(this);
 +
if (!(i < startIndex || i > stopIndex)) {
 +
$li.show();
 +
} else {
 +
$li.hide();
 +
}
 +
});
 +
 +
this.displayedPage = page;
 +
 +
// Remove the noscript class from the thumbs container ul
 +
$thumbsUl.removeClass('noscript');
 +
 +
return this;
 +
},
 +
 +
// Returns the total number of pages required to display all the thumbnails.
 +
getNumPages: function() {
 +
return Math.ceil(this.data.length/this.numThumbs);
 +
},
 +
 +
// Rebuilds the pager control in the specified matched element.
 +
// @param {jQuery} pager A jQuery element set matching the particular pager to be rebuilt.
 +
buildPager: function(pager) {
 +
var gallery = this;
 +
var numPages = this.getNumPages();
 +
var page = this.getCurrentPage();
 +
var startIndex = page * this.numThumbs;
 +
var pagesRemaining = this.maxPagesToShow - 1;
 +
 +
var pageNum = page - Math.floor((this.maxPagesToShow - 1) / 2) + 1;
 +
if (pageNum > 0) {
 +
var remainingPageCount = numPages - pageNum;
 +
if (remainingPageCount < pagesRemaining) {
 +
pageNum = pageNum - (pagesRemaining - remainingPageCount);
 +
}
 +
}
 +
 +
if (pageNum < 0) {
 +
pageNum = 0;
 +
}
 +
 +
// Prev Page Link
 +
if (page > 0) {
 +
var prevPage = startIndex - this.numThumbs;
 +
pager.append('<a rel="history" href="#'+this.data[prevPage].hash+'" title="'+this.prevPageLinkText+'">'+this.prevPageLinkText+'</a>');
 +
}
 +
 +
// Create First Page link if needed
 +
if (pageNum > 0) {
 +
this.buildPageLink(pager, 0, numPages);
 +
if (pageNum > 1)
 +
pager.append('<span class="ellipsis">&hellip;</span>');
 +
 +
pagesRemaining--;
 +
}
 +
 +
// Page Index Links
 +
while (pagesRemaining > 0) {
 +
this.buildPageLink(pager, pageNum, numPages);
 +
pagesRemaining--;
 +
pageNum++;
 +
}
 +
 +
// Create Last Page link if needed
 +
if (pageNum < numPages) {
 +
var lastPageNum = numPages - 1;
 +
if (pageNum < lastPageNum)
 +
pager.append('<span class="ellipsis">&hellip;</span>');
 +
 +
this.buildPageLink(pager, lastPageNum, numPages);
 +
}
 +
 +
// Next Page Link
 +
var nextPage = startIndex + this.numThumbs;
 +
if (nextPage < this.data.length) {
 +
pager.append('<a rel="history" href="#'+this.data[nextPage].hash+'" title="'+this.nextPageLinkText+'">'+this.nextPageLinkText+'</a>');
 +
}
 +
 +
pager.find('a').click(function(e) {
 +
gallery.clickHandler(e, this);
 +
});
 +
 +
return this;
 +
},
 +
 +
// Builds a single page link within a pager.  This function is called by buildPager
 +
// @param {jQuery} pager A jQuery element set matching the particular pager to be rebuilt.
 +
// @param {Integer} pageNum The page number of the page link to build.
 +
// @param {Integer} numPages The total number of pages required to display all thumbnails.
 +
buildPageLink: function(pager, pageNum, numPages) {
 +
var pageLabel = pageNum + 1;
 +
var currentPage = this.getCurrentPage();
 +
if (pageNum == currentPage)
 +
pager.append('<span class="current">'+pageLabel+'</span>');
 +
else if (pageNum < numPages) {
 +
var imageIndex = pageNum*this.numThumbs;
 +
pager.append('<a rel="history" href="#'+this.data[imageIndex].hash+'" title="'+pageLabel+'">'+pageLabel+'</a>');
 +
}
 +
 +
return this;
 +
}
 +
});
 +
 +
// Now initialize the gallery
 +
$.extend(this, defaults, settings);
 +
 +
// Verify the history plugin is available
 +
if (!(!this.enableHistory || $.historyInit))
 +
this.enableHistory = false;
 +
 +
// Select containers
 +
if (this.imageContainerSel) this.$imageContainer = $(this.imageContainerSel);
 +
if (this.captionContainerSel) this.$captionContainer = $(this.captionContainerSel);
 +
if (this.loadingContainerSel) this.$loadingContainer = $(this.loadingContainerSel);
 +
 +
// Initialize the thumbails
 +
this.initializeThumbs();
 +
 +
if (this.maxPagesToShow < 3)
 +
this.maxPagesToShow = 3;
 +
 +
this.displayedPage = -1;
 +
this.currentImage = this.data[0];
 +
var gallery = this;
 +
 +
// Hide the loadingContainer
 +
if (this.$loadingContainer)
 +
this.$loadingContainer.hide();
 +
 +
// Setup controls
 +
if (this.controlsContainerSel) {
 +
this.$controlsContainer = $(this.controlsContainerSel).empty();
 +
 +
if (this.renderSSControls) {
 +
if (this.autoStart) {
 +
this.$controlsContainer
 +
.append('<div class="ss-controls"><a href="#pause" class="pause" title="'+this.pauseLinkText+'">'+this.pauseLinkText+'</a></div>');
 +
} else {
 +
this.$controlsContainer
 +
.append('<div class="ss-controls"><a href="#play" class="play" title="'+this.playLinkText+'">'+this.playLinkText+'</a></div>');
 +
}
 +
 +
this.$controlsContainer.find('div.ss-controls a')
 +
.click(function(e) {
 +
gallery.toggleSlideshow();
 +
e.preventDefault();
 +
return false;
 +
});
 +
}
 +
 +
if (this.renderNavControls) {
 +
this.$controlsContainer
 +
.append('<div class="nav-controls"><a class="prev" rel="history" title="'+this.prevLinkText+'">'+this.prevLinkText+'</a><a class="next" rel="history" title="'+this.nextLinkText+'">'+this.nextLinkText+'</a></div>')
 +
.find('div.nav-controls a')
 +
.click(function(e) {
 +
gallery.clickHandler(e, this);
 +
});
 +
}
 +
}
 +
 +
var initFirstImage = !this.enableHistory || !location.hash;
 +
if (!(!this.enableHistory || !location.hash)) {
 +
var hash = $.galleriffic.normalizeHash(location.hash);
 +
var imageData = allImages[hash];
 +
if (!imageData)
 +
initFirstImage = true;
 +
}
 +
 +
// Setup gallery to show the first image
 +
if (initFirstImage)
 +
this.gotoIndex(0, false, true);
 +
 +
// Setup Keyboard Navigation
 +
if (this.enableKeyboardNavigation) {
 +
$(document).keydown(function(e) {
 +
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
 +
switch(key) {
 +
case 32: // space
 +
gallery.next();
 +
e.preventDefault();
 +
break;
 +
case 33: // Page Up
 +
gallery.previousPage();
 +
e.preventDefault();
 +
break;
 +
case 34: // Page Down
 +
gallery.nextPage();
 +
e.preventDefault();
 +
break;
 +
case 35: // End
 +
gallery.gotoIndex(gallery.data.length-1);
 +
e.preventDefault();
 +
break;
 +
case 36: // Home
 +
gallery.gotoIndex(0);
 +
e.preventDefault();
 +
break;
 +
case 37: // left arrow
 +
gallery.previous();
 +
e.preventDefault();
 +
break;
 +
case 39: // right arrow
 +
gallery.next();
 +
e.preventDefault();
 +
break;
 +
}
 +
});
 +
}
 +
 +
// Auto start the slideshow
 +
if (this.autoStart)
 +
this.play();
 +
 +
// Kickoff Image Preloader after 1 second
 +
setTimeout(function() { gallery.preloadInit(); }, 1000);
 +
 +
return this;
 +
};
 +
})(jQuery);
 +
</script>
 +
<style type="text/css">
 +
div#page html, body {
 +
margin:0;
 +
padding:0;
 +
}
 +
div#page body{
 +
text-align: center;
 +
font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
 +
background-color: #eee;
 +
color: #444;
 +
font-size: 75%;
 +
}
 +
div#page a{
 +
color: #27D;
 +
text-decoration: none;
 +
}
 +
div#page a:focus, a:hover, a:active {
 +
text-decoration: underline;
 +
}
 +
div#page p, li {
 +
line-height: 1.8em;
 +
}
 +
div#page h1, h2 {
 +
font-family: "Trebuchet MS", Verdana, sans-serif;
 +
margin: 0 0 10px 0;
 +
letter-spacing:-1px;
 +
}
 +
div#page h1 {
 +
padding: 0;
 +
font-size: 3em;
 +
}
 +
div#page h2 {
 +
padding-top: 10px;
 +
font-size:2em;
 +
}
 +
div#page pre {
 +
font-size: 1.2em;
 +
line-height: 1.2em;
 +
overflow-x: auto;
 +
}
 +
div#page {
 +
width: 7500px;
 +
margin: 0 auto;
 +
text-align: left;
 +
}
 +
div#page div#container {
 +
padding: 20px;
 +
}
 +
div#page div#ads {
 +
clear: both;
 +
padding: 12px 0 12px 66px;
 +
}
 +
div#page div#footer {
 +
clear: both;
 +
color: #777;
 +
margin: 0 auto;
 +
padding: 20px 0 40px;
 +
text-align: center;
 +
}
 +
div#page div.content {
 +
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
 +
display: none;
 +
float: right;
 +
width: 550px;
 +
}
 +
div#page div.content a, div.navigation a {
 +
text-decoration: none;
 +
color: #777;
 +
}
 +
div#page div.content a:focus, div.content a:hover, div.content a:active {
 +
text-decoration: underline;
 +
}
 +
div#page div.controls {
 +
margin-top: 5px;
 +
height: 23px;
 +
        color:white;
 +
}
 +
div#page div.controls a {
 +
padding: 5px;
 +
        color:white;
 +
}
 +
 +
div#page div.slideshow-container {
 +
position: relative;
 +
z-index: -99999;
 +
clear: both;
 +
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
 +
}
 +
div#page div.loader {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
background-image: url('https://static.igem.org/mediawiki/2013hs/7/7e/AUC_TURKEY_LOADER.GIF');
 +
background-repeat: no-repeat;
 +
background-position: center;
 +
width: 550px;
 +
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
 +
}
 +
div#page div.slideshow {
 +
 +
}
 +
div#page div.slideshow span.image-wrapper {
 +
display: block;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
}
 +
div#page div.slideshow a.advance-link {
 +
display: block;
 +
width: 550px;
 +
height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
 +
line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
 +
text-align: center;
 +
}
 +
div#page div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
 +
text-decoration: none;
 +
}
 +
div#page div.slideshow img {
 +
vertical-align: middle;
 +
border: 1px solid #ccc;
 +
}
 +
div#page div.download {
 +
display:none;
 +
}
 +
div#page div.caption-container {
 +
position: relative;
 +
clear: left;
 +
height: 75px;
 +
}
 +
div#page span.image-caption {
 +
display: block;
 +
position: absolute;
 +
width: 550px;
 +
top: 0;
 +
left: 0;
 +
}
 +
div#page div.caption {
 +
padding: 12px;
 +
}
 +
div#page div.image-title {
 +
font-weight: bold;
 +
font-size: 1.4em;
 +
z-index:-99999;
 +
position:relative;
 +
}
 +
div#page div.image-desc {
 +
line-height: 1.3em;
 +
padding-top: 12px;
 +
}
 +
div#page div.navigation {
 +
/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
 +
}
 +
div#page ul.thumbs {
 +
clear: both;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
div#page ul.thumbs li {
 +
float: left;
 +
padding: 0;
 +
margin: 5px 10px 5px 0;
 +
list-style: none;
 +
}
 +
div#page a.thumb {
 +
padding: 2px;
 +
display: block;
 +
border: 1px solid #ccc;
 +
}
 +
div#page ul.thumbs li.selected a.thumb {
 +
background: #000;
 +
}
 +
div#page h1, div#page h2, div#page h3
 +
{
 +
border-style:none;
 +
}
 +
div#page a.thumb:focus {
 +
outline: none;
 +
}
 +
div#page ul.thumbs img {
 +
border: none;
 +
display: block;
 +
}
 +
div#page div.pagination {
 +
clear: both;
 +
}
 +
div#page div.navigation div.top {
 +
margin-bottom: 12px;
 +
height: 11px;
 +
}
 +
div#page div.navigation div.bottom {
 +
margin-top: 12px;
 +
}
 +
div#page div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
 +
display: block;
 +
float: left;
 +
margin-right: 2px;
 +
padding: 4px 7px 2px 7px;
 +
border: 1px solid #ccc;
 +
}
 +
div#page div.pagination a:hover {
 +
background-color: #eee;
 +
text-decoration: none;
 +
}
 +
div#page div.pagination span.current {
 +
font-weight: bold;
 +
background-color: #000;
 +
border-color: #000;
 +
color: #fff;
 +
}
 +
div#page div.pagination span.ellipsis {
 +
border: none;
 +
padding: 5px 0 3px 2px;
 +
}
 +
div#page{
 +
        width:750px;
 +
        border-style:none;
 +
        background:none;}
 +
</style>
 +
<script type="text/javascript">
 +
;(function($) {
 +
$.fn.opacityrollover = function(settings) {
 +
 +
};
 +
})(jQuery);
 +
 +
</script>
 +
<!-- We only want the thunbnails to display when javascript is disabled -->
 +
<script type="text/javascript">
 +
document.write('<style>.noscript { display: none; }</style>');
 +
</script>
 +
</head>
 +
<body>
 +
<div id="page">
 +
<div id="container">
 +
<h1>iGEMism Posters</h1>
 +
<h2>Click thumbnails on left to view posters.</h2>
 +
 +
<!-- Start Advanced Gallery Html Containers -->
 +
<div id="gallery" class="content">
 +
<div id="controls" class="controls"></div>
 +
<div class="slideshow-container">
 +
<div id="loading" class="loader"></div>
 +
<div id="slideshow" class="slideshow"></div>
 +
</div>
 +
<div id="caption" class="caption-container"></div>
 +
</div>
 +
<div id="thumbs" class="navigation">
 +
<ul class="thumbs noscript">
 +
<li>
 +
<a class="thumb" name="pic-1" href="https://static.igem.org/mediawiki/2013hs/a/a1/AUC_TURKEY_POSTER_HOUSE.jpg">
 +
<img src="https://static.igem.org/mediawiki/2013hs/5/5a/AUC_TURKEY_POSTER_HOUSE_THUMB.jpg"/>
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="https://static.igem.org/mediawiki/2013hs/a/a1/AUC_TURKEY_POSTER_HOUSE.jpg">Download Original</a>
 +
</div>
 +
<div class="image-title">We are HOUSEing another poster!</div>
 +
</div>
 +
</li><li>
 +
<a class="thumb" name="pic-2" href="https://static.igem.org/mediawiki/2013hs/2/27/AUC_TURKEY_POSTER_IGEMISMTV.jpg">
 +
<img src="https://static.igem.org/mediawiki/2013hs/a/a4/AUC_TURKEY_POSTER_IGEMISMTV_THUMB.jpg"/>
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="https://static.igem.org/mediawiki/2013hs/2/27/AUC_TURKEY_POSTER_IGEMISMTV.jpg">Download Original</a>
 +
</div>
 +
<div class="image-title">Synthetic Biology: Future depends on it!</div>
 +
</div>
 +
</li><li>
 +
<a class="thumb" name="pic-3" href="https://static.igem.org/mediawiki/2013hs/9/91/AUC_TURKEY_POSTER_KILIM.jpg">
 +
<img src="https://static.igem.org/mediawiki/2013hs/f/f9/AUC_TURKEY_POSTER_KILIM_THUMB.jpg"/>
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="https://static.igem.org/mediawiki/2013hs/9/91/AUC_TURKEY_POSTER_KILIM.jpg">Download Original</a>
 +
</div>
 +
<div class="image-title">When RNA is weaved into a "kilim" of emotions...</div>
 +
</div>
 +
</li><li>
 +
<a class="thumb" name="pic-4" href="https://static.igem.org/mediawiki/2013hs/b/b5/AUC_TURKEY_POSTER_LAST_HOPE.jpg">
 +
<img src="https://static.igem.org/mediawiki/2013hs/f/fd/AUC_TURKEY_POSTER_LAST_HOPE_THUMB.jpg"/>
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="https://static.igem.org/mediawiki/2013hs/b/b5/AUC_TURKEY_POSTER_LAST_HOPE.jpg">Download Original</a>
 +
</div>
 +
<div class="image-title">Let us shape the world through Synthetic Biology!</div>
 +
</div>
 +
</li><li>
 +
<a class="thumb" name="pic-5" href="https://static.igem.org/mediawiki/2013hs/f/f7/AUC_TURKEY_POSTER_LOTR.png">
 +
<img src="https://static.igem.org/mediawiki/2013hs/5/5d/AUC_TURKEY_POSTER_LOTR_THUMB.png"/>
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="https://static.igem.org/mediawiki/2013hs/f/f7/AUC_TURKEY_POSTER_LOTR.png">Download Original</a>
 +
</div>
 +
<div class="image-title">One Plasmid to rule them all, One Plasmid to find them,<br/>
 +
One Plasmid to bring them all and in the darkness bind them </div>
 +
</div>
 +
</li><li>
 +
<a class="thumb" name="pic-6" href="https://static.igem.org/mediawiki/2013hs/a/a1/AUC_TURKEY_POSTER_OLYMPIAD.jpg">
 +
<img src="https://static.igem.org/mediawiki/2013hs/0/03/AUC_TURKEY_POSTER_OLYMPIAD_THUMB.jpg"/>
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="https://static.igem.org/mediawiki/2013hs/a/a1/AUC_TURKEY_POSTER_OLYMPIAD.jpg">Download Original</a>
 +
</div>
 +
<div class="image-title">This Jamboree, we present you "Parts Olympiad"!</div>
 +
</div>
 +
</li><li>
 +
<a class="thumb" name="pic-7" href="https://static.igem.org/mediawiki/2013hs/5/5d/AUC_TURKEY_POSTER_PIPETTA.jpg">
 +
<img src="https://static.igem.org/mediawiki/2013hs/1/10/AUC_TURKEY_POSTER_PIPETTA_THUMB.jpg"/>
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="https://static.igem.org/mediawiki/2013hs/5/5d/AUC_TURKEY_POSTER_PIPETTA.jpg">Download Original</a>
 +
</div>
 +
<div class="image-title">P FOR PIPETTA<br/>"PIPETTING FOREVER"</div>
 +
</div>
 +
</li><li>
 +
<a class="thumb" name="pic-8" href="https://static.igem.org/mediawiki/2013hs/1/12/AUC_TURKEY_POSTER_TURKISH_COFFEE.JPG">
 +
<img src="https://static.igem.org/mediawiki/2013hs/c/c6/AUC_TURKEY_POSTER_TURKISH_COFFEE_THUMB.jpg"/>
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="https://static.igem.org/mediawiki/2013hs/1/12/AUC_TURKEY_POSTER_TURKISH_COFFEE.JPG">Download Original</a>
 +
</div>
 +
<div class="image-title">Drinking Turkish coffee iGEM style!</div>
 +
</div>
 +
</li><li>
 +
<a class="thumb" name="pic-9" href="https://static.igem.org/mediawiki/2013hs/1/1b/AUC_TURKEY_POSTER_UNCLE_SAM.png">
 +
<img src="https://static.igem.org/mediawiki/2013hs/2/26/AUC_TURKEY_POSTER_UNCLE_SAM_THUMB.png"/>
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="https://static.igem.org/mediawiki/2013hs/1/1b/AUC_TURKEY_POSTER_UNCLE_SAM.png">Download Original</a>
 +
</div>
 +
<div class="image-title">I WANT YOU FOR iGEM</div>
 +
</div>
 +
</li><li>
 +
<a class="thumb" name="pic-10" href="https://static.igem.org/mediawiki/2013hs/9/97/AUC_TURKEY_POSTER_UNITED_WE_STAND.jpg">
 +
<img src="https://static.igem.org/mediawiki/2013hs/7/7d/AUC_TURKEY_POSTER_UNITED_WE_STAND_THUMB.jpg"/>
 +
</a>
 +
<div class="caption">
 +
<div class="download">
 +
<a href="https://static.igem.org/mediawiki/2013hs/9/97/AUC_TURKEY_POSTER_UNITED_WE_STAND.jpg">Download Original</a>
 +
</div>
 +
<div class="image-title">Together we eat, together we sleep. In the lab or in the street, UNITED WE STAND!</div>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
 +
<div style="clear: both;"></div>
 +
</div>
 +
</div>
 +
<script type="text/javascript">
 +
jQuery(document).ready(function($) {
 +
// We only want these styles applied when javascript is enabled
 +
$('div.navigation').css({'width' : '150px', 'float' : 'left'});
 +
$('div.content').css('display', 'block');
 +
 +
// Initially set opacity on thumbs and add
 +
// additional styling for hover effect on thumbs
 +
var onMouseOutOpacity = 1.0;
 +
$('#thumbs ul.thumbs li').opacityrollover({
 +
mouseOutOpacity:  onMouseOutOpacity,
 +
mouseOverOpacity:  1.0,
 +
fadeSpeed:        'fast',
 +
exemptionSelector: '.selected'
 +
});
 +
 +
// Initialize Advanced Galleriffic Gallery
 +
var gallery = $('#thumbs').galleriffic({
 +
delay:                    5000,
 +
numThumbs:                5,
 +
preloadAhead:              1,
 +
enableTopPager:            true,
 +
enableBottomPager:        true,
 +
maxPagesToShow:            4,
 +
imageContainerSel:        '#slideshow',
 +
controlsContainerSel:      '#controls',
 +
captionContainerSel:      '#caption',
 +
loadingContainerSel:      '#loading',
 +
renderSSControls:          true,
 +
renderNavControls:        true,
 +
playLinkText:              'Play Slideshow',
 +
pauseLinkText:            'Pause Slideshow',
 +
prevLinkText:              '&lsaquo; Previous Photo',
 +
nextLinkText:              'Next Photo &rsaquo;',
 +
nextPageLinkText:          'Next &rsaquo;',
 +
prevPageLinkText:          '&lsaquo; Prev',
 +
enableHistory:            false,
 +
autoStart:                true,
 +
syncTransitions:          true,
 +
defaultTransitionDuration: 1000,
 +
onSlideChange:            function(prevIndex, nextIndex) {
 +
// 'this' refers to the gallery, which is an extension of $('#thumbs')
 +
this.find('ul.thumbs').children()
 +
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
 +
.eq(nextIndex).fadeTo('fast', 1.0);
 +
},
 +
onPageTransitionOut:      function(callback) {
 +
this.fadeTo('fast', 0.0, callback);
 +
},
 +
onPageTransitionIn:        function() {
 +
this.fadeTo('fast', 1.0);
 +
}
 +
});
 +
});
 +
</script>
 +
</body>
 +
</html>

Latest revision as of 17:12, 21 June 2013



Posters

Each movement has its diverse fields and effects. For a movement to have influence, it must be potent in many fields and one of the most significant of these fields are art.

In general, graphics surpass words in expressing ideas. iGEMist posters are also a great way to express the iGEMist ideology to people. One can incorporate many things from our posters.

We prepared these posters in order to attract many people from many principles to iGEM and iGEMism. Being visually attractive is really crucial in convincing people and with these posters, we believe that people will wish to learn more about iGEM.

iGEMism Posters

Click thumbnails on left to view posters.

Retrieved from "http://2013hs.igem.org/Team:AUC_TURKEY/HumanPractices/iGEMism/Posters"