|
|
(7 intermediate revisions not shown) |
Line 4: |
Line 4: |
| | | |
| <div id="divAbout"> | | <div id="divAbout"> |
- | <div id="divContent"><br><br><p style="color: #FFF; font-size: 12px; font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif; text-align: left;"> | + | <div id="divContent"><br><br><p style="color: #FFF; font-size: 12px; font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif; text-align: center;"> |
| | | |
| </p> | | </p> |
- | <div class="slideshow"> | + | <div id='cincopa_widget_e7e325ef-7fd0-46bb-8d46-3c135235ba2c'><img src='//www.cincopa.com/media-platform/runtime/loading.gif' style='border:0;'/></div> |
- | <ul>
| + | <script src='//www.cincopa.com/media-platform/runtime/libasync.js' type='text/javascript'></script> |
- | <li><img src="https://static.igem.org/mediawiki/2013/0/05/20130629_170857.jpg" alt="01" height="20" width="240"/></li>
| + | <script type='text/javascript'>cp_load_widget('A4GAbOrk-HpW', 'cincopa_widget_e7e325ef-7fd0-46bb-8d46-3c135235ba2c');</script> |
- | <li><img src="https://static.igem.org/mediawiki/2013/8/8e/20130629_170934.jpg" alt="02" height="20" width="240"/></li>
| + | |
- | <li><img src="https://static.igem.org/mediawiki/2013/9/9b/20130629_171557.jpg" alt="03" height="20" width="240"/></li>
| + | |
- | <li><img src="lemons/4.jpg" alt="salad with lemon" /></li>
| + | |
- | <li><img src="lemons/5.jpg" alt="lemonade!" /></li>
| + | |
- | <li><img src="lemons/6.jpg" alt="sliced lemon" /></li>
| + | |
- | <li><img src="lemons/7.jpg" alt="dripping lemon" /></li>
| + | |
- | </ul>
| + | |
- | </div>
| + | |
| | | |
- | <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0)">1</a>
| |
- | <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(1)">2</a>
| |
- | <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(2)">3</a>
| |
- | <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(3)">4</a>
| |
- | <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(4)">5</a>
| |
- | <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(5)">6</a>
| |
- | <a href="#" class="change_link" onclick="$('.slideshow').blinds_change(6)">7</a>
| |
- | </div>
| |
| </div> | | </div> |
- | <script type="text/javascript"> | + | </div> |
- | (function($){
| + | |
- | | + | |
- | $.fn.blinds = function (options) {
| + | |
- | | + | |
- | $(this).find('li').hide();
| + | |
- | $(this).addClass('blinds_slideshow');
| + | |
- | | + | |
- | settings = {};
| + | |
- | settings.tile_orchestration = this.tile_orchestration;
| + | |
- | | + | |
- | settings.h_res = 12;
| + | |
- | settings.v_res = 1;
| + | |
- | | + | |
- | settings.width = $(this).find('li:first').width();
| + | |
- | settings.height = $(this).find('li:first').height();
| + | |
- | | + | |
- | jQuery.extend(settings, options);
| + | |
- | | + | |
- | tiles_width = settings.width / settings.h_res;
| + | |
- | tiles_height = settings.height / settings.v_res;
| + | |
- | | + | |
- | // Get image list
| + | |
- | blinds_images = [];
| + | |
- | $(this).find('img').each(function (i, e) {
| + | |
- | blinds_images[blinds_images.length] = {'title': e.alt, 'src': e.src}
| + | |
- | });
| + | |
- | | + | |
- | // Create blinds_container
| + | |
- | $(this).append('<div class="blinds_container"></div>');
| + | |
- | | + | |
- | blinds_container = $(this).find('.blinds_container');
| + | |
- | blinds_container.css({
| + | |
- | 'position' : 'relative',
| + | |
- | 'display' : 'block',
| + | |
- | 'width' : settings.width,
| + | |
- | 'height' : settings.height,
| + | |
- | // 'border' : '1px solid red', // debuging
| + | |
- | 'background': 'transparent url("' + blinds_images[1]['src'] + '") 0px 0px no-repeat'
| + | |
- | } );
| + | |
- | // Setup tiles
| + | |
- | for (i = 0; i < settings.h_res; i++)
| + | |
- | {
| + | |
- | for (j = 0; j < settings.v_res; j++)
| + | |
- | {
| + | |
- | if (tile = $(this).find('.tile_' + i + '_' + j))
| + | |
- | {
| + | |
- | h = '<div class="outer_tile_' + i + '_' + j + '"><div class="tile_' + i + '_' + j + '"></div></div>';
| + | |
- | blinds_container.append(h);
| + | |
- | outer_tile = $(this).find('.outer_tile_' + i + '_' + j);
| + | |
- | outer_tile.css({
| + | |
- | 'position' : 'absolute',
| + | |
- | 'width' : tiles_width,
| + | |
- | 'height' : tiles_height,
| + | |
- | 'left' : i * tiles_width,
| + | |
- | 'top' : j * tiles_height
| + | |
- | })
| + | |
- | | + | |
- | tile = $(this).find('.tile_' + i + '_' + j);
| + | |
- | tile.css({
| + | |
- | 'position' : 'absolute',
| + | |
- | 'width' : tiles_width,
| + | |
- | 'height' : tiles_height,
| + | |
- | 'left' : 0,
| + | |
- | 'top' : 0,
| + | |
- | // 'border' : '1px solid red', // debuging
| + | |
- | 'background': 'transparent url("' + blinds_images[0]['src'] + '") -' + (i * tiles_width) + 'px -' + (j * tiles_height) + 'px no-repeat'
| + | |
- | })
| + | |
- |
| + | |
- | jQuery.data($(tile)[0], 'blinds_position', {'i': i, 'j': j});
| + | |
- | }
| + | |
- | }
| + | |
- | }
| + | |
- | | + | |
- | jQuery.data(this[0], 'blinds_config', {
| + | |
- | 'h_res': settings.h_res,
| + | |
- | 'v_res': settings.v_res,
| + | |
- | 'tiles_width': tiles_width,
| + | |
- | 'tiles_height': tiles_height,
| + | |
- | 'images': blinds_images,
| + | |
- | 'img_index': 0,
| + | |
- | 'change_buffer': 0,
| + | |
- | 'tile_orchestration': settings.tile_orchestration
| + | |
- | });
| + | |
- | }
| + | |
- |
| + | |
- | $.fn.blinds_change = function (img_index) {
| + | |
- | | + | |
- | // reset all sprites
| + | |
- | config = jQuery.data($(this)[0], 'blinds_config');
| + | |
- | for (i = 0; i < config.h_res; i++)
| + | |
- | {
| + | |
- | for (j = 0; j < config.v_res; j++) {
| + | |
- | $(this).find('.tile_' + i + '_' + j).show().css('background', 'transparent ' + 'url("' + config.images[config.img_index]['src'] + '") -' + (i * config.tiles_width) + 'px -' + (j * config.tiles_height) + 'px no-repeat');
| + | |
- | }
| + | |
- | }
| + | |
- | | + | |
- | $(this).children('.blinds_container').css('background', 'transparent url("' + blinds_images[img_index]['src'] + '") 0px 0px no-repeat' );
| + | |
- | | + | |
- | config.img_index = img_index;
| + | |
- | jQuery.data($(this)[0], 'blinds_config', config);
| + | |
- | | + | |
- | for (i = 0; i < config.h_res; i++)
| + | |
- | {
| + | |
- | for (j = 0; j < config.v_res; j++) {
| + | |
- | t = config.tile_orchestration(i, j, config.h_res, config.v_res);
| + | |
- |
| + | |
- | config = jQuery.data($(this)[0], 'blinds_config');
| + | |
- | config.change_buffer = config.change_buffer + 1;
| + | |
- | jQuery.data(this[0], 'blinds_config', config);
| + | |
- | | + | |
- | $(this).find('.tile_' + i + '_' + j).fadeOut(t, function() {
| + | |
- | blinds_pos = jQuery.data($(this)[0], 'blinds_position');
| + | |
- | config = jQuery.data($(this).parents('.blinds_slideshow')[0], 'blinds_config');
| + | |
- | | + | |
- | $(this).css('background', 'transparent ' + 'url("' + config.images[config.img_index]['src'] + '") -' + (blinds_pos.i * config.tiles_width) + 'px -' + (blinds_pos.j * config.tiles_height) + 'px no-repeat');
| + | |
- | | + | |
- | config.change_buffer = config.change_buffer - 1;
| + | |
- | jQuery.data($(this).parents('.blinds_slideshow')[0], 'blinds_config', config);
| + | |
- | | + | |
- | if (config.change_buffer == 0) {
| + | |
- | // $(this).parent().parent().children().children().css('width', config.tiles_width);
| + | |
- | $(this).parent().parent().children().children().show();
| + | |
- | }
| + | |
- | | + | |
- | });
| + | |
- | }
| + | |
- | }
| + | |
- | }
| + | |
- | | + | |
- | $.fn.tile_orchestration = function (i, j, total_x, total_y) {
| + | |
- | return (Math.abs(i-total_x/2)+Math.abs(j-total_y/2))*100;
| + | |
- | }
| + | |
| | | |
- | })(jQuery);
| |
- | $(window).load(function () {
| |
- | $('.slideshow').blinds();
| |
- | })
| |
- | </script>
| |
| </body> | | </body> |
| </html> | | </html> |
| {{:Team:Hong_Kong_HKU/templates/footer}} | | {{:Team:Hong_Kong_HKU/templates/footer}} |