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 -->