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.
精彩评论