Team:Hong Kong HKU/contact us

From 2013.igem.org

(Difference between revisions)
 
(11 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="lemons/1.jpg" alt="lemon" /></li>
+
<script type='text/javascript'>cp_load_widget('A4GAbOrk-HpW', 'cincopa_widget_e7e325ef-7fd0-46bb-8d46-3c135235ba2c');</script>
-
      <li><img src="lemons/2.jpg" alt="lemon tea" /></li>
+
-
      <li><img src="lemons/3.jpg" alt="splashing lemon" /></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}}

Latest revision as of 06:34, 22 August 2013
Our Sponsors:

lee kofa savantas ricardo


Retrieved from "http://2013.igem.org/Team:Hong_Kong_HKU/contact_us"