[bs][galleria][galleria_start]
Galleria.io is a very nice gallery display for website, but the classic version is very basic and not very well documented to get it working responsively like the paid version, at least in my opinion. I finally customized the classic version so I can use with WordPress, but I think I prefer Fotorama.io for my blogs. I just write up how I customized the Galleria.io to work with my responsive theme nicely. The “Fatal error: Could not extract a stage height from the CSS. Traced height: 0px” happens quite often until you set the “wait: 10000” = 10 sec from default of 5sec. The Responsive is not working every well across viewports and devices until you customize your own CSS. FWIW, it’s quite a nice galleries display for the website.[galleria_div]
[/galleria_div][galleria_end]
[mybs data=”1″ title=”Shortcodes for Galleria.io”]
add_shortcode( ‘galleria’, ‘mygalleria’ );
function mygalleria() {
return
‘<script src=”//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js”></script><script src=”/idogjs/galleria/galleria-1.4.2.min.js”></script>
<script type=”text/javascript”>
var $Galleria=jQuery.noConflict();
$Galleria(document).ready(function(){
});
</script>’
; }
add_shortcode( ‘galleria_end’, ‘mygalleria_end’ );
function mygalleria_end() {
return
‘<script src=”/idogjs/galleria/galleria_end.js” type=”text/javascript”></script>’
; }
add_shortcode( ‘galleria_start’, ‘mygalleria_start’ );
function mygalleria_start() {
return
‘<script src=”/idogjs/galleria/galleria_start.js” type=”text/javascript”></script>’
; }
add_shortcode( ‘galleria_div’, ‘galleriadiv’ );
function galleriadiv($atts, $content = null) {
extract(shortcode_atts(array(
‘data’ => ”,
), $atts));
return
‘<div class=”galleria”>’.$content.'</div>’
; }
[/mybs]
[mybs data=”2″ title=”Custom Scripts”]
galleria_start.js
if (Galleria) { $Gallery(“body”).text(‘Galleria works’) }
galleria_end.js
Galleria.loadTheme(‘/idogjs/galleria/themes/classic/galleria.classic.min.js’);
Galleria.run(‘.galleria’, {
lightbox: true,
responsive: true,
wait: 10000,
showInfo: true
});
[/mybs]
[mybs data=”3″ title=”CSS for responsive display”]
.galleria{background:#000;width:800px;height:600px;}@media all and (max-width:768px){.galleria{background:#000;width:500px;height:360px;}@media screen and (max-width:380px){.galleria{background:#000;width:340px;height:290px;}@media all and (max-width:480px){.galleria{background:#000;width:340px;height:290px;}
[/mybs]
[mybs data=”4″ title=”Usage”]
[ galleria ]
[ galleria_start ]
[ galleria_div ]<a href=”//www.dognmonkey.com/techs/wp-content/uploads/z_iphone6_340px.jpg”><img class=”alignnone size-thumbnail wp-image-5582″ src=”//www.dognmonkey.com/techs/wp-content/uploads/z_iphone6_340px-200×112.jpg” alt=”Diplay on iphone6 340px width” width=”200″ height=”112″ /></a>
Remove rel=”xxx” in the href= from media uploader for lightbox to work. alt=”xxx” will display as title by default
[/galleria_div ]
[ galleria_end ]
[/mybs]