Template:Sifuentes04

From 2014.igem.org

(Difference between revisions)
Line 280: Line 280:
border-radius: 5px;
border-radius: 5px;
}
}
 +
 +
 +
 +
#imageWrap {
 +
    width: 150px;
 +
    height: 150px;
 +
    background: url('ajax-loader.gif') center center no-repeat;
 +
}
</style>
</style>
Line 288: Line 296:
-
 
-
<!-- jquery -->
 
<!-- jquery -->
<!-- jquery -->
<script ="text/javascript">
<script ="text/javascript">
 +
 +
 +
$(document).ready(function() {
 +
    $('.thumbnail').live("click", function() {
 +
        $('#mainImage').hide();
 +
        $('#imageWrap').css('background-image', "url('ajax-loader.gif')");
 +
        var i = $('<img />').attr('src',this.href).load(function() {
 +
            $('#mainImage').attr('src', i.attr('src'));
 +
            $('#imageWrap').css('background-image', 'none');
 +
            $('#mainImage').fadeIn();
 +
        });
 +
        return false;
 +
    });
 +
});
 +
 +
$(document).ready(function() {
$(document).ready(function() {
//Add Inactive Class To All Accordion Headers
//Add Inactive Class To All Accordion Headers
Line 484: Line 506:
</ul>
</ul>
</div>
</div>
 +
 +
 +
<a href="image1.jpg" class="thumbnail"><img src="http://upload.wikimedia.org/wikipedia/commons/d/dd/Kiwi_in_Clogs.JPG"
 +
  alt="Image 1"/></a>
 +
<a href="image2.jpg" class="thumbnail"><img src="http://www.giallozafferano.it/images/prodotti/kiwi.jpg"
 +
  alt="Thumbnail 2"/></a>
 +
 
 +
<div id="imageWrap">
 +
  <img src="image1.jpg" alt="Main Image" id="mainImage"/>
 +
</div>
</div> <!-- this closes the menu div -->
</div> <!-- this closes the menu div -->

Revision as of 22:14, 12 January 2015

Retrieved from "http://2014.igem.org/Template:Sifuentes04"