Created
April 8, 2011 12:01
-
-
Save andrellima/909708 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", "jquery.galleriffic", "jquery.opacityrollover" %> | |
<%= stylesheet_link_tag "s1", "s2", "some", "galleriffic-2" %> | |
<script type="text/javascript"> | |
jQuery(document).ready(function($) { | |
// We only want these styles applied when javascript is enabled | |
$('div.navigation').css({'width' : '300px', 'float' : 'left'}); | |
$('div.content').css('display', 'block'); | |
// Initially set opacity on thumbs and add | |
// additional styling for hover effect on thumbs | |
var onMouseOutOpacity = 0.67; | |
$('#thumbs ul.thumbs li').opacityrollover({ | |
mouseOutOpacity: onMouseOutOpacity, | |
mouseOverOpacity: 1.0, | |
fadeSpeed: 'fast', | |
exemptionSelector: '.selected' | |
}); | |
// Initialize Advanced Galleriffic Gallery | |
var gallery = $('#thumbs').galleriffic({ | |
delay: 2500, | |
numThumbs: 15, | |
preloadAhead: 10, | |
enableTopPager: true, | |
enableBottomPager: true, | |
maxPagesToShow: 7, | |
imageContainerSel: '#slideshow', | |
controlsContainerSel: '#controls', | |
captionContainerSel: '#caption', | |
loadingContainerSel: '#loading', | |
renderSSControls: true, | |
renderNavControls: true, | |
playLinkText: 'Play Slideshow', | |
pauseLinkText: 'Pause Slideshow', | |
prevLinkText: '‹ Previous Photo', | |
nextLinkText: 'Next Photo ›', | |
nextPageLinkText: 'Next ›', | |
prevPageLinkText: '‹ Prev', | |
enableHistory: false, | |
autoStart: false, | |
syncTransitions: true, | |
defaultTransitionDuration: 900, | |
onSlideChange: function(prevIndex, nextIndex) { | |
// 'this' refers to the gallery, which is an extension of $('#thumbs') | |
this.find('ul.thumbs').children() | |
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end() | |
.eq(nextIndex).fadeTo('fast', 1.0); | |
}, | |
onPageTransitionOut: function(callback) { | |
this.fadeTo('fast', 0.0, callback); | |
}, | |
onPageTransitionIn: function() { | |
this.fadeTo('fast', 1.0); | |
} | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="gallery" class="content"> | |
<div class="slideshow-container"> | |
<div class="main_image"> | |
<div id = "gallery" class = "controls"> | |
<div id = "controls" class = "controls"> | |
<div class="nav-controls"> | |
<a title="‹ Previous Photo" rel="history" class="prev" href="0">‹ Previous Photo</a> | |
<a title="Next Photo ›" rel="history" class="next" href="1">Next Photo ›</a> | |
</div> | |
</div> | |
<div id="slideshow" class="slideshow"> | |
<% if @gallery_photos.first.geometry == 'vertical' %> | |
<a href="1"> <img src="<%= @gallery_photos.first.photo.url("large") %>" style="height:420px;" /> | |
</a> | |
<% else %> | |
<img src="<%= @gallery_photos.first.photo.url("large") %>" style="width:500px;" /> | |
<% 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> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="image_thumb"> | |
<div id="thumbs" class="navigation"> | |
<ul class="thumbs noscript"> | |
<% @gallery_photos.each do |g| %> | |
<% if g.geometry == 'vertical' %> | |
<li> <img src = "<%= g.photo.url("small") %>" style="height:65px;"/> | |
<% else %> | |
<img src="<%= g.photo.url("small") %>" style="height:65px; width:80px;"/></li></a> | |
<% end %> | |
<% end %> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment