{"id":5629,"date":"2016-02-16T16:56:01","date_gmt":"2016-02-17T00:56:01","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=5629"},"modified":"2016-02-16T16:56:01","modified_gmt":"2016-02-17T00:56:01","slug":"fotorama-io-in-wordpress-without-plugin","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/mythemes\/fotorama-io-in-wordpress-without-plugin.html","title":{"rendered":"Fotorama.io In WordPress Without Plugin"},"content":{"rendered":"

[bs]<\/p>\n

Fotorama.io<\/a>\u00a0V4.6.4 is a great Gallery display for\u00a0WordPress. There is a plugin made for WP, but I want to customize for my website and NOT to load all scripts all the time, only when I need to use it. I do prefer this plugin over Galleria.io or lightGallery. I’ve been using the plugin for WP on many of my posts, so the shortcode for\u00a0<\/em>[ gallery ]\u00a0was used for fotorama plugin, I need to customize my shortcodes to work with both\u00a0<\/em>[ gallery ]and my new shortcodes.<\/em><\/p>\n

[mybs data=”1″ title=”MyFotorama Shortcodes”]<\/p>\n

add_shortcode( ‘myfotorama’, ‘myfotorama’ );
\nfunction myfotorama() {
\nreturn
\n‘<link href=”\/idogjs\/fotorama464\/fotorama.css” rel=”stylesheet”><link href=”\/idogjs\/fotorama464\/fotorama-wp.css” rel=”stylesheet”><script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js”><\/script><script src=”\/idogjs\/fotorama464\/fotorama.js”><\/script><script src=”\/idogjs\/fotorama464\/fotorama-wp.js”><\/script>’
\n; }<\/p>\n

This shortcode is for the images with all the options I want<\/em><\/p>\n

add_shortcode( ‘fotorama_body’, ‘my_body’ );
\nfunction my_body($atts, $content = null) {
\nextract(shortcode_atts(array(
\n‘data’ => ”,
\n‘title’ =>”,
\n), $atts));
\nreturn
\n‘<div class=”fotorama” data-width=”600″ data-keyboard=”true” data-transition=”crossfade” data-allowfullscreen=”true” data-nav=”thumbs” data-arrows=”true” data-click=”true” data-swipe=”true” data-trackpad=”true” data-hash=”true”>’.$content.'<\/div>’
\n; }<\/p>\n<\/blockquote>\n

\u00a0 \u00a0 In order for the [ gallery ] shortcode to work, I need to copy the script from the plugin.<\/em><\/p>\n

add_shortcode(‘gallery’, ‘fotorama_gallery_shortcode’);
\nadd_shortcode(‘fotorama’, ‘fotorama_gallery_shortcode’);<\/p>\n

function fotorama_gallery_shortcode($atts)
\n{
\nif (!$atts) {
\n$atts = array();
\n}<\/p>\n

if (array_key_exists(‘fotorama’, $atts) && $atts[‘fotorama’] == ‘false’) {
\nreturn gallery_shortcode($atts);
\n}<\/p>\n

$atts[‘link’] = ‘file’;
\n$atts[‘itemtag’] = ‘dl’;
\n$atts[‘icontag’] = ‘dt’;
\n$atts[‘captiontag’] = ‘dd’;
\n$atts[‘columns’] = 0;<\/p>\n

if (array_key_exists(‘orderby’, $atts) && $atts[‘orderby’] == ‘rand’) {
\n$atts[‘orderby’] = ”;
\n$atts[‘shuffle’] = ‘true’;
\n}<\/p>\n

$atts[‘size’] = ‘thumbnail’;
\n$gallery = gallery_shortcode($atts);<\/p>\n

$width = array_key_exists(‘width’, $atts) ? $atts[‘width’] : ”;
\n$height = array_key_exists(‘height’, $atts) ? $atts[‘height’] : ”;<\/p>\n

$atts[‘size’] = ‘large’;
\npreg_match_all(‘\/(<img[^<>]*>).*\\n*.*<\\\/dt\/’, gallery_shortcode($atts), $images);
\npreg_match_all(‘\/href=(\\’|”)([^”\\’]+)(\\’|”).*\\n*.*<\\\/dt\/’, $gallery, $hrefs);<\/p>\n

for ($i = 0, $l = count($images[0]); $i < $l; $i++) {
\n$image = $images[1][$i];
\npreg_match(‘\/src=(\\’|”)([^”\\’]+)(\\’|”)\/’, $image, $src);<\/p>\n

if (!$i) {
\npreg_match(‘\/width=(\\’|”)([^”\\’]+)(\\’|”)\/’, $image, $__width);
\n$_width = $__width[2];<\/p>\n

preg_match(‘\/height=(\\’|”)([^”\\’]+)(\\’|”)\/’, $image, $__height);
\n$_height = $__height[2];<\/p>\n

if (!$width) {
\n$atts[‘width’] = $_width;
\n}<\/p>\n

if (!$height) {
\n$height = $_height;
\n}
\n}<\/p>\n

$quote = $hrefs[1][$i];
\n$full = $hrefs[2][$i];<\/p>\n

$gallery = str_replace($quote . $full . $quote,
\n$quote . $src[2] . $quote . ‘ data-full=’ . $quote . $full . $quote,
\n$gallery);
\n}<\/p>\n

$atts[‘auto’] = ‘false’;
\n$atts[‘max-width’] = ‘100%’;
\n$atts[‘ratio’] = array_key_exists(‘ratio’, $atts) ? $atts[‘ratio’] : ($_width && $_height ? $_width \/ $_height : ”);<\/p>\n

$data = ”;
\nforeach ($atts as $key => $value) {
\nif ($key != ‘fotorama’) {
\n$data .= “data-$key=’$value'”;
\n}
\n}<\/p>\n

return “<div class=’fotorama–wp’ $data>$gallery<\/div>”;
\n}<\/p><\/blockquote>\n

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

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

The important thing for these shortcodes to work is not embedded in any “text” tags.<\/em><\/p>\n

\n

[ myfotorama ][ fotorama_body ]<\/p>\n

images.<\/p>\n

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

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

[mybs data=”3″ title=”fotorama Gallery Display without Plugin”]<\/em><\/p>\n