Team:Sevilla/Gallery

From 2011.igem.org

(Difference between revisions)
Line 3: Line 3:
<html>
<html>
<!=====================================================HTML====================================-->
<!=====================================================HTML====================================-->
-
<div class="main_image">
+
<ul class="thumb">
-
    <img src="https://lh5.googleusercontent.com/-K7Q1LwBW7QA/TibF4TnNxlI/AAAAAAAAAUo/miCeJN4viEU/s144/IMG_4727.JPG" alt="" />
+
<li><a href="#"><img src="https://lh3.googleusercontent.com/--fN95DhBGM8/TibGE2DB7-I/AAAAAAAAAWE/MDonZbL0fNA/s144/IMG_4705.JPG.jpg" alt="" /></a></li>
-
    <div class="desc">
+
<li><a href="#"><img src="thumb2.jpg" alt="" /></a></li>
-
        <a href="#" class="collapse">Close Me!</a>
+
<li><a href="#"><img src="thumb3.jpg" alt="" /></a></li>
-
        <div class="block">
+
<li><a href="#"><img src="thumb4.jpg" alt="" /></a></li>
-
            <h2>Title</h2>
+
<li><a href="#"><img src="thumb5.jpg" alt="" /></a></li>
-
            <small>Date</small>
+
<li><a href="#"><img src="thumb6.jpg" alt="" /></a></li>
-
            <p>Copy</p>
+
<li><a href="#"><img src="thumb7.jpg" alt="" /></a></li>
-
        </div>
+
<li><a href="#"><img src="thumb8.jpg" alt="" /></a></li>
-
    </div>
+
<li><a href="#"><img src="thumb9.jpg" alt="" /></a></li>
-
</div>
+
</ul>
-
 
+
-
<div class="image_thumb">
+
-
    <ul>
+
-
        <li>
+
-
            <a href="banner1.jpg"><img src="banner1_thumb.jpg" alt="Image Name" /></a>
+
-
            <div class="block">
+
-
                <h2>Title</h2>
+
-
                <small>Date</small>
+
-
                <p>Copy</p>
+
-
            </div>
+
-
        </li>
+
-
    </ul>
+
-
</div>
+
<!=====================================================CSS====================================-->
<!=====================================================CSS====================================-->
<style>
<style>
-
.main_image {
+
ul.thumb {
-
    width: 598px;
+
float: left;
-
    height: 456px;
+
list-style: none;
-
    float: left;
+
margin: 0; padding: 10px;
-
    background: #333;
+
width: 360px;
-
    position: relative;
+
-
    overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/
+
-
    color: #fff;
+
}
}
-
.main_image h2 {
+
ul.thumb li {
-
    font-size: 2em;
+
margin: 0; padding: 5px;
-
    font-weight: normal;
+
float: left;
-
    margin: 0 0 5px;
+
position: relative; /* Set the absolute positioning base coordinate */
-
    padding: 10px;
+
width: 110px;
 +
height: 110px;
}
}
-
.main_image p {
+
ul.thumb li img {
-
    font-size: 1.2em;
+
width: 100px; height: 100px; /* Set the small thumbnail size */
-
    line-height: 1.6em;
+
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
-
    padding: 10px;
+
border: 1px solid #ddd;
-
    margin: 0;
+
padding: 5px;
 +
background: #f0f0f0;
 +
position: absolute;
 +
left: 0; top: 0;
}
}
-
.block small { /*--We'll be using this same style on our thumbnail list--*/
+
ul.thumb li img.hover {
-
    font-size: 1em;
+
background:url(thumb_bg.png) no-repeat center center; /* Image used as background on hover effect
-
    padding: 0 0 0 20px;
+
border: none; /* Get rid of border on hover */
-
    background: url(icon_calendar.gif) no-repeat 0 center;
+
}
}
-
.main_image .block small {margin-left: 10px;}
 
-
.main_image .desc{
 
-
    position: absolute;
 
-
    bottom: 0;
 
-
    left: 0; /*--Stick the desc class to the bottom of our main image container--*/
 
-
    width: 100%;
 
-
    display: none; /*--Hide description by default, if js is enabled, we will show this--*/
 
-
}
 
-
.main_image .block{
 
-
    width: 100%;
 
-
    background: #111;
 
-
    border-top: 1px solid #000;
 
-
}
 
-
.main_image a.collapse { /*--This is our hide/show tab--*/
 
-
    background: url(btn_collapse.gif) no-repeat left top;
 
-
    height: 27px;
 
-
    width: 93px;
 
-
    text-indent: -99999px;
 
-
    position: absolute;
 
-
    top: -27px;
 
-
    right: 20px;
 
-
}
 
