scripts | WordPress

Galleria.io In WordPress

February 9, 2016 / 278 views

[bs]
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.

Diplay on iphone6 340px width Diplay on iphone6 768px width 5 sec wait fatal errordesktop display

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

Paid Links

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.