Galleria Mod 2015-04-24

This mod does changes the way images are displayed on the item page

  1. drakky20
    WeBid Version:
    • 1.0.3
    PHP:
    Mod Title:         Galleria on Item page

    Version
    (s):        tested on WeBid 1.0.3 only

    Credits
    :           drakky20

    Install Time
    :      10 minutes

    Install Difficulty
    Easy

    MOD Description
    :   This mod does changes the way images are displayed on the item page
                      
                     


    Files To Edit
    :

    root/themes/default/global_header.tpl
    root
    /themes/default/item.tpl

    Files To Upload
    :

    root/js/galleria/galleria-1.2.7.min.js
    root
    /js/galleria/galleria.classic.js
    root
    /js/galleria/galleria.classic.min.js
    root
    /js/galleria/LICENSE.txt

    root
    /themes/default/galleria/galleria.classic.css
    root
    /themes/default/galleria/classic-loader.gif
    root
    /themes/default/galleria/classic-map.png
    root
    /themes/default/galleria/LICENSE.txt




    Note 
    you can edit root/themes/default/galleria.classic.css if you prefer a different colour background
    I found I had to fiddle with root
    /themes/default/classic-map.png also to get it looking better on a light colour background


    Before Adding This MOD To Your Site
    You Should Back Up All Files Related To This MOD


    Note Line Numbers are approximate only 
    as you may already have other modifications done

    #######################################################################################





    ##--------OPEN root/themes/default/global_header.tpl----------------------

    ## find about line 22

    <link rel="alternate" type="application/rss+xml" title="{L_931}" href="{SITEURL}rss.php?feed=8">

    ## add after

    <!-- add galleria -->
    <
    style>
               <!-- 
    /* This rule is read by Galleria to define the gallery height: */-->
                 
    #galleria{ width: 800px; height: 600px; }
    </style>
    <!-- 
    end add galleria -->

    ## find about line 60

    </head>

    ## add before

    <!-- add galleria -->
    <
    script type="text/javascript" src="js/galleria/galleria-1.2.7.min.js"></script>
    <link rel="stylesheet" type="text/css" href="{INCURL}themes/{THEME}/galleria/galleria.classic.css" />
    <!-- end add galleria -->

    ##-------------SAVE/CLOSE root/themes/default/global_header.tpl -----------


    ##--------OPEN root/themes/default/item.tpl----------------------

    ## find

    <!-- IF B_HASGALELRY -->
        <div class="tableContent2">
            <div class="titTable4">
                <a name="gallery"></a>{L_663}
            </div>
            <div class="table2" style="text-align:center" id="gallery">
            <table>
                <tr>
            <!-- BEGIN gallery -->
                    <td>
                    <a href="{SITEURL}{UPLOADEDPATH}{ID}/{gallery.V}" title="{gallery.V}">
                        <img src="{SITEURL}getthumb.php?w={THUMBWIDTH}&fromfile={UPLOADEDPATH}{ID}/{gallery.V}" border="0" width="{THUMBWIDTH}" hspace="10">
                    </a>
                    </td>
            <!-- END gallery -->
                </tr>
            </table>
            </div>
        </div>
    <!-- ENDIF -->


    ## replace with

    <!-- add galleria -->
    <!-- IF B_HASGALELRY -->
    <div class="tableContent2">
            <div class="titTable4">
                <a name="gallery"></a>{L_663}
            </div><br />
    <center><div id="galleria">

      <!-- BEGIN gallery -->
    <img src="{SITEURL}{UPLOADEDPATH}{ID}/{gallery.V}">
    <!-- END gallery -->

      </div></center>
    </div>
        <script>
        // Load the classic theme
        Galleria.loadTheme('js/galleria/galleria.classic.min.js');

        // Initialize Galleria
        Galleria.run('#galleria');

        </script>

    <!-- ENDIF -->
    <!-- end add galleria -->