{"id":5574,"date":"2016-02-09T11:11:57","date_gmt":"2016-02-09T19:11:57","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=5574"},"modified":"2017-11-14T10:45:24","modified_gmt":"2017-11-14T18:45:24","slug":"galleria-io-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/galleria-io-in-wordpress.html","title":{"rendered":"Galleria.io In WordPress"},"content":{"rendered":"

[bs][galleria][galleria_start]
\nGalleria.io<\/a> 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\u00a0Fotorama.io<\/a>\u00a0for 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.<\/em>[galleria_div]\"Diplay<\/a> \"Diplay<\/a>\u00a0\"5<\/a>\"desktop<\/a>[\/galleria_div][galleria_end]<\/p>\n

[mybs data=”1″ title=”Shortcodes for Galleria.io”]<\/em><\/p>\n

\n

add_shortcode( ‘galleria’, ‘mygalleria’ );
\nfunction mygalleria() {
\nreturn
\n‘<script src=”\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1\/jquery.js”><\/script><script src=”\/idogjs\/galleria\/galleria-1.4.2.min.js”><\/script>
\n<script type=”text\/javascript”>
\nvar $Galleria=jQuery.noConflict();
\n$Galleria(document).ready(function(){
\n});
\n<\/script>’
\n; }
\nadd_shortcode( ‘galleria_end’, ‘mygalleria_end’ );
\nfunction mygalleria_end() {
\nreturn
\n‘<script src=”\/idogjs\/galleria\/galleria_end.js” type=”text\/javascript”><\/script>’
\n; }
\nadd_shortcode( ‘galleria_start’, ‘mygalleria_start’ );
\nfunction mygalleria_start() {
\nreturn
\n‘<script src=”\/idogjs\/galleria\/galleria_start.js” type=”text\/javascript”><\/script>’
\n; }
\nadd_shortcode( ‘galleria_div’, ‘galleriadiv’ );
\nfunction galleriadiv($atts, $content = null) {
\nextract(shortcode_atts(array(
\n‘data’ => ”,
\n), $atts));
\nreturn
\n‘<div class=”galleria”>’.$content.'<\/div>’
\n; }<\/p>\n<\/blockquote>\n

[\/mybs]<\/p>\n

[mybs data=”2″ title=”Custom Scripts”]<\/em><\/p>\n

galleria_start.js<\/p>\n

\n

if (Galleria) { $Gallery(“body”).text(‘Galleria works’) }<\/em><\/p>\n<\/blockquote>\n

galleria_end.js<\/p>\n

\n

Galleria.loadTheme(‘\/idogjs\/galleria\/themes\/classic\/galleria.classic.min.js’);
\nGalleria.run(‘.galleria’, {
\nlightbox: true,
\nresponsive: true,
\nwait: 10000,
\nshowInfo: true
\n});<\/p>\n<\/blockquote>\n

[\/mybs]<\/p>\n

[mybs data=”3″ title=”CSS for responsive display”]<\/p>\n

\n

.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;}<\/p>\n<\/blockquote>\n

[\/mybs]<\/p>\n

[mybs data=”4″ title=”Usage”]<\/em><\/p>\n

\n

[ galleria ]<\/p>\n

[ galleria_start ]<\/p>\n

[ 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><\/p>\n

Remove rel=”xxx” in the href= from media uploader for lightbox to work. alt=”xxx” will display as title by default<\/p>\n

[\/galleria_div ]<\/p>\n

[ galleria_end ]<\/p>\n<\/blockquote>\n

[\/mybs]<\/p>\n