开发者

Change Aino Galleria Theme Programmatically

How to change the Aino Galleria plugin theme programmatically, say... changing a radio button option?

I´ve tried this method with no success!

I´m using Galleria in the following way:

<script src="@Url.Content("~/Scripts/JQuery.Galleria/1.2.5/galleria-1.2.5.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    var virtualPath = '@Url.Content("~/")';

    $(document).ready(function () {
        Galleria.loadTheme(virtualPath + '/Scripts/jQuery.Galleria/1.2.5/themes/twelve/galleria.twelve.min.js');

        $("input[name='theme']").bind("click", themeSelected)

        // Initialize Galleria
        $('#galleria').galleria({ autoplay: false, /* true, miliseconds */
                                  thumbnails: true,  /*true, false, numbers, empty */
                                  imageCrop: true,  /*true, false, height, width */
                                  transition: "pulse",  /*fade, fadeslide, slide, flash, pulse */
                                  trasitionSpeed: 500,
                                  thumbFit: true

        });

    });

    function themeSelected() {
        if($(this).val() == "ca"){
            Galleria.loadTheme(virtualPath + '/Scripts/jQuery.Galleria/1.2.5/themes/classic/galleria.classic.min.js');
        }
        else if($(this).val() == "tw"){
            Galleria.loadTheme(virtualPath + '/Scripts/jQuery.Galleria/1.2.5/themes/twelve/galleria.twelve.min.js');
        }
    }


</script>
<div class="content">
    <h1>Galleria Twelve Theme</h1>
    <div id="galleryOptions">
        <label for="classic">Classic</label><input type="radio" name="theme" id="classic" value="ca" />
        <label for="folio">Folio</label><input type="radio" name="theme" id="folio" value="fo" />
        <label for="twelve">Twelve</label><input type="radio" name="theme" id="twelve" checked="checked" value="tw"/>
        <label for="miniml">Mini开发者_C百科ml</label><input type="radio" name="theme" id="miniml"  value="mi" />
        <label for="fullscreen">Fullscreen</label><input type="radio" name="theme" id="fullscreen" value="fu" />
    </div>

    <div id="galleria">
        <!-- My photo gallery -->
        <!-- ...  -->
        <!-- ...  -->
    </div>
</div>    

but I load a different theme I caught several errors as "Init failed: Gallery instance already initialized".


You have to load the Theme first before you load Galleria for the first time.

Here's what you should do:

<!-- ADD THIS -- >
<script src="@Url.Content("~/Scripts/JQuery.Galleria/1.2.5/theme/twelve/galleria.twelve.min.js")" type="text/javascript"></script>
<!-- ADD THIS (end) -->
<script src="@Url.Content("~/Scripts/JQuery.Galleria/1.2.5/galleria-1.2.5.min.js")" type="text/javascript"></script>

$(document).ready(function () {
    <!-- REMOVE THIS because is preloaded on top -->
    Galleria.loadTheme(virtualPath + '/Scripts/jQuery.Galleria/1.2.5/themes/twelve/galleria.twelve.min.js');
    <!-- REMOVE THIS (end) -->

    <!-- other codes goes here -->
});

Hope it helps.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