function i18n_gallery_supersized_content($gallery, $pic)
{
$interval = intval(@$gallery['interval']) ? intval($gallery['interval']) : 5000;
?>
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
</div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="<?php
echo i18n_gallery_site_link();
?>
plugins/i18n_gallery/images/supersized/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
</div>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="<?php
echo i18n_gallery_site_link();
?>
plugins/i18n_gallery/images/supersized/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</div>
</div>
<script type="text/javascript">
jQuery(function($) {
$.supersized.themeVars.image_path = '<?php
echo i18n_gallery_site_link();
?>
plugins/i18n_gallery/images/supersized/';
$.supersized({
//Functionality
slideshow : 1, //Slideshow on/off
autoplay : <?php
echo @$pic != null ? 0 : 1;
?>
, //Slideshow starts playing automatically
start_slide : <?php
echo @$pic != null ? intval($pic) + 1 : 1;
?>
, //Start slide (0 is random)
random : 0, //Randomize slide order (Ignores start slide)
slide_interval : <?php
echo intval($interval);
?>
, //Length between transitions
transition : 1, //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 500, //Speed of transition
new_window : 1, //Image links open in new window/tab
pause_hover : 0, //Pause slideshow on hover
keyboard_nav : 1, //Keyboard navigation on/off
performance : 1, //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
image_protect : 1, //Disables image dragging and right click with Javascript
image_path : '<?php
echo i18n_gallery_site_link();
?>
plugins/i18n_gallery/images/supersized/', //Default image path
//Size & Position
min_width : 0, //Min width allowed (in pixels)
min_height : 0, //Min height allowed (in pixels)
vertical_center : 1, //Vertically center background
horizontal_center: 1, //Horizontally center background
fit_always : 1,
fit_portrait : 1, //Portrait images will not exceed browser height
fit_landscape : 1, //Landscape images will not exceed browser width
//Components
navigation : 1, //Slideshow controls on/off
thumbnail_navigation : 1, //Thumbnail navigation
slide_counter : 1, //Display slide numbers
slide_captions : 1, //Slide caption (Pull from "title" in slides array)
slide_links : 'blank', // Individual links for each slide (Options: false, 'number', 'name', 'blank')
slides : [ //Slideshow Images
<?php
$first = true;
foreach ($gallery['items'] as $item) {
?>
<?php
if (!$first) {
echo ', ';
}
?>
{ image: <?php
echo json_encode(i18n_gallery_image_link($gallery, $item, false));
?>
, title: <?php
echo json_encode(@$item["_title"]);
?>
, thumb:<?php
echo json_encode(i18n_gallery_thumb_link($gallery, $item, false));
?>
, url: <?php
echo json_encode(i18n_gallery_site_link());
?>
}
<?php
$first = false;
}
?>
]
<?php
foreach ($gallery as $key => $value) {
if (substr($key, 0, 2) == 'x-') {
?>
,<?php
echo substr($key, 2);
?>
: <?php
echo preg_match('/^(null|true|false|\\d+)$/', $value) ? $value : json_encode($value);
}
}
?>
});
});
</script>
<?php
}
function i18n_gallery_thumb_link($gallery, $item = null, $echo = true)
{
if (!is_array($item)) {
$item = @$gallery['items'][-intval($item) - 1];
}
if (!$item) {
$item = @$gallery['items'][0];
}
$tw = @$gallery['thumbwidth'];
$th = @$gallery['thumbheight'];
$tc = @$gallery['thumbcrop'] && $tw && $th;
$directly = i18n_gallery_directly();
if ($directly && file_exists(GSDATAPATH . 'thumbs/' . ($thumbfile = i18n_gallery_thumbfile($item['filename'], $tw, $th, $tc)))) {
$link = i18n_gallery_site_link() . 'data/thumbs/' . $thumbfile;
} else {
$link = i18n_gallery_site_link() . 'plugins/i18n_gallery/browser/pic.php?g=' . $gallery['name'] . '&p=' . urlencode($item['filename']) . '&w=' . $tw . '&h=' . $th . ($tc ? '&c=1' : '');
}
if ($echo) {
echo str_replace('&', '&', $link);
} else {
return $link;
}
}
function i18n_gallery_cycle_header($gallery)
{
global $SITEURL;
if (i18n_gallery_check($gallery, 'jquery') && i18n_gallery_needs_include('jquery.js')) {
?>
<script type="text/javascript" src="<?php
echo i18n_gallery_site_link();
?>
plugins/i18n_gallery/js/jquery-1.11.2.min.js"></script>
<?php
}
if (i18n_gallery_check($gallery, 'js') && i18n_gallery_needs_include('cycle.js')) {
?>
<script type="text/javascript" src="<?php
echo i18n_gallery_site_link();
?>
plugins/i18n_gallery/js/jquery.cycle.all.min.js"></script>
<?php
}
if (i18n_gallery_check($gallery, 'css') && i18n_gallery_needs_include('cycle.css')) {
?>
<style type="text/css">
.gallery-cycle {
padding: 3px;
border: solid 1px #C7C7C7;
position: relative;
}
.gallery-cycle a {
outline: none;
}
.gallery-cycle .gallery-container {
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
position: relative;
}
div.gallery-cycle .gallery-slide {
margin: 0;
padding: 0;
border: 0 none;
width: 100%;
height: 100%;
}
.gallery-cycle .gallery-text {
margin: 0;
padding: 10px;
border: 0 none;
background-color: white;
overflow: hidden;
}
.gallery-cycle .gallery-image {
margin: 0;
padding: 0;
border: 0 none;
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: white;
}
.gallery-cycle .gallery-image img {
margin: 0;
padding: 0;
border: 0 none;
}
.gallery-cycle .gallery-control {
position: absolute;
margin: 0;
padding: 5px 10px;
border: 0 none;
z-index: 10000;
}
.gallery-cycle .gallery-control-dots a {
font-size: 40px;
border: 0 none;
text-decoration: none;
color: #999999;
}
.gallery-cycle .gallery-control-numbers a {
font-size: 18px;
border: 0 none;
text-decoration: none;cylce
color: #999999;
padding: 0px 5px;
margin: 0px 2px;
border: 1px solid #999999;
background-color: white;
}
.gallery-cycle .gallery-control-images a {
background: url(<?php
echo $SITEURL;
?>
plugins/i18n_gallery/images/cycle/pagination.png);
width: 12px;
height: 0px;
overflow: hidden;
padding-top: 12px;
margin: 10px 2px;
border: 0 none;
display: block;
float: left;
}
.gallery-cycle .gallery-control a:hover {
color: #666666;
}
.gallery-cycle .gallery-control a.activeSlide {
color: #C5400E;
background-position: 0 -12px;
}
.gallery-cycle .prev {
top: 0;
left: 0;
height: 100%;
width: 35%;
cursor: pointer;
position: absolute;
z-index: 9000;
}
.gallery-cycle .prev img {
left: 10px;
margin-top: -15px;
position: absolute;
top: 50%;
display: none;
}
.gallery-cycle .next {
top: 0;
right: 0;
height: 100%;
width: 35%;
cursor: pointer;
position: absolute;
z-index: 9000;
}
.gallery-cycle .next img {
right: 10px;
margin-top: -15px;
position: absolute;
top: 50%;
display: none;
}
.gallery-cycle .prev:hover img, .gallery-cycle .next:hover img {
display: block;
}
</style>
<?php
}
if (i18n_gallery_check($gallery, 'css')) {
$id = i18n_gallery_id($gallery);
$w = @$gallery['width'] ? $gallery['width'] : (@$gallery['height'] ? (int) $gallery['height'] * $gallery['items'][0]['width'] / $gallery['items'][0]['height'] : $gallery['items'][0]['width']);
$h = @$gallery['height'] ? $gallery['height'] : (@$gallery['width'] ? (int) $gallery['width'] * $gallery['items'][0]['height'] / $gallery['items'][0]['width'] : $gallery['items'][0]['height']);
$tw = @$gallery['textwidth'] ? intval($gallery['textwidth']) : $w / 3;
$tp = @$gallery['textpos'];
?>
<style type="text/css">
#gallery-cycle-<?php
echo $id;
?>
.gallery-cycle {
width: <?php
echo $tp == 'left' || $tp == 'right' ? $w + $tw : $w;
?>
px;
height: <?php
echo $tp == 'top' || $tp == 'bottom' ? $h + $tw : $h;
?>
px;
}
#gallery-cycle-<?php
echo $id;
?>
.gallery-cycle .gallery-container {
width: <?php
echo $tp == 'left' || $tp == 'right' ? $w + $tw : $w;
?>
px;
height: <?php
echo $tp == 'top' || $tp == 'bottom' ? $h + $tw : $h;
?>
px;
position: relative;
}
#gallery-cycle-<?php
echo $id;
?>
.gallery-cycle .gallery-text {
<?php
if ($tp == 'overlay') {
?>
position:absolute;
width: <?php
echo $w;
?>
px;
bottom: 0;
background: rgba(0,0,0,0.5);
color: white;
<?php
} else {
?>
width: <?php
echo $tp == 'left' || $tp == 'right' ? $tw - 20 : $w - 20;
?>
px;
height: <?php
echo $tp == 'top' || $tp == 'bottom' ? $tw - 20 : $h - 20;
?>
px;
<?php
if ($tp == 'left') {
echo 'float: left;';
} else {
if ($tp == 'right') {
echo 'float: right;';
}
}
?>
<?php
}
?>
}
#gallery-cycle-<?php
echo $id;
?>
.gallery-cycle .gallery-image {
width: <?php
echo $w;
?>
px;
height: <?php
echo $h;
?>
px;
}
#gallery-cycle-<?php
echo $id;
?>
.gallery-cycle .gallery-control {
<?php
if ($tp == 'overlay') {
?>
left: <?php
echo $w / 2 - count($gallery['items']) * 16 / 2 - 10 + 4;
?>
px;
text-align: center;
<?php
} else {
?>
<?php
echo $tp == 'left' ? 'left: 0;' : 'right: 0;';
?>
<?php
echo $tp == 'top' ? 'top: 0;' : 'bottom:0;';
?>
<?php
}
?>
}
</style>
<?php
}
}
function i18n_gallery_fancybox_header($gallery)
{
if (i18n_gallery_check($gallery, 'jquery') && i18n_gallery_needs_include('jquery.js')) {
?>
<script type="text/javascript" src="<?php
echo i18n_gallery_site_link();
?>
plugins/i18n_gallery/js/jquery-1.11.2.min.js"></script>
<?php
}
if (i18n_gallery_check($gallery, 'js') && i18n_gallery_check($gallery, 'pagify', false) && i18n_gallery_needs_include('pagify.js')) {
?>
<script type="text/javascript" src="<?php
echo i18n_gallery_site_link();
?>
plugins/i18n_gallery/js/jquery.pagify.js"></script>
<?php
}
if (i18n_gallery_check($gallery, 'js') && i18n_gallery_needs_include('fancybox.js')) {
?>
<script type="text/javascript" src="<?php
echo i18n_gallery_site_link();
?>
plugins/i18n_gallery/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="<?php
echo i18n_gallery_site_link();
?>
plugins/i18n_gallery/js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="<?php
echo i18n_gallery_site_link();
?>
plugins/i18n_gallery/js/jquery.fancybox-1.3.4.pack.js"></script>
<?php
}
if (i18n_gallery_check($gallery, 'css') && i18n_gallery_needs_include('fancybox.css')) {
?>
<link rel="stylesheet" href="<?php
echo i18n_gallery_site_link();
?>
plugins/i18n_gallery/css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" charset="utf-8" />
<style type="text/css">
.gallery-fancybox * {
margin: 0;
padding: 0;
border: 0 none;
vertical-align: middle;
text-align: center;
}
.gallery-fancybox .gallery-thumb {
float: left;
padding: 3px;
border: solid 1px #C7C7C7;
margin-right: 10px;
margin-bottom: 10px;
}
.gallery-fancybox a {
display: table-cell;
text-decoration: none;
}
.gallery-fancybox .gallery-thumb .gallery-title {
margin: 0;
padding: 2px 5px;
}
.gallery-fancybox .gallery-image {
float: left;
padding: 3px;
border: solid 1px #C7C7C7;
max-width: 100%;
position:relative;
}
.gallery-fancybox .gallery-image #fancybox-left, .gallery-fancybox .gallery-image #fancybox-right {
display: block;
}
.gallery-fancybox .gallery-image a#fancybox-close {
display: block;
position: relative;
float: right;
}
.gallery-fancybox div.pagify {
clear: both;
text-align: left;
}
.gallery-fancybox div.pagify a {
display: inline;
font-size: 18px;
border: 0 none;
text-decoration: none;
color: #999999;
padding: 0px 5px;
margin: 0px 2px;
border: 1px solid #999999;
background-color: white;
}
.gallery-fancybox div.pagify a.current {
color: #C5400E;
}
</style>
<?php
}
if (i18n_gallery_check($gallery, 'css')) {
$id = i18n_gallery_id($gallery);
$tw = @$gallery['thumbwidth'];
$th = @$gallery['thumbheight'];
?>
<style type="text/css">
.gallery-<?php
echo $id;
?>
.gallery-fancybox a {
<?php
if ($th) {
echo 'height: ' . $th . 'px;';
}
?>
}
</style>
<?php
}
}
function i18n_gallery_s3slider_header($gallery)
{
$id = 's3slider-' . i18n_gallery_id($gallery);
$w = @$gallery['width'] ? $gallery['width'] : (@$gallery['height'] ? (int) $gallery['height'] * $gallery['items'][0]['width'] / $gallery['items'][0]['height'] : $gallery['items'][0]['width']);
$h = @$gallery['height'] ? $gallery['height'] : (@$gallery['width'] ? (int) $gallery['width'] * $gallery['items'][0]['height'] / $gallery['items'][0]['width'] : $gallery['items'][0]['height']);
if (i18n_gallery_check($gallery, 'jquery') && i18n_gallery_needs_include('jquery.js')) {
?>
<script type="text/javascript" src="<?php
echo i18n_gallery_site_link();
?>
plugins/i18n_gallery/js/jquery-1.11.2.min.js"></script>
<?php
}
if (i18n_gallery_check($gallery, 'js') && i18n_gallery_needs_include('s3slider.js')) {
// packed version of js does not work!
?>
<script type="text/javascript" src="<?php
echo i18n_gallery_site_link();
?>
plugins/i18n_gallery/js/s3Slider.js"></script>
<?php
}
if (i18n_gallery_check($gallery, 'css')) {
?>
<style type="text/css">
#<?php
echo $id;
?>
{
width: <?php
echo $w;
?>
px; /* important to be same as image width */
height: <?php
echo $h;
?>
px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
padding: 0;
border: 0 none;
}
#<?php
echo $id;
?>
#<?php
echo $id;
?>
Content {
width: <?php
echo $w;
?>
px;
height: <?php
echo $h;
?>
px;
position: absolute;
top: 0;
margin-left: 0;
list-style: none;
padding: 0;
margin: 0;
}
#<?php
echo $id;
?>
.<?php
echo $id;
?>
Image {
float: left;
margin: 0 !important;
padding: 0 !important;
position: relative;
display: none;
background-image: none !important;
}
#<?php
echo $id;
?>
.<?php
echo $id;
?>
Image span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
word-wrap: break-word;
<?php
if (@$gallery['textpos'] == 'top') {
?>
top: 0;
left: 0;
width: <?php
echo $w - 2 * 13;
?>
px;
<?php
} else {
if (@$gallery['textpos'] == 'left') {
?>
top: 0;
left: 0;
width: <?php
echo (int) min(110, $w / 4);
?>
px;
height: <?php
echo $h - 2 * 10;
?>
px;
<?php
} else {
if (@$gallery['textpos'] == 'right') {
?>
right: 0;
bottom: 0;
width: <?php
echo (int) min(110, $w / 4);
?>
px;
height: <?php
echo $h - 10;
?>
px;
<?php
} else {
?>
bottom: 0;
left: 0;
width: <?php
echo $w - 2 * 13;
?>
px;
<?php
}
}
}
?>
}
.<?php
echo $id;
?>
Image span strong {
font-size: 14px;
}
.clear {
clear: both;
}
</style>
<?php
}
}
