Download as
Browse Code »

Commit f920d2dd2ad3555aff926715ecf932831cfa8385

Authored by Moises Machado
Committed by Antonio Terceiro
1 parent 08f5a543
Exists in master and in 23 other branches activate_plugin, api_fixies, api_tasks, article_blog_visualization_format, article_layout_refactoring, article_layout_temp, blog_page_bug, clone_article, communities_ratings, design_template, event_layout, fix_forum, fix_optional_fields, fix_suggest_article, folder_improvments, manage_organization, merge_deactive_and_ban, news_page, script_to_update, stable, template_mirror_block, tests, tests_fixies

ActionItem929: changed gallery to picachoose

Showing 15 changed files with 595 additions and 848 deletions   Show diff stats
app/controllers/public/content_viewer_controller.rb
  Diff comments   View file @f920d2d
... ... @@ -87,6 +87,9 @@ class ContentViewerController < ApplicationController
87 87 end
88 88  
89 89 @comments = @page.comments(true)
  90 + if params[:slideshow]
  91 + render :action => 'slideshow', :layout => 'slideshow'
  92 + end
90 93 end
91 94  
92 95 protected
... ...
app/views/content_viewer/image_gallery.rhtml
  Diff comments   View file @f920d2d
1 1 <div class="image-gallery">
2   - <% if params[:slideshow] %>
3   - <p><%= button('', _('View as gallery'), @page.url)%></p>
4   -
5   - <div id='slideshow' >
6   - <% @images.each do |img| %>
7   - <%= image_tag(url_for(img.url), :alt => (img.abstract.blank? ? img.name : img.abstract)) if img.image? %>
8   - <% end %>
9   - </div>
10   -
11   - <link href="/javascripts/jquery.aslideshow/simple/styles.css" media="screen" rel="stylesheet" type="text/css" />
12   - <script type="text/javascript" src="/javascripts/jquery.aslideshow.js"></script>
13   -
14   - <script type="text/javascript">
15   - //<![CDATA[
16   - jQuery(document).ready(function(){
17   - jQuery('#slideshow').slideshow({ width: 640, height: 480, playframe: false, play: true, controls : { hide: false }, imgresize:false, effect:false });
18   - });
19   - //]]>
20   - </script>
21   -
22   - <% else %>
23   - <p><%= button('', _('View as slideshow'), @page.url.merge(:slideshow => true))%></p>
  2 + <p><%= button(:slideshow, _('View as slideshow'), @page.url.merge(:slideshow => true))%></p>
24 3 <ul>
25 4 <% @images.each do |a| %>
26 5 <li class="image-gallery-item">
... ... @@ -29,7 +8,6 @@
29 8 </li>
30 9 <% end %>
31 10 </ul>
32   - <% end %>
33 11 <br style="clear:both" />
34 12 <%= will_paginate @images, :param_name => 'npage' %>
35 13 </div>
... ...
app/views/content_viewer/slideshow.rhtml 0 → 100644
  Diff comments   View file @f920d2d
... ... @@ -0,0 +1,8 @@
  1 +<p class='back-button' ><%= button('', _('Back to gallery'), @page.url)%></p>
  2 +<ul id='slideshow' >
  3 + <% @images.each do |img| -%>
  4 + <% if img.image? -%>
  5 + <li><%= image_tag(url_for(img.url), :title => (img.abstract.blank? ? img.name : img.abstract)) %></li>
  6 + <% end -%>
  7 + <% end unless @images.blank? -%>
  8 +</ul>
... ...
app/views/layouts/slideshow.rhtml 0 → 100644
  Diff comments   View file @f920d2d
... ... @@ -0,0 +1,32 @@
  1 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2 + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3 +<html>
  4 + <head>
  5 + <title><%=
  6 + (@page ? @page.name + ' - ' : '') +
  7 + (@profile ? @profile.name + ' - ' : '') +
  8 + @environment.name +
  9 + (@category ? "&rarr; #{@category.full_name}" : '')
  10 + %></title>
  11 +
  12 + <%= stylesheet_import "slideshow" %>
  13 + <%= javascript_include_tag 'jquery-latest', 'sliderjs', 'pikachoose' %>
  14 + <script language="javascript">
  15 + <!--
  16 + $(document).ready(function (){
  17 + $("#slideshow").PikaChoose();
  18 + $("#slideshow").SliderJS({
  19 + window_width: 320,
  20 + window_height: 55,
  21 + list_width: 832,
  22 + pikachoose: true,
  23 + auto_play: false
  24 + });
  25 + });
  26 + -->
  27 + </script>
  28 + </head>
  29 + <body>
  30 + <%= yield %>
  31 + </body>
  32 +</html>
... ...
public/designs/icons/default/slideshow.gif 0 → 100644
View file @f920d2d

589 Bytes
public/designs/icons/default/style.css
  Diff comments   View file @f920d2d
... ... @@ -55,3 +55,4 @@
55 55 .icon-menu-people { background-image: url(album-HC.gif) }
56 56 .icon-menu-mail { background-image: url(mail-HC.gif) }
57 57 .icon-upload-file { background-image: url(go-up-HC.gif) }
  58 +.icon-slideshow { background-image: url(slideshow.gif) }