-
.main_image a.show {background-position: left bottom;}
 
-
 
-
.image_thumb {
 
-
    float: left;
 
-
    width: 299px;
 
-
    background: #f0f0f0;
 
-
    border-right: 1px solid #fff;
 
-
    border-top: 1px solid #ccc;
 
-
}
 
-
.image_thumb img {
 
-
    border: 1px solid #ccc;
 
-
    padding: 5px;
 
-
    background: #fff;
 
-
    float: left;
 
-
}
 
-
.image_thumb ul {
 
-
    margin: 0;
 
-
    padding: 0;
 
-
    list-style: none;
 
-
}
 
-
.image_thumb ul li{
 
-
    margin: 0;
 
-
    padding: 12px 10px;
 
-
    background: #f0f0f0 url(nav_a.gif) repeat-x;
 
-
    width: 279px;
 
-
    float: left;
 
-
    border-bottom: 1px solid #ccc;
 
-
    border-top: 1px solid #fff;
 
-
    border-right: 1px solid #ccc;
 
-
}
 
-
.image_thumb ul li.hover { /*--Hover State--*/
 
-
    background: #ddd;
 
-
    cursor: pointer;
 
-
}
 
-
.image_thumb ul li.active { /*--Active State--*/
 
-
    background: #fff;
 
-
    cursor: default;
 
-
}
 
-
html .image_thumb ul li h2 {
 
-
    font-size: 1.5em;
 
-
    margin: 5px 0;
 
-
    padding: 0;
 
-
}
 
-
.image_thumb ul li .block {
 
-
    float: left;
 
-
    margin-left: 10px;
 
-
    padding: 0;
 
-
    width: 170px;
 
-
}
 
-
.image_thumb ul li p{display: none;}/*--Hide the description on the list items--*/
 
</style>
</style>
-
 
<!=====================================================JS====================================-->
<!=====================================================JS====================================-->
<script type="text/javascript">
<script type="text/javascript">
 +
$("ul.thumb li").hover(function() {
 +
$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/
 +
$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
 +
.animate({
 +
marginTop: '-110px', /* The next 4 lines will vertically align this image */
 +
marginLeft: '-110px',
 +
top: '50%',
 +
left: '50%',
 +
width: '174px', /* Set new width */
 +
height: '174px', /* Set new height */
 +
padding: '20px'
 +
}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
-
 
+
} , function() {
-
$(".main_image .desc").show(); //Show Banner
+
$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
-
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity
+
$(this).find('img').removeClass("hover").stop() /* Remove the "hover" class , then stop animation queue buildup*/
-
 
+
.animate({
-
 
+
marginTop: '0', /* Set alignment back to default */
-
$(".image_thumb ul li:first").addClass('active'); //Add the active class (highlights the very first list item by default)
+
marginLeft: '0',
-
$(".image_thumb ul li").click(function(){
+
top: '0',
-
    //Set Variables
+
left: '0',
-
    var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
+
width: '100px', /* Set width back to default */
-
    var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
+
height: '100px', /* Set height back to default */
-
    var imgDesc = $(this).find('.block').html();  //Get HTML of the "block" container
+
padding: '5px'
-
    var imgDescHeight = $(".main_image").find('.block').height(); //Find the height of the "block"
+
}, 400);
-
 
+
-
    if ($(this).is(".active")) {  //If the list item is active/selected, then...
+
-
        return false; // Don't click through - Prevents repetitive animations on active/selected list-item
+
-
    } else { //If not active then...
+
-
        //Animate the Description
+
-
        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { //Pull the block down (negative bottom margin of its own height)
+
-
            $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 ); //swap the html of the block, then pull the block container back up and set opacity
+
-
            $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); //Switch the main image (URL + alt tag)
+
-
        });
+
-
    }
+
-
    //Show active list-item
+
-
    $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all list-items
+
-
    $(this).addClass('active');  //Add class of 'active' on the selected list
+
-
    return false;
+
-
 
+
-
}) .hover(function(){ //Hover effects on list-item
+
-
    $(this).addClass('hover'); //Add class "hover" on hover
+
-
    }, function() {
+
-
    $(this).removeClass('hover'); //Remove class "hover" on hover out
+
-
});
+
-
 
+
-
$("a.collapse").click(function(){
+
-
    $(".main_banner .block").slideToggle(); //Toggle the description (slide up and down)
+
-
    $("a.collapse").toggleClass("show"); //Toggle the class name of "show" (the hide/show tab)
+
});
});
</script>
</script>

Revision as of 16:58, 23 July 2011

Retrieved from "http://2011.igem.org/Team:Sevilla/Gallery"