Login

Gallerific template for django-photologue

Author:
justhamade
Posted:
January 28, 2010
Language:
HTML/template
Version:
Not specified
Score:
1 (after 1 ratings)

Template to make a galleriffic gallery for django photologue. Uses the settings from this demo http://www.twospy.com/galleriffic/example-2.html

This is now the default template for the django-cms photologue plugin http://www.django-cms.org/en/extensions/cmsplugin-photologue/detail/

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
                <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.galleriffic.js"></script>
                <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.opacityrollover.js"></script>
                <!-- We only want the thunbnails to display when javascript is disabled -->
                <script type="text/javascript">
                        document.write('<style>.noscript { display: none; }</style>');
                </script>
                <h1>Media</h1>
                                <!-- Start Advanced Gallery Html Containers -->
                                <div id="gallery" class="content">
                                        <div id="controls" class="controls"></div>
                                        <div class="slideshow-container">
                                                <div id="loading" class="loader"></div>
                                                <div id="slideshow" class="slideshow"></div>
                                        </div>
                                        <div id="caption" class="caption-container"></div>
                                </div>
                                <div id="thumbs" class="navigation">
                                        <ul class="thumbs noscript">
                                                {% for photo in gallery.public %}
                                                <li>
                                                <a class="thumb" name="{{ photo.title }}" title="{{ photo.title }}" href="{{ photo.get_display_url }}"><img src="{{ photo.get_thumbnail_url }}" alt="{{ photo.title }}"/></a>
                                                <div class="caption">
                                                                <div class="download">
                                                                        <a href="{{ photo.get_large_url }}">Download Original</a>
                                                                </div>
                                                                <div class="image-title">{{ photo.title }}</div>
                                                                <div class="image-desc">Test{{ photo.caption }}</div>
                                                        </div>
                                                </li>
                                                {% endfor %}
                                        </ul>
                                </div>
                                <div style="clear: both;"></div>
                <script type="text/javascript">
                        jQuery(document).ready(function($) {
                                // We only want these styles applied when javascript is enabled
                                $('div.navigation').css({'width' : '250px', '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:                 4,
                                        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:              '&lsaquo; Previous Photo',
                                        nextLinkText:              'Next Photo &rsaquo;',
                                        nextPageLinkText:          'Next &rsaquo;',
                                        prevPageLinkText:          '&lsaquo; 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>

More like this

  1. Bootstrap Accordian by Netplay4 7 years, 9 months ago
  2. Bootstrap theme for django-endless-pagination? by se210 10 years, 9 months ago
  3. Bootstrap theme for django-endless-pagination? by se210 10 years, 9 months ago
  4. Reusable form template with generic view by roldandvg 10 years, 10 months ago
  5. Pagination Django with Boostrap by guilegarcia 11 years ago

Comments

Please login first before commenting.