Note: You are currently viewing documentation for Moodle 3.0. Up-to-date documentation for the latest stable version of Moodle may be available here: Dataform Photo Galleries.

Dataform Photo Galleries: Difference between revisions

From MoodleDocs
Main page ► Managing a Moodle course ► Activities ► Dataform ► Dataform Photo Galleries
Dataform
Module administration
Creating an activity
Working with the activity
See also
m (added link to spanish translation of document)
No edit summary
Line 8: Line 8:
</gallery>
</gallery>


With a Picture field called Image (if you prefer another name you need to change the tags in the view html accordingly) create a Grid view named Gallery (if you prefer another name etc.) with the following html in the Repeated entry template:
Add a Picture field called Image (if you prefer another name you need to change the tags in the view html accordingly).
 
Add a Grid view named Gallery (if you prefer another name etc.).
<xdiv class="entry"><br>
Adjust the view template of the Gallery view as desired and add at the end the following:
<xdiv style="text-align: center; width: 100px; height: 100px;" class="imageTn">||Image||</xdiv><br>
<xdiv class="imageHref"><xspan class="hide">||Image:url||</xspan></xdiv><br>
</xdiv>
 
(remove x from html tag names)
 
Now all that remains is to add the Fancybox related javascript and css in the respective tabs.
 
The Fancybox is a library that you can download from http://fancybox.net/. The download zip contains a folder titled fancybox which files that you need to extract and store somewhere accessible. One approach is to create a folder recourse on your site and add the fancybox files there.
 
Then you need to add the following javascript in the javascript tab. Note the reference to jquery from googleapis. You can have a local copy and reference it instead.
 
Included external js:
 
*http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
*http://path-to-fancybox-files-location/jquery.fancybox-1.3.4.pack.js
*http://path-to-fancybox-files-location/jquery.easing-1.3.pack.js
*http://path-to-fancybox-files-location/jquery.mousewheel-3.0.4.pack.js
 
 
And js code:
 
<code javascript>
<code javascript>
YUI().use('node', function (Y) {
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<script type="text/javascript" src="path-to-fancybox-js-files/jquery.mousewheel-3.0.6.pack.js"></script>
  if (Y.one('.dataformview-Gallery')) {
<script type="text/javascript" src="path-to-fancybox-js-files/jquery.fancybox.pack.js?v=2.1.5"></script>
        var thisView = Y.one('.dataformview-Gallery');
<script type="text/javascript" src="path-to-fancybox-js-files/jquery.fancybox-buttons.js?v=1.0.5"></script>
 
<script type="text/javascript" src="path-to-fancybox-js-files/jquery.fancybox-media.js?v=1.0.6"></script>
        // Link the thumbnails
<script type="text/javascript" src="path-to-fancybox-js-files/jquery.fancybox-thumbs.js?v=1.0.7"></script>
        var entries = thisView.all('.entry');
<script type="text/javascript">
        entries.each(function(ent){
$(document).ready(function() {
            var imgHolder = ent.one('.imageTn');
    $("a.myGallery").fancybox({
            var imgTn = imgHolder.one('img');
        'transitionIn'    :    'elastic',
            var imgHref = ent.one('.imageHref span').get('innerHTML');
        'transitionOut'    :    'elastic',
            var link = Y.Node.create('<a class="myGallery" rel="gallery" href="'+imgHref+'"></a>');
        'speedIn'        :    600,
            link.appendChild(imgTn);
        'speedOut'        :    200,
            imgHolder.appendChild(link);
        'overlayShow'    :    true,
        });
        'opacity'    :    true,
 
        'cyclic'    :    true
    $(document).ready(function() {
        $("a.myGallery").fancybox({
            'transitionIn'    :    'elastic',
            'transitionOut'    :    'elastic',
            'speedIn'        :    600,
            'speedOut'        :    200,
            'overlayShow'    :    true,
            'opacity'    :    true,
            'cyclic'    :    true
        });
     });
     });
    }
});
});
</code>
</code>


Then add reference to the fancybox css in the css tab.
Set the entry template of the Gallery view to the following:
<code html>
<div class="entry">
    <a class="myGallery" rel="group" href="[[Image:url]]">[[Image]]</a>
</div>
</code>


Included external css:
Add external css in the 'Included external css' section in the CSS tab:
 
<code>
*http://path-to-fancybox-files-location/jquery.fancybox-1.3.4.css
path-to-fancybox-css-files/jquery.fancybox.css?v=2.1.5
path-to-fancybox-js-files/jquery.fancybox-buttons.css?v=1.0.5
path-to-fancybox-css-files/jquery.fancybox-thumbs.css?v=1.0.7
</code>


==Cycle==
==Cycle==

Revision as of 18:02, 19 June 2016

Dataform-based photo galleries are very easy to create by including available javascript libraries and short javascript snippets for applying gallery effects to designated views in the Dataform activity. Such Dataform galleries could be used either as resources for disseminating designated content or graded activities. They could serve as a platform for collaboration and sharing users contributions.

Fancybox gallery

  • Page view

    Page view

  • Fancybox view

    Fancybox view

Add a Picture field called Image (if you prefer another name you need to change the tags in the view html accordingly). Add a Grid view named Gallery (if you prefer another name etc.). Adjust the view template of the Gallery view as desired and add at the end the following: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="path-to-fancybox-js-files/jquery.mousewheel-3.0.6.pack.js"></script> <script type="text/javascript" src="path-to-fancybox-js-files/jquery.fancybox.pack.js?v=2.1.5"></script> <script type="text/javascript" src="path-to-fancybox-js-files/jquery.fancybox-buttons.js?v=1.0.5"></script> <script type="text/javascript" src="path-to-fancybox-js-files/jquery.fancybox-media.js?v=1.0.6"></script> <script type="text/javascript" src="path-to-fancybox-js-files/jquery.fancybox-thumbs.js?v=1.0.7"></script> <script type="text/javascript"> $(document).ready(function() { 

   $("a.myGallery").fancybox({
       'transitionIn'    :    'elastic',
       'transitionOut'    :    'elastic',
       'speedIn'        :    600,
       'speedOut'        :    200,
        'overlayShow'    :    true,
       'opacity'    :    true,
       'cyclic'    :    true
   });

});

Set the entry template of the Gallery view to the following: 

   <a class="myGallery" rel="group" href="File:url">Image</a>

Add external css in the 'Included external css' section in the CSS tab: path-to-fancybox-css-files/jquery.fancybox.css?v=2.1.5 path-to-fancybox-js-files/jquery.fancybox-buttons.css?v=1.0.5 path-to-fancybox-css-files/jquery.fancybox-thumbs.css?v=1.0.7

Cycle

Retrieved from "https://docs.moodle.org/30/en/index.php?title=Dataform_Photo_Galleries&oldid=124626"
Powered by MediaWiki