Created
April 4, 2011 12:27
-
-
Save andrellima/901553 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<%= javascript_include_tag "rotator", "jquery-rails", "jquery" %> | |
<%= stylesheet_link_tag "rotator", "s1", "s2" %> | |
</head> | |
<body> | |
<div class="main_iamge"> | |
<% if @gallery_photos.first.geometry == 'vertical' %> | |
<span id = "leftControl" class = "control" style = "display: block;"> left </span> | |
<div id = "photo_container"> | |
<a href= "<%= @gallery_photos.first.photo.url("large") %>" > <img src="<%= @gallery_photos.first.photo.url("large") %>" style="height:420px;" /> | |
<% else %> | |
<img src="<%= @gallery_photos.first.photo.url("large") %>" style="width:500px;" /> | |
<span id="rightControl" class="control">Clicking moves right</span> | |
</div> | |
<% end %> | |
<div class="desc"> | |
<a href="#" class="collapse">Close Me!</a> | |
<div class="block"> | |
<a href="http://twitter.com/share" class="twitter-share-button" data-text="Foto de divulgação." data-count="none" data-via="andre_llima_">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> | |
<small>Date</small> | |
<p>Copy</p> | |
</div> | |
</div> | |
</div> | |
<div class="image_thumb"> | |
<ul> | |
<li> | |
<% @gallery_photos.each do |g| %> | |
<% if g.geometry == 'vertical' %> | |
<a href = "0" id = "thumb" > <img src = "<%= g.photo.url("small") %>" style="height:65px;"/></a> | |
<% else %> | |
<img src="<%= g.photo.url("small") %>" style="height:65px; width:80px;"/></li></a> | |
<% end %> | |
<% end %> | |
<div class="block"> | |
<h2>Title</h2> | |
<small>Date</small> | |
<p>Copy</p> | |
</div> | |
</li> | |
</ul> | |
</div> | |
</body> | |
</html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
$(".main_image .desc").show(); //Show Banner | |
$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity | |
$(".image_thumb ul li:first").addClass('active'); //Add the active class (highlights the very first list item by default) | |
$(".image_thumb ul li").click(function(){ | |
//Set Variables | |
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image | |
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL | |
var imgDesc = $(this).find('.block').html(); //Get HTML of the "block" container | |
var imgDescHeight = $(".main_image").find('.block').height(); //Find the height of the "block" | |
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) | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment