Team:AUC TURKEY/Test

From 2013hs.igem.org

(Difference between revisions)
Line 42: Line 42:
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
</a>
</a>
-
<div class="caption">
 
-
<div class="download">
 
-
<a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
 
-
</div>
 
-
<div class="image-title">Title #0</div>
 
-
<div class="image-desc">Description</div>
 
-
</div>
 
</li>
</li>
Line 65: Line 58:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
+
-
<a href="http://farm3.static.flickr.com/2093/2538168854_f75e408156_b.jpg">Download Original</a>
+
-
</div>
+
<div class="image-title">Title #2</div>
<div class="image-title">Title #2</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 78: Line 69:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #3</div>
<div class="image-title">Title #3</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 91: Line 79:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_b.jpg">Download Original</a>
 
</div>
</div>
<div class="image-title">Title #4</div>
<div class="image-title">Title #4</div>
Line 104: Line 90:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_b.jpg">Download Original</a>
 
</div>
</div>
<div class="image-title">Title #5</div>
<div class="image-title">Title #5</div>
Line 117: Line 101:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #6</div>
<div class="image-title">Title #6</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 130: Line 111:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm4.static.flickr.com/3205/2538164270_c7d1646ecf_o.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #7</div>
<div class="image-title">Title #7</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 143: Line 121:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #8</div>
<div class="image-title">Title #8</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 156: Line 131:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm3.static.flickr.com/2315/2537343449_f933be8036_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #9</div>
<div class="image-title">Title #9</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 169: Line 141:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #10</div>
<div class="image-title">Title #10</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 182: Line 151:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #11</div>
<div class="image-title">Title #11</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 195: Line 161:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #12</div>
<div class="image-title">Title #12</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 208: Line 171:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #13</div>
<div class="image-title">Title #13</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 221: Line 181:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm3.static.flickr.com/2041/2083498578_114e117aab_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #14</div>
<div class="image-title">Title #14</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 234: Line 191:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #15</div>
<div class="image-title">Title #15</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 247: Line 201:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm3.static.flickr.com/2014/2083478274_26775114dc_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #16</div>
<div class="image-title">Title #16</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 260: Line 211:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm3.static.flickr.com/2194/2083464534_122e849241_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #17</div>
<div class="image-title">Title #17</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 273: Line 221:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #18</div>
<div class="image-title">Title #18</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 286: Line 231:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm3.static.flickr.com/2375/2538172432_3343a47341_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #19</div>
<div class="image-title">Title #19</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 299: Line 241:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #20</div>
<div class="image-title">Title #20</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 312: Line 251:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #21</div>
<div class="image-title">Title #21</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 325: Line 261:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #22</div>
<div class="image-title">Title #22</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 338: Line 271:
</a>
</a>
<div class="caption">
<div class="caption">
-
<div class="download">
 
-
<a href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_b.jpg">Download Original</a>
 
-
</div>
 
<div class="image-title">Title #23</div>
<div class="image-title">Title #23</div>
<div class="image-desc">Description</div>
<div class="image-desc">Description</div>
Line 354: Line 284:
jQuery(document).ready(function($) {
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
// We only want these styles applied when javascript is enabled
-
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
+
$('div.navigation').css({'width' : '150px', 'float' : 'left'});
$('div.content').css('display', 'block');
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
// additional styling for hover effect on thumbs
-
var onMouseOutOpacity = 0.67;
+
var onMouseOutOpacity = 1.0;
$('#thumbs ul.thumbs li').opacityrollover({
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity:  onMouseOutOpacity,
mouseOutOpacity:  onMouseOutOpacity,
Line 370: Line 300:
var gallery = $('#thumbs').galleriffic({
var gallery = $('#thumbs').galleriffic({
delay:                    2500,
delay:                    2500,
-
numThumbs:                15,
+
numThumbs:                5,
-
preloadAhead:              10,
+
preloadAhead:              3,
enableTopPager:            true,
enableTopPager:            true,
enableBottomPager:        true,
enableBottomPager:        true,
-
maxPagesToShow:            7,
+
maxPagesToShow:            2,
imageContainerSel:        '#slideshow',
imageContainerSel:        '#slideshow',
controlsContainerSel:      '#controls',
controlsContainerSel:      '#controls',

Revision as of 05:22, 21 June 2013



Galleriffic

Thumbnail rollover effects and slideshow crossfades

  • Title #5
    Title #5
    Description
  • Title #6
    Title #6
    Description
  • Title #7
    Title #7
    Description
  • Title #8
    Title #8
    Description
  • Title #9
    Title #9
    Description
  • Title #10
    Title #10
    Description
  • Title #11
    Title #11
    Description
  • Title #12
    Title #12
    Description
  • Title #13
    Title #13
    Description
  • Title #14
    Title #14
    Description
  • Title #15
    Title #15
    Description
  • Title #16
    Title #16
    Description
  • Title #17
    Title #17
    Description
  • Title #18
    Title #18
    Description
  • Title #19
    Title #19
    Description
  • Title #20
    Title #20
    Description
  • Title #21
    Title #21
    Description
  • Title #22
    Title #22
    Description
  • Title #23
    Title #23
    Description