javascript - 以编程方式更改 Aino Galleria 主题

Question

如何更改Aino Galleria以编程方式插入主题，比如说...更改单选按钮选项？

我已经尝试过this method没有成功!

我通过以下方式使用 Galleria:

<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">Miniml</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>    

但我加载了一个不同的主题，我发现了几个错误，如“初始化失败:图库实例已初始化”。

Answer 1

首次加载 Galleria 之前，您必须先加载主题。

这是你应该做的:

<!-- 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 -->
});

希望有帮助。