... ...
public/javascripts/jquery.aslideshow.js
View file @08f5a54
... ... @@ -1,645 +0,0 @@
1   -/**
2   - * jQuery (a)Slideshow plugin
3   - *
4   - * Copyright (c) 2008 Trent Foley
5   - * Dual licensed under the MIT (MIT-LICENSE.txt)
6   - * and GPL (GPL-LICENSE.txt) licenses.
7   - *
8   - * @author Anton Shevchuk AntonShevchuk@gmail.com
9   - * @version 0.5.5
10   - */
11   -;(function($) {
12   - defaults = {
13   - width:320, // width in px
14   - height:240, // height in px
15   - index:0, // start from frame number N
16   - time:3000, // time out beetwen slides
17   - title:true, // show title
18   - titleshow:false,// always show title
19   - panel:true, // show controls panel
20   - play:false, // play slideshow
21   - loop:true,
22   - effect:'fade', // aviable fade, scrollUp/Down/Left/Right, zoom, zoomFade, growX, growY
23   - effecttime:1000,// aviable fast,slow,normal and any valid fx speed value
24   - filter:true, // remove <br/>, empty <div>, <p> and other stuff
25   - nextclick:false, // bind content click next slide
26   - playclick:false, // bind content click play/stop
27   - playhover:false, // bind content hover play/stop
28   - playhoverr:false, // bind content hover stop/play (reverse of playhover)
29   - playframe:true, // show frame "Play Now!"
30   - fullscreen:false, // in full window size
31   - imgresize:false, // resize image to slideshow window
32   - imgcenter:true, // set image to center // TODO
33   - imgajax:true, // load images from links
34   - linkajax:false, // load html from links
35   - help:'Plugin homepage: <a href="http://slideshow.hohli.com">(a)Slideshow</a><br/>'+
36   - 'Author homepage: <a href="http://anton.shevchuk.name">Anton Shevchuk</a>',
37   -
38   - controls :{ // show/hide controls elements
39   - 'hide':true, // show controls bar on mouse hover
40   - 'first':true, // goto first frame
41   - 'prev':true, // goto previouse frame (if it first go to last)
42   - 'play':true, // play slideshow
43   - 'next':true, // goto next frame (if it last go to first)
44   - 'last':true, // goto last frame
45   - 'help':true, // show help message
46   - 'counter':true // show slide counter
47   - }
48   - };
49   - /**
50   - * Create a new instance of slideshow.
51   - *
52   - * @classDescription This class creates a new slideshow and manipulate it
53   - *
54   - * @return {Object} Returns a new slideshow object.
55   - * @constructor
56   - */
57   - $.fn.slideshow = function(settings) {
58   -
59   - var _slideshow = this;
60   -
61   - /*
62   - * Construct
63   - */
64   - this.each(function(){
65   -
66   - var ext = $(this);
67   -
68   - this.playFlag = false;
69   - this.playId = null;
70   - this.length = 0;
71   - this.inited = new Array();
72   -
73   - /**
74   - * Build Html
75   - * @method
76   - */
77   - this.build = function () {
78   - var _self = this;
79   -
80   - ext.wrapInner('<div class="slideshow"><div class="slideshow-content"></div></div>');
81   - ext = ext.find('.slideshow');
82   -
83   - // filter content
84   - if (this.options.filter) {
85   - ext.find('.slideshow-content > br').remove();
86   - ext.find('.slideshow-content > p:empty').remove();
87   - ext.find('.slideshow-content > div:empty').remove();
88   - }
89   -
90   -
91   - // fullscreen
92   - if (this.options.fullscreen) {
93   - $('body').css({overflow:'hidden', padding:0});
94   -
95   - this.options.width = $(window).width();
96   - this.options.height = ($(window).height()>$(document).height())?$(window).height():$(document).height();
97   -
98   -// this.options.width = this.options.width;
99   -// this.options.height = this.options.height;
100   -
101   - ext.addClass('slideshow-fullscreen');
102   - }
103   -
104   - this.length = ext.find('.slideshow-content > *').length;
105   -
106   - // build title
107   - if (this.options.title) {
108   - ext.prepend('<div class="slideshow-label-place"><div class="slideshow-label slideshow-opacity"></div></div>');
109   -
110   - if (!this.options.titleshow) {
111   - ext.find('.slideshow-label-place').hover(function(){
112   - $(this).find('.slideshow-label').fadeIn();
113   - }, function() {
114   - $(this).find('.slideshow-label').fadeOut();
115   - });
116   - ext.find('.slideshow-label').hide();
117   - }
118   -
119   -
120   - ext.find('.slideshow-label-place').css('width', this.options.width);
121   - }
122   -
123   - // build panel
124   - if (this.options.panel) {
125   - ext.append('<div class="slideshow-panel-place"><div class="slideshow-panel slideshow-opacity"></div></div>');
126   - panel = ext.find('.slideshow-panel');
127   - if (this.options.controls.first)
128   - panel.append('<a class="first slideshowbutton" href="#first">First</a>');
129   -
130   - if (this.options.controls.prev)
131   - panel.append('<a class="prev slideshowbutton" href="#prev">Prev</a>');
132   -
133   - if (this.options.controls.play)
134   - panel.append('<a class="play slideshowbutton" href="#play">Play</a>');
135   -
136   - if (this.options.controls.next)
137   - panel.append('<a class="next slideshowbutton" href="#next">Next</a>');
138   -
139   - if (this.options.controls.last)
140   - panel.append('<a class="last slideshowbutton" href="#last">Last</a>');
141   -
142   - if (this.options.controls.help) {
143   - panel.append('<a class="help slideshowbutton" href="#help">Help</a>');
144   - panel.prepend('<div class="slideshow-help">'+this.options.help+'</div>');
145   -
146   -// panel.find('.slideshow-help').css('width', this.options.width - 4 + 'px');
147   - }
148   -
149   -
150   - if (this.options.controls.counter) {
151   - panel.append('<span class="counter">'+(this.options.index+1)+' / '+this.length+'</span>');
152   - }
153   -
154   - if (this.options.controls.hide) {
155   - ext.find('.slideshow-panel-place').hover(function(){
156   - $(this).find('.slideshow-panel').fadeIn();
157   - }, function() {
158   - $(this).find('.slideshow-panel').fadeOut();
159   - });
160   - panel.hide();
161   - }
162   -
163   -
164   - ext.find('.slideshow-panel-place').css('width', this.options.width);
165   - }
166   -
167   - /**
168   - * Set Size Options
169   - */
170   - ext.css('width', this.options.width + 'px');
171   -// ext.css('height', this.options.height + 'px');
172   -
173   - ext.find('.slideshow-content').css('width', this.options.width);
174   - ext.find('.slideshow-content').css('height', this.options.height);
175   -
176   - /**
177   - * Change children styles
178   - */
179   - ext.find('.slideshow-content > *').each(function(){
180   - _self._build($(this));
181   - });
182   -
183   - // init slide (replace by ajax etc)
184   - this.init(this.options.index);
185   -
186   - // hide all slides
187   - ext.find('.slideshow-content > *:not(:eq('+this.options.index+'))').hide();
188   -
189   - // show label
190   - this.label();
191   -
192   - // add playframe
193   - if (this.options.playframe) {
194   - ext.find('.slideshow-content').append('<div class="slideshow-shadow slideshow-opacity"><div class="slideshow-frame"></div></div>');
195   - }
196   -
197   - // bind all events
198   - this.events();
199   -
200   - return true;
201   - };
202   -
203   - /**
204   - * Change CSS for every entity
205   - */
206   - this._build = function(el){
207   - el.css({margin :0,
208   - position: 'absolute',
209   - left: (this.options.width/2 - el.attr('width')/2),
210   - top : (this.options.height/2 - el.attr('height')/2),
211   - overflow:'hidden'
212   - });
213   -
214   - if (el.is('img') && this.options.imgresize || el.is(':not(img)')){
215   - el.css({width:'100%',height:'100%'});
216   - }
217   - };
218   -
219   - /**
220   - * Bind Events
221   - */
222   - this.events = function() {
223   -
224   - var _self = this;
225   -
226   - /**
227   - * Go to next slide on content click (optional)
228   - */
229   - if (_self.options.nextclick)
230   - ext.find('.slideshow-content').click(function(){
231   - _self.stop();
232   - _self.next();
233   - return false;
234   - });
235   -
236   - /**
237   - * Goto first slide button
238   - */
239   - if (this.options.controls.first)
240   - ext.find('a.first').click(function(){
241   - _self.stop();
242   - _self.goSlide(0);
243   - return false;
244   - });
245   -
246   - /**
247   - * Goto previouse slide button
248   - */
249   - if (this.options.controls.prev)
250   - ext.find('a.prev').click(function(){
251   - _self.stop();
252   - _self.prev();
253   - return false;
254   - });
255   -
256   - /**
257   - * Play slideshow button
258   - */
259   - if (this.options.controls.play)
260   - ext.find('a.play').click(function(){
261   - if (_self.playFlag) {
262   - _self.stop();
263   - } else {
264   - _self.play();
265   - }
266   - return false;
267   - });
268   -
269   - /**
270   - * Goto next slide button
271   - */
272   - if (this.options.controls.next)
273   - ext.find('a.next').click(function(){
274   - _self.stop();
275   - _self.next();
276   - return false;
277   - });
278   -
279   - /**
280   - * Goto last slide button
281   - */
282   - if (this.options.controls.last)
283   - ext.find('a.last').click(function(){
284   - _self.stop();
285   - _self.goSlide(_self.length-1);
286   - return false;
287   - });
288   -
289   - /**
290   - * Show help message
291   - */
292   - if (this.options.controls.help)
293   - ext.find('a.help').click(function(){
294   - _self.stop();
295   - ext.find('.slideshow-help').slideToggle();
296   - return false;
297   - });
298   -
299   - /**
300   - * Show playframe
301   - */
302   - if (this.options.playframe)
303   - ext.find('.slideshow-frame').click(function(){
304   - ext.find('.slideshow-frame').remove();
305   - ext.find('.slideshow-shadow').remove();
306   -
307   - if (_self.options.playclick)
308   - setTimeout(function(ms){ _self.play() }, _self.options.time);
309   - return false;
310   - });
311   -
312   - /**
313   - * Play/stop on slideshow hover
314   - */
315   - if (this.options.playhover)
316   - ext.hover(function(){
317   - if (!_self.playFlag) {
318   - _self.play();
319   - }
320   - }, function(){
321   - if (_self.playFlag) {
322   - _self.stop();
323   - }
324   - });
325   -
326   -
327   - /**
328   - * Stop/Play on slideshow hover
329   - */
330   - if (this.options.playhoverr)
331   - ext.hover(function(){
332   - if (_self.playFlag) {
333   - _self.stop();
334   - }
335   - }, function(){
336   - if (!_self.playFlag) {
337   - _self.play();
338   - }
339   - });
340   - };
341   -
342   - /**
343   - * Find and show label of slide
344   - * @method
345   - */
346   - this.label = function () {
347   - if (!this.options.title) return false;
348   -
349   - label = '';
350   -
351   - current = ext.find('.slideshow-content > *:eq('+this.options.index +')');
352   -
353   - if (current.attr('alt')) {
354   - label = current.attr('alt');
355   - } else if (current.attr('title')) {
356   - label = current.attr('title');
357   - }else if (current.find('label:first').length>0) {
358   - current.find('label:first').hide();
359   - label = current.find('label:first').html();
360   - }
361   -
362   - ext.find('.slideshow-label').html(label);
363   - };
364   -
365   - /**
366   - * Goto previous slide
367   - * @method
368   - */
369   - this.prev = function () {
370   - if (this.options.index == 0) {
371   - i = (this.length-1);
372   - } else {
373   - i = this.options.index - 1;
374   - }
375   -
376   - this.goSlide(i);
377   - };
378   -
379   -
380   - /**
381   - * Play Slideshow
382   - * @method
383   - */
384   - this.play = function () {
385   - var _self = this;
386   - this.playFlag = true;
387   - this.playId = setTimeout(function(ms){ _self._play() }, this.options.time);
388   - ext.find('a.play').addClass('stop');
389   - };
390   -
391   - /**
392   - * Play Slideshow
393   - * @method
394   - */
395   - this._play = function () {
396   - var _self = this;
397   - this.next();
398   - if (this.playFlag) {
399   - if (this.options.index == (this.length-1) && !this.options.loop) { this.stop();return false; }
400   - this.playId = setTimeout(function(ms){ _self._play() }, this.options.time);
401   - }
402   - };
403   -
404   - /**
405   - * Stop Slideshow
406   - * @method
407   - */
408   - this.stop = function () {
409   - ext.find('a.play').removeClass('stop');
410   - this.playFlag = false;
411   - clearTimeout(this.playId);
412   - };
413   -
414   - /**
415   - * Goto next slide
416   - * @method
417   - */
418   - this.next = function () {
419   - if (this.options.index == (this.length-1)) {
420   - i = 0;
421   - } else {
422   - i = this.options.index + 1;
423   - }
424   - this.goSlide(i);
425   - };
426   -
427   - /**
428   - * Init N-slide
429   - * @method
430   - * @param {Integer} n
431   - */
432   - this.init = function (index) {
433   - // initialize only ones
434   - for (var i = 0, loopCnt = this.inited.length; i < loopCnt; i++) {
435   - if (this.inited[i] === index) {
436   - return true;
437   - }
438   - }
439   -
440   - // index to inited stack
441   - this.inited.push(index);
442   -
443   - // current slide
444   - slide = ext.find('.slideshow-content > *:eq('+index+')');
445   -
446   - var _self = this;
447   - /**
448   - * Replace A to content from HREF
449   - */
450   - if (slide.get(0).tagName == 'A') {
451   - var href = slide.attr('href');
452   -
453   - var title = slide.attr('title');
454   - title = title.replace(/\"/i,'\''); // if you use single quotes for tag attribs
455   -
456   - var domain = document.domain;
457   - domain = domain.replace(/\./i,"\."); // for strong check domain name
458   -
459   - var reimage = new RegExp("\.(png|gif|jpg|jpeg|svg)$", "i");
460   - var relocal = new RegExp("^((https?:\/\/"+domain+")|(?!http:\/\/))", "i");
461   -
462   -
463   - if (this.options.imgajax && reimage.test(href)) {
464   - slide.replaceWith('<img src="'+href+'" alt="'+title+'"/>');
465   - } else if (this.options.linkajax && relocal.test(href)) {
466   - $.get(href, function(data){
467   - slide.replaceWith('<div><label>'+title+'</label>'+data+'</div>');
468   - });
469   - } else { // nothing else
470   -// slide.wrap('<p></p>');
471   - }
472   -
473   - slide = ext.find('.slideshow-content > *:eq('+index+')');
474   -
475   - // reset css
476   - this._build(slide);
477   - }
478   -
479   - /**
480   - * Play/stop on content click (like image and other)
481   - */
482   - if (this.options.playclick)
483   - $(slide).click(function(){
484   - if (_self.playFlag) {
485   - _self.stop();
486   - } else {
487   - _self.play();
488   - }
489   - return false;
490   - });
491   - };
492   -
493   - /**
494   - * Goto N-slide
495   - * @method
496   - * @param {Integer} n
497   - */
498   - this.goSlide = function (n) {
499   -
500   - if (this.options.index == n) return;
501   -
502   - this.init(n);
503   -
504   - var next = ext.find('.slideshow-content > *:eq('+n+')');
505   - var prev = ext.find('.slideshow-content > *:eq('+this.options.index+')');
506   -
507   - // restore next slide after all effects, set z-index = 0 for prev slide
508   - prev.css({zIndex:0});
509   - if (this.options.imgresize) {
510   - next.css({zIndex:1, top: 0, left: 0, opacity: 1, width: this.options.width, height: this.options.height});
511   - } else {
512   - next.css({zIndex:1, top: (this.options.height/2 - next.attr('height')/2), left: (this.options.width/2 - next.attr('width')/2), opacity: 1});
513   - }
514   -
515   - this.options.index = n;
516   -
517   - if (this.options.effect == 'random' ) {
518   - var r = Math.random();
519   - r = Math.floor(r*12);
520   - } else {
521   - r = -1;
522   - }
523   - // effect between slides
524   - switch (true) {
525   - case (this.options.effect == 'scrollUp' || r == 0):
526   - prev.css({width:'100%'});
527   - next.css({top:0, height:0});
528   -
529   - prevAni = {height: 0, top:this.options.height};
530   - break;
531   - case (this.options.effect == 'scrollDown' || r == 1):
532   - prev.css({width:'100%'});
533   - next.css({top:this.options.height,height:0});
534   -
535   - prevAni = {height: 0, top:0};
536   - break;
537   - case (this.options.effect == 'scrollRight' || r == 2):
538   - prev.css({right:0,left:'',height:'100%'});
539   - next.css({right:'',left:0,height:'100%',width:'0%'});
540   -
541   - prevAni = {width: 0};
542   - break;
543   - case (this.options.effect == 'scrollLeft' || r == 3):
544   - prev.css({right:'',left:0,height:'100%'});
545   - next.css({right:0,left:'',height:'100%',width:'0%'});
546   -
547   - prevAni = {width: 0};
548   - break;
549   - case (this.options.effect == 'growX' || r == 4):
550   - next.css({zIndex:2,opacity: 1,left: this.options.width/2, width: '0%', height:'100%'});
551   -
552   - prevAni = {opacity: 0.8};
553   - break;
554   -
555   - case (this.options.effect == 'growY' || r == 5):
556   - next.css({opacity: 1,top: this.options.height/2, width:'100%', height: '0%'});
557   -
558   - prevAni = {opacity: 0.8};
559   - break;
560   -
561   - case (this.options.effect == 'zoom' || r == 6):
562   - next.css({width: 0, height: 0, top: this.options.height/2, left: this.options.width/2});
563   -
564   - prevAni = {width: 0, height: 0, top: this.options.height/2, left: this.options.width/2};
565   - break;
566   -
567   - case (this.options.effect == 'zoomFade' || r == 7):
568   - next.css({zIndex:1, opacity: 0,width: 0, height: 0, top: this.options.height/2, left: this.options.width/2});
569   -
570   - prevAni = {opacity: 0, width: 0, height: 0, top: this.options.height/2, left: this.options.width/2};
571   - break;
572   -
573   - case (this.options.effect == 'zoomTL' || r == 8):
574   - next.css({zIndex:1, opacity: 0,width: this.options.width/2, height: this.options.height/2, top:0, left: 0});
575   -
576   - prevAni = {opacity: 0, width: 0, height: 0, top: this.options.height, left: this.options.width};
577   - break;
578   - case (this.options.effect == 'zoomBR' || r == 9):
579   - next.css({zIndex:1, opacity: 0,width: this.options.width/2, height: this.options.height/2, top: this.options.height/2, left: this.options.width/2});
580   -
581   - prevAni = {opacity: 0, width: 0, height: 0, top: 0, left: 0};
582   - break;
583   - case (this.options.effect == 'fade' || r == 10):
584   - default:
585   - prev.css({zIndex:0, opacity: 1});
586   - next.css({zIndex:1, opacity: 0});
587   -
588   - prevAni = {opacity: 0};
589   - break;
590   - }
591   -
592   - var _self = this;
593   -
594   - prev.animate(prevAni,this.options.effecttime);
595   -
596   - // play next slide animation, hide prev slide, update label, update counter
597   - next.show().animate({opacity: 1}, this.options.effecttime, function () { prev.hide(); _self.label(); _self.counter(); });
598   - };
599   -
600   - /**
601   - * Update counter data
602   - * @method
603   - */
604   - this.counter = function () {
605   - if (this.options.controls.counter)
606   - ext.find('.slideshow-panel span.counter').html((this.options.index+1) + ' / ' + this.length);
607   -
608   - };
609   -
610   - // Now initialize the slideshow
611   - this.options = $.extend({}, defaults, settings);
612   -
613   - if (typeof(settings) != 'undefined') {
614   - if (typeof(settings.controls) != 'undefined')
615   - this.options.controls = $.extend({}, defaults.controls, settings.controls);
616   - }
617   -
618   - this.build();
619   -
620   - /**
621   - * Show slideshow
622   - */
623   - ext.show();
624   -
625   - /**
626   - * Check play option
627   - */
628   - if (this.options.play) {
629   - this.play();
630   - }
631   -
632   - return ext;
633   - });
634   -
635   - /**
636   - * external functions - append to $
637   - */
638   - _slideshow.playSlide = function(){ _slideshow.each(function () { this.play(); }) };
639   - _slideshow.stopSlide = function(){ _slideshow.each(function () { this.stop(); }) };
640   - _slideshow.nextSlide = function(){ _slideshow.each(function () { this.next(); }) };
641   - _slideshow.prevSlide = function(){ _slideshow.each(function () { this.prev(); }) };
642   -
643   - return this;
644   - }
645   -})(jQuery);
public/javascripts/jquery.aslideshow/simple/images/big-play.png
View file @08f5a54

17.3 KB
public/javascripts/jquery.aslideshow/simple/images/buttons.png
View file @08f5a54

4.9 KB
public/javascripts/jquery.aslideshow/simple/styles.css
View file @08f5a54
... ... @@ -1,180 +0,0 @@
1   -.slideshow, .slideshow-label, .slideshow-content, .slideshow-panel {
2   - font:12px Verdana, Tahoma, sans-serif;
3   -}
4   -
5   -.slideshow {
6   - padding:0;
7   - border:0;
8   - position:relative;
9   - display:none; /* Set to "none" for not preview slideshow content */
10   -}
11   -
12   -.slideshow-fullscreen {
13   - position:absolute;
14   - top:0;
15   - left:0;
16   - padding:0;
17   - border:0;
18   - overflow:hidden;
19   -}
20   -
21   -.slideshow-label-place {
22   - padding:0;
23   - position:absolute;
24   - top:0px;
25   - left:0px;
26   - z-index:100;
27   - height:30px;
28   -}
29   - .slideshow-label {
30   - z-index:101;
31   - color:#fff;
32   - width:100%;
33   - height:100%;
34   - line-height:30px;
35   - text-indent:8px;
36   - font-weight:bold
37   - }
38   -
39   -.slideshow-panel-place {
40   - padding:0;
41   - position:absolute;
42   - bottom:-29px;
43   - left:0px;
44   - z-index:100;
45   - height:28px;
46   -}
47   -
48   -
49   - .slideshow-panel {
50   - z-index:101;
51   - width:100%;
52   - height:100%;
53   - }
54   -
55   - .slideshow-panel a.slideshowbutton {
56   - display: block;
57   - width:26px;
58   - height:26px;
59   - float:left;
60   - text-indent:-99999%;
61   - overflow:hidden;
62   - outline: 0; /* @ Firefox, prevent dotted border after click */
63   - background-image:url(images/buttons.png);
64   - background-repeat:no-repeat;
65   - border:1px solid transparent
66   - }
67   -
68   - .slideshow-panel a.slideshowbutton:hover {
69   - border:1px solid #777;
70   - }
71   -
72   -
73   - .slideshow-panel a.first {
74   - background-position: 0 0
75   - }
76   -
77   - .slideshow-panel a.prev {
78   - background-position: -24px 0
79   - }
80   -
81   - .slideshow-panel a.play {
82   - background-position: -48px 0
83   - }
84   -
85   - .slideshow-panel a.stop {
86   - background-position: -72px 0
87   - }
88   -
89   - .slideshow-panel a.next {
90   - background-position: -96px 0
91   - }
92   -
93   - .slideshow-panel a.last {
94   - background-position: -120px 0
95   - }
96   -
97   - .slideshow-panel a.help {
98   - position:relative;
99   - background-position: -144px 0
100   - }
101   -
102   - .slideshow-panel span.counter {
103   - float:right;
104   - display: block;
105   - /*width:26px;*/
106   - height:26px;
107   - line-height:26px;
108   - padding:0 4px;
109   - color: white;
110   - }
111   -
112   -
113   -.slideshow-help {
114   - position:absolute;
115   - bottom:28px;
116   - left:0px;
117   - z-index:101;
118   - background-color:#ff9;
119   - display:none;
120   - opacity: 0.9;
121   - width:100%;
122   -}
123   -
124   -.slideshow-content {
125   - padding:0;
126   - background-color:#fff;
127   - color:#333;
128   - overflow:hidden;
129   - position:relative;
130   - width:100%;
131   - height:100%;
132   -}
133   -
134   - /* Some Content Changes */
135   - .slideshow-content p {
136   - padding:0;
137   - overflow:auto;
138   - }
139   -
140   -.slideshow-frame {
141   - position:absolute;
142   - top:0px;
143   - left:0px;
144   - background:url(images/big-play.png) 50% 50% no-repeat;
145   - z-index:201;
146   - cursor:pointer;
147   - width:100%;
148   - height:100%;
149   -}
150   -
151   -.slideshow-shadow{
152   - position:absolute;
153   - top:0px;
154   - left:0px;
155   - z-index:200;
156   - width:100%;
157   - height:100%;
158   -}
159   -
160   -.slideshow-opacity{
161   - background-color: black;
162   -}
163   - *:first-child+html .slideshow-opacity, * html .slideshow-opacity {
164   - zoom:1;
165   - background:#000;
166   - filter:alpha(opacity=50);
167   - }
168   - * html .slideshow-opacity {
169   - zoom:1;
170   - background:#000;
171   - filter:alpha(opacity=50);
172   - }
173   -
174   - *:first-child+html .slideshow-opacity *{
175   - position:relative;
176   - }
177   -
178   - * html .slideshow-opacity *{
179   - position:relative;
180   - }
public/javascripts/pikachoose.js 0 → 100644
  Diff comments   View file @f920d2d
... ... @@ -0,0 +1,275 @@
  1 +/* 1/13/2009
  2 + PikaChoose
  3 + Jquery plugin for photo galleries
  4 + Copyright (C) 2009 Jeremy Fry
  5 +
  6 + This program is free software: you can redistribute it and/or modify
  7 + it under the terms of the GNU General Public License as published by
  8 + the Free Software Foundation, either version 3 of the License, or
  9 + (at your option) any later version.
  10 +
  11 + This program is distributed in the hope that it will be useful,
  12 + but WITHOUT ANY WARRANTY; without even the implied warranty of
  13 + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  14 + GNU General Public License for more details.
  15 +
  16 + You should have received a copy of the GNU General Public License
  17 + along with this program. If not, see <http://www.gnu.org/licenses/>.
  18 +*/
  19 +
  20 +
  21 +jQuery.iPikaChoose = {
  22 + build : function(user_options)
  23 + {
  24 + var user_options;
  25 + var defaults = {
  26 + show_captions: true,
  27 + slide_enabled: true,
  28 + auto_play: true,
  29 + show_prev_next: true,
  30 + slide_speed: 5000,
  31 + thumb_width: 50,
  32 + thumb_height: 42
  33 + };
  34 +
  35 + return $(this).each(
  36 + function() {
  37 + //bring in options
  38 + var options = $.extend(defaults, user_options);
  39 + // grab our images
  40 + var $images = $(this).children('li').children('img');
  41 + //hide the images so the user doesn't see crap
  42 + $images.fadeOut(1);
  43 +
  44 + //save our list for future ref
  45 + var $ulist = $(this);
  46 + $images.each(LoadImages);
  47 + //start building structure
  48 + $(this).before("<div class='pika_main'></div>");
  49 + // houses eveything about the UL
  50 + var $main_div = $(this).prev(".pika_main");
  51 +
  52 + //add in slideshow elements when appropriate
  53 + if(options.slide_enabled){
  54 + $main_div.append("<div class='pika_play'></div>");
  55 + var $play_div = $(this).prev(".pika_main").children(".pika_play");
  56 + $play_div.html("<a class='pika_play_button'>Play</a><a class='pika_stop_button'>Stop</a>");
  57 + $play_div.fadeOut(1);
  58 + var $play_anchor = $play_div.children('a:first');
  59 + var $stop_anchor = $play_div.children('a:last');
  60 + }
  61 + //this div is used to make image and caption fade together
  62 + $main_div.append("<div class='pika_subdiv'></div>");
  63 + var $sub_div = $main_div.children(".pika_subdiv");
  64 +
  65 + //the main image we'll be using to load
  66 + $sub_div.append("<img />");
  67 + var $main_img = $sub_div.children("img");
  68 +
  69 + //create the caption div when appropriate
  70 + if(options.show_captions){
  71 + $sub_div.append("<div class='pika_caption'></div>");
  72 + var $caption_div = $sub_div.children(".pika_caption");
  73 + }
  74 +
  75 + //navigation div ALWAYS gets created, its refrenced a lot
  76 + $(this).after("<div class='pika_navigation'></div>");
  77 + var $navigation_div = $(this).next(".pika_navigation");
  78 + //fill in sub elements
  79 + $navigation_div.prepend("<a>Previous</a> :: <a>Next</a>");
  80 + var $previous_image_anchor = $navigation_div.children('a:first');
  81 + var $next_image_anchor = $navigation_div.children('a:last');
  82 +
  83 + //hide the navigation if the user doesn't want it
  84 + if(!options.show_prev_next){
  85 + $navigation_div.css("display","none");
  86 + }
  87 +
  88 + //$playing triggers the loop for the slideshow
  89 + var $playing = options.auto_play;
  90 +
  91 + $main_img.wrap("<a></a>");
  92 + var $main_link = $main_img.parent("a");
  93 +
  94 + function LoadImages(){
  95 + $(this).bind("load", function(){
  96 + //had to make a seperate function so that the thumbnails wouldn't have problems
  97 + //from beings resized before loaded, thus not h/w
  98 +
  99 + var $w = $(this).width();
  100 + var $h = $(this).height();
  101 + if($w===0){$w = $(this).attr("width");}
  102 + if($h===0){$h = $(this).attr("height");}
  103 + //grab a ratio for image to user defined settings
  104 + var $rw = options.thumb_width/$w;
  105 + var $rh = options.thumb_height/$h;
  106 +
  107 + //determine which has the smallest ratio (thus needing
  108 + //to be the side we use to scale so our whole thumb is filled)
  109 + if($rw<$rh){
  110 + //we'll use ratio later to scale and not distort
  111 + var $ratio = $rh;
  112 + var $left = (($w*$ratio-options.thumb_width)/2)*-1;
  113 + $left = Math.round($left);
  114 + //set images left offset to match
  115 + $(this).css({left:$left});
  116 + }else{
  117 + var $ratio = $rw;
  118 + //you can uncoment this lines to have the vertical picture centered
  119 + //but usually tall photos have the focal point at the top...
  120 + //var $top = (($h*$ratio-options.thumb_height)/2)*-1;
  121 + //var $top = Math.round($top);
  122 + $top = 0;
  123 + $(this).css({top:$top});
  124 + }
  125 + //use those ratios to calculate scale
  126 + var $width = Math.round($w*$ratio);
  127 + var $height = Math.round($h*$ratio);
  128 + $(this).css("position","relative");
  129 + $(this).width($width).height($height);
  130 + var imgcss={
  131 + width: $width,
  132 + height: $height
  133 + };
  134 + $(this).css(imgcss);
  135 +
  136 + $(this).fadeTo(250,0.4);
  137 + if($(this).hasClass('pika_first')){
  138 + $(this).trigger("click",["auto"]);
  139 + }
  140 + });
  141 +
  142 + //clone so the on loads will fire correctly
  143 + $(this).clone(true).insertAfter(this);
  144 +
  145 + $(this).remove();
  146 + //reset images to the clones
  147 + $images = $ulist.children('li').children('img');
  148 + }
  149 + function activate(){
  150 + //sets the intial phase for everything
  151 +
  152 + //image_click is controls the fading
  153 + $images.bind("click",image_click);
  154 + //hiding refrence to slide elements if slide is disabled
  155 + if(options.slide_enabled){
  156 + if(options.auto_play){
  157 + $playing = true;
  158 + $play_anchor.hide();
  159 + $stop_anchor.show();
  160 + }else{
  161 + $play_anchor.show();
  162 + $stop_anchor.hide();
  163 + }
  164 + }
  165 +
  166 + //resizes and centers thumbs
  167 + prep_thumbs();
  168 + //previous link to go back an image
  169 + $previous_image_anchor.bind("click",previous_image);
  170 + //ditto for forward, also the item that gets auto clicked for slideshow
  171 + $next_image_anchor.bind("click",next_image);
  172 + }//end activate function
  173 +
  174 +
  175 + function prep_thumbs(){
  176 + //now we know the first and last images
  177 + $images.filter(":last").addClass("pika_last");
  178 + $images.filter(":first").addClass("pika_first");
  179 + //parse images
  180 + $images.each(function(){
  181 + var licss = {
  182 + width: options.thumb_width+"px",
  183 + height: options.thumb_height+"px",
  184 + "list-style": "none",
  185 + overflow: "hidden"
  186 + };
  187 + $(this).parent('li').css(licss);
  188 + $(this).hover(
  189 + function(){$(this).fadeTo(250,1);},
  190 + function(){if(!$(this).hasClass("pika_selected")){$(this).fadeTo(250,0.4);}}
  191 + );
  192 + });
  193 +
  194 + }//end fix thumbs functions
  195 + function image_click(event, how){
  196 + //catch when user clicks on an image Then cancel current slideshow
  197 + if(how!="auto"){
  198 + if(options.slide_enabled){
  199 + $stop_anchor.hide();
  200 + $play_anchor.show();
  201 + $playing=false;
  202 + }
  203 + $sub_div.stop();
  204 + $sub_div.dequeue();
  205 + }
  206 + //all our image variables
  207 + var $image_source = $(this).attr("src");
  208 + var $image_link = $(this).attr("ref");
  209 + var $image_caption = $(this).attr("title");
  210 +
  211 + //fade out the old thumb
  212 + $images.filter(".pika_selected").fadeTo(250,0.4);
  213 + $images.filter(".pika_selected").removeClass("pika_selected");
  214 + //fade in the new thumb
  215 + $(this).fadeTo(250,1);
  216 + $(this).addClass("pika_selected");
  217 + //fade the old image out and the new one in
  218 + $sub_div.fadeTo(500,0.05,function(){
  219 + $main_img.attr("src",$image_source);
  220 + $main_link.attr("href", $image_link);
  221 + if(options.show_captions){$caption_div.html($image_caption);}
  222 + });
  223 + $sub_div.fadeTo(800,1,function(){
  224 + if($playing){
  225 + $(this).animate({top:0},options.slide_speed, function(){
  226 + //redudency needed here to catch the user clicking on an image during a change.
  227 + if($playing){$next_image_anchor.trigger("click",["auto"]);}
  228 + });
  229 + }
  230 + });
  231 + }//end image_click function
  232 +
  233 + function next_image(event, how){
  234 + if($images.filter(".pika_selected").hasClass("pika_last")){
  235 + $images.filter(":first").trigger("click",how);
  236 + }else{
  237 + $images.filter(".pika_selected").parent('li').next('li').children('img').trigger("click",how);
  238 + }
  239 + }//end next image function
  240 +
  241 + function previous_image(event, how){
  242 + if($images.filter(".pika_selected").hasClass("pika_first")){
  243 + $images.filter(":last").trigger("click",how);
  244 + }else{
  245 + $images.filter(".pika_selected").parent('li').prev('li').children('img').trigger("click",how);
  246 + }
  247 + }//end previous image function
  248 +
  249 + function play_button(){
  250 + $main_div.hover(
  251 + function(){$play_div.fadeIn(400);},
  252 + function(){$play_div.fadeOut(400);}
  253 + );
  254 + $play_anchor.bind("click", function(){
  255 + $playing = true;
  256 + $next_image_anchor.trigger("click",["auto"]);
  257 + $(this).hide();
  258 + $stop_anchor.show();
  259 + });
  260 + $stop_anchor.bind("click", function(){
  261 + $playing = false;
  262 + $(this).hide();
  263 + $play_anchor.show();
  264 + });
  265 + }
  266 + if(options.slide_enabled){play_button();}
  267 + activate();
  268 +
  269 + });//end return this.each
  270 + }//end build function
  271 +
  272 + //activate applies the appropriate actions to all the different parts of the structure.
  273 + //and loads the sets the first image
  274 +};//end jquery.ipikachoose
  275 +jQuery.fn.PikaChoose = jQuery.iPikaChoose.build;
... ...
public/javascripts/sliderjs.js 0 → 100644
  Diff comments   View file @f920d2d
... ... @@ -0,0 +1,213 @@
  1 +/*The easing code was provided by George Smith. Please check out his site
  2 +as without him this would look really horrible!
  3 +http://gsgd.co.uk/sandbox/jquery/easing/
  4 +*/
  5 +
  6 +jQuery.easing.jswing = jQuery.swing;
  7 +jQuery.extend( jQuery.easing,
  8 +{
  9 + def: 'easeOutCubic',
  10 + swing: function (x, t, b, c, d) {
  11 + return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
  12 + },
  13 + easeOutCubic: function (x, t, b, c, d) {
  14 + return c*((t=t/d-1)*t*t + 1) + b;
  15 + }
  16 +});
  17 +
  18 +/*
  19 + 12/20/08
  20 + SliderJS
  21 + Jquery plugin for smooth and pretty sliding divs
  22 + Copyright (C) 2008 Jeremy Fry
  23 +
  24 + This program is free software: you can redistribute it and/or modify
  25 + it under the terms of the GNU General Public License as published by
  26 + the Free Software Foundation, either version 3 of the License, or
  27 + (at your option) any later version.
  28 +
  29 + This program is distributed in the hope that it will be useful,
  30 + but WITHOUT ANY WARRANTY; without even the implied warranty of
  31 + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  32 + GNU General Public License for more details.
  33 +
  34 + You should have received a copy of the GNU General Public License
  35 + along with this program. If not, see <http://www.gnu.org/licenses/>.
  36 +*/
  37 +
  38 +
  39 +jQuery.iSliderJS = {
  40 + build : function(user_options)
  41 + {
  42 + var defaults = {
  43 + direction:"horizontal",
  44 + list_width: 6740,
  45 + window_width: 500,
  46 + window_height: 350,
  47 + pikachoose: false
  48 + };
  49 + return $(this).each(function(){
  50 + //declare variables. God knows I've missed half of them I'll use
  51 + var options = $.extend(defaults, user_options);
  52 + var acceleration = 0;
  53 + var initx = 0; //intial
  54 + var inity = 0;
  55 + var movex = [];
  56 + var downtime = 0;
  57 +
  58 + //wrap the list in a sliderjs div.
  59 + $(this).wrap("<div class='sliderjs'></div>");
  60 + var $sliderul = $(this);
  61 + var $sliderjs = $(this).parent("<div>");
  62 + var divcss = {
  63 + width: options.window_width+"px",
  64 + height: options.window_height+"px",
  65 + overflow:"hidden",
  66 + position:"relative"
  67 + };
  68 + var ulcss = {
  69 + position: "relative",
  70 + width: options.list_width+"px"
  71 + };
  72 + $sliderjs.css(divcss);
  73 + $sliderul.css(ulcss);
  74 + //TODO:add a scroll bar and buttons maybe.
  75 + if($.browser.msie){
  76 + //$sliderjs.children().mousedown(function(){ return true;});
  77 + $sliderul.children().mousedown(function(){
  78 + return false;});
  79 + $sliderul.children().children().mousedown(function(){
  80 + return false;});
  81 + }
  82 +
  83 + //mouse fucntions for tosses
  84 + $sliderjs.bind('selectstart', function() {
  85 + return false;
  86 + });
  87 + $sliderjs.bind("mousedown", function(e){
  88 + $sliderul.stop();
  89 + $sliderul.dequeue();
  90 + movex.splice(0);
  91 + initx = e.pageX;
  92 + var date = new Date();
  93 + downtime = date.getTime();
  94 + var xlen = 0;
  95 + var ulinitx = $sliderul.position().left;
  96 + $().bind("mousemove", function(e){
  97 + //track the mouse movements
  98 + //duplicates cause some issues. Though moving only one direction would
  99 + //cause this. it tends to be unintentional
  100 + if(movex[xlen-1]!=e.pageX){
  101 + xlen = movex.push(e.pageX);
  102 + }
  103 +
  104 + //keep trimming our array
  105 + if(xlen>10){
  106 + movex.splice(0,6);
  107 + xlen = movex.push(e.pageX);
  108 + }
  109 +
  110 + //track direction of last three movements. if directions changes reset time
  111 + if(movex.length>3){
  112 + if((movex[xlen-3]>=movex[xlen-2]) &&(movex[xlen-2]>=movex[xlen-1])){
  113 + }else if((movex[xlen-3]<=movex[xlen-2]) &&(movex[xlen-2]<=movex[xlen-1])){
  114 + }else{
  115 + //if we made it here the user has changed direction so now we need to reset the time
  116 + //downtime = date.getTime();
  117 + }
  118 + }
  119 +
  120 + //move the list around well the mouse is pressed
  121 + var newleft = parseInt(ulinitx, 10)+parseInt((e.pageX-initx)/1.5, 10);
  122 + if(newleft<((options.list_width*-1)+parseInt(options.window_width, 10)-50)){
  123 + newleft=((options.list_width*-1)+parseInt(options.window_width, 10)-50);
  124 + }
  125 + if(newleft>50){newleft=50;}
  126 + //$('.pika_navigation').html(newleft);
  127 + $sliderul.css("left",newleft+"px");
  128 + });
  129 + $().bind("mouseup", MeatAndPatatos);
  130 + return false;
  131 + });
  132 +
  133 + function Animate(xvalue){
  134 + $sliderul.stop();
  135 + $sliderul.dequeue();
  136 + $sliderul.animate({
  137 + left:xvalue+"px"
  138 + },1500,"easeOutCubic");
  139 + }
  140 +
  141 + //TODO: find a better name for this func... nevermind I like it
  142 + function MeatAndPatatos(e){
  143 + $().unbind("mousemove");
  144 + $().unbind("mouseup", MeatAndPatatos);
  145 + var date = new Date();
  146 + var uptime = date.getTime();
  147 +
  148 + //calculate velocity... did math class just pay off?
  149 + var velocity = (movex[movex.length-1]*100-movex[movex.length-2]*100)/(uptime-downtime);
  150 + var distance = movex[movex.length-1]-movex[movex.length-2];
  151 + var negative = 1;
  152 + //they're both negative when they get multiplied together we're going to end up with a positive
  153 + if(distance<0){
  154 + negative = -1;
  155 + }
  156 + var ulinitx = $sliderul.position().left;
  157 + var animateleft = parseInt(ulinitx, 10)+(velocity * distance * negative)/2;
  158 + if(animateleft<(options.list_width*-1)+parseInt(options.window_width, 10)){
  159 + animateleft=(options.list_width*-1)+parseInt(options.window_width, 10);
  160 + }
  161 + //alert(animateleft);
  162 + if(animateleft>0){animateleft=0;}
  163 + //now that we have velocity figure out the distance to go and the time
  164 + if(isNaN(animateleft)){}else{
  165 + Animate(animateleft);
  166 + }
  167 +
  168 + }
  169 +
  170 +
  171 +
  172 + function MoveToLi(){
  173 + var pos = $(this).parent('li').position();
  174 + var width = $(this).css("width").slice(0,-2);
  175 + var lileft = pos.left;
  176 + var liright = parseInt(pos.left, 10)+parseInt(width, 10);
  177 + var ulleft = $sliderul.position().left;
  178 + //find out if the li is inside the viewable area
  179 + //first find range of viewable values
  180 + var low = ulleft*-1;
  181 + var high = low+options.window_width;
  182 + //is my li in that?
  183 + if((lileft>=low)&&(liright<=high)){
  184 + //viewable we're gravy
  185 + return;
  186 + }else{
  187 + //uh oh! not viewable lets slide
  188 + //find how far outside view we are
  189 + var slide =0;
  190 + if(lileft<low){
  191 + //i know it seems like we should subtract.. however we have
  192 + //negatives people! (I'm really writing this for me so I don't change
  193 + //it later. :(
  194 + slide = parseInt(lileft, 10)*-1;
  195 + }else{
  196 + slide = ((liright-high)*-1)+parseInt(ulleft, 10);
  197 + }
  198 +
  199 + Animate(slide);
  200 + }
  201 +
  202 + }
  203 +
  204 + if(options.pikachoose){
  205 + var $lis = $sliderul.children('li');
  206 + $lis.children().bind("click", MoveToLi);
  207 +
  208 + }
  209 + });
  210 +
  211 + }
  212 +};
  213 +jQuery.fn.SliderJS = jQuery.iSliderJS.build;
0 214 \ No newline at end of file
... ...
public/stylesheets/folder.css
  Diff comments   View file @f920d2d
... ... @@ -6,6 +6,7 @@
6 6  
7 7 .image-gallery ul {
8 8 padding: 0px;
  9 + text-align: center;
9 10 }
10 11  
11 12 .image-gallery-item {
... ...
public/stylesheets/slideshow.css 0 → 100644
  Diff comments   View file @f920d2d
... ... @@ -0,0 +1,54 @@
  1 +body {
  2 + background-color:#000;
  3 + color:white;
  4 + padding-top:20px;
  5 + text-align: center;
  6 +}
  7 +
  8 +/* These hieghts and widths should be edited to your images */
  9 +ul#slideshow {
  10 + padding-left: 0;
  11 + margin: 0 auto;
  12 +}
  13 +
  14 +a, a:link, a:visited {
  15 + color: #FFF;
  16 + text-decoration: bold;
  17 +}
  18 +
  19 +.back-button {
  20 + position: absolute;
  21 + right: 10px;
  22 + margin: 0px;
  23 + top: 3px
  24 +}
  25 +
  26 +.pika_main {
  27 + width: 680px;
  28 + height: 510px;
  29 + padding-right: 20px;
  30 + margin: 0 auto;
  31 + overflow: hidden;
  32 +}
  33 +
  34 +#slideshow li {
  35 + margin: 5px;
  36 + float: left;
  37 + border: 2px solid #222;
  38 +}
  39 +
  40 +/* thats all you NEED to edit. But continue if you'd like. */
  41 +ul#slideshow li img{position:relative;cursor:pointer;}
  42 +.pika_main img{border:5px solid #222;}
  43 +.pika_main{position: relative;margin:0 auto;}
  44 +.pikachoose li{float:left;position:relative;overflow:hidden;list-style:none;}
  45 +.pika_play{position:absolute;top:10px;right:20px;z-index:1;}
  46 +.pika_play a{position:relative;margin-left:auto;cursor:pointer;}
  47 +.pika_play img{border:none !important;}
  48 +.pika_caption{width:100%;height:30px;text-align:center;}
  49 +.pika_navigation a{font-size: 12px;color:white;text-decoration: none;}
  50 +.pika_navigation a:hover{text-decoration: underline;}
  51 +.pika_navigation{padding-top:10px;clear:both;text-align:center;}
  52 +
  53 +/* SliderJS */
  54 +.sliderjs{margin:0 auto;}
... ...
test/functional/content_viewer_controller_test.rb
  Diff comments   View file @f920d2d
... ... @@ -717,4 +717,11 @@ class ContentViewerControllerTest &lt; Test::Unit::TestCase
717 717 assert_template 'view_page'
718 718 end
719 719  
  720 + should 'render slideshow template' do
  721 + f = Folder.create!(:name => 'gallery', :profile => profile)
  722 + get :view_page, :profile => profile.identifier, :page => f.explode_path, :slideshow => true
  723 +
  724 + assert_template 'slideshow'
  725 + end
  726 +
720 727 end
... ...