Fotorama.io In WordPress Without Plugin

[bs]

Fotorama.io V4.6.4 is a great Gallery display for WordPress. 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 [ gallery ] was used for fotorama plugin, I need to customize my shortcodes to work with both [ gallery ]and my new shortcodes.

[mybs data=”1″ title=”MyFotorama Shortcodes”]

add_shortcode( ‘myfotorama’, ‘myfotorama’ );
function myfotorama() {
return
‘<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>’
; }

This shortcode is for the images with all the options I want

add_shortcode( ‘fotorama_body’, ‘my_body’ );
function my_body($atts, $content = null) {
extract(shortcode_atts(array(
‘data’ => ”,
‘title’ =>”,
), $atts));
return
‘<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>’
; }

In order for the [ gallery ] shortcode to work, I need to copy the script from the plugin.

add_shortcode(‘gallery’, ‘fotorama_gallery_shortcode’);
add_shortcode(‘fotorama’, ‘fotorama_gallery_shortcode’);

function fotorama_gallery_shortcode($atts)
{
if (!$atts) {
$atts = array();
}

if (array_key_exists(‘fotorama’, $atts) && $atts[‘fotorama’] == ‘false’) {
return gallery_shortcode($atts);
}

$atts[‘link’] = ‘file’;
$atts[‘itemtag’] = ‘dl’;
$atts[‘icontag’] = ‘dt’;
$atts[‘captiontag’] = ‘dd’;
$atts[‘columns’] = 0;

if (array_key_exists(‘orderby’, $atts) && $atts[‘orderby’] == ‘rand’) {
$atts[‘orderby’] = ”;
$atts[‘shuffle’] = ‘true’;
}

$atts[‘size’] = ‘thumbnail’;
$gallery = gallery_shortcode($atts);

$width = array_key_exists(‘width’, $atts) ? $atts[‘width’] : ”;
$height = array_key_exists(‘height’, $atts) ? $atts[‘height’] : ”;

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

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

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

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

if (!$width) {
$atts[‘width’] = $_width;
}

if (!$height) {
$height = $_height;
}
}

$quote = $hrefs[1][$i];
$full = $hrefs[2][$i];

$gallery = str_replace($quote . $full . $quote,
$quote . $src[2] . $quote . ‘ data-full=’ . $quote . $full . $quote,
$gallery);
}

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

$data = ”;
foreach ($atts as $key => $value) {
if ($key != ‘fotorama’) {
$data .= “data-$key=’$value'”;
}
}

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