| Server IP : 94.23.64.18 / Your IP :
216.73.216.185 [
Web Server : Apache System : Linux webm005.cluster107.gra.hosting.ovh.net 5.15.167-ovh-vps-grsec-zfs-classid #1 SMP Tue Sep 17 08:14:20 UTC 2024 x86_64 User : villadal ( 6036) PHP Version : 7.4.33 Disable Function : _dyuweyrj4,_dyuweyrj4r,dl Domains : 2 Domains MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/villadal/www/wp-content/plugins/emme_gallery/template/ |
Upload File : |
<div id="sync1" class="emme_gallery thumbnail_template owl-carousel <?=$atts['class']?>">
<?php // CHIAMARE il template thumbnail.php
foreach ($images as $image) {
$urlImage = wp_get_attachment_image_url($image, 'full');
$gallery = '<div class="emme-slider-item" >';
$gallery .= '<img src="'.$urlImage.'" alt="'.get_the_title($image).'">';
//$gallery .= '<a data-lightbox="'.$light.'" data-title="'.wp_get_attachment_caption($image).'" title="'.get_the_title($image).'" href="'.wp_get_attachment_image_url($image, 'full').'" >';
// $gallery .= wp_get_attachment_image($image, $atts['thumb'], false, array('alt' => get_the_title($image)));
//$gallery .= '</a>';
if($atts['title'] != 'No' || $atts['description'] != 'No'){
$gallery .= '<div class="txt">';
if(get_the_title($image) && $atts['title'] != 'No'){
$gallery .= '<div class="tit">'.get_the_title($image).'</div>';
}
if(wp_get_attachment_caption($image) && $atts['description'] != 'No'){
$gallery .= '<figcaption>'.wp_get_attachment_caption($image).'</figcaption>';
}
$gallery .= '</div>';
}
$gallery .= '</div>';
echo $gallery;
}
?>
</div>
<div id="sync2" class="navigation-thumbs owl-carousel">
<?php
foreach ($images as $image) {
$nav_thumbnails = wp_get_attachment_image_url($image, $atts['thumb']);
echo '<img src="'.$nav_thumbnails.'" alt="'.get_the_title($image).'">';
}
?>
</div>
<script type="text/javascript">
jQuery(document).ready(function(e) {
var sync1 = jQuery(".emme_gallery.thumbnail_template");
var sync2 = jQuery(".navigation-thumbs");
var thumbnailItemClass = '.owl-item';
var slides = sync1.owlCarousel({
video:true,
startPosition: 12,
items:1,
loop:true,
margin:10,
autoHeight: true,
autoplay:true,
autoplayTimeout:6000,
autoplayHoverPause:false,
nav: false,
dots: true
}).on('changed.owl.carousel', syncPosition);
function syncPosition(el) {
$owl_slider = jQuery(this).data('owl.carousel');
var loop = $owl_slider.options.loop;
if(loop){
var count = el.item.count-1;
var current = Math.round(el.item.index - (el.item.count/2) - .5);
if(current < 0) {
current = count;
}
if(current > count) {
current = 0;
}
}else{
var current = el.item.index;
}
var owl_thumbnail = sync2.data('owl.carousel');
var itemClass = "." + owl_thumbnail.options.itemClass;
var thumbnailCurrentItem = sync2
.find(itemClass)
.removeClass("synced")
.eq(current);
thumbnailCurrentItem.addClass('synced');
if (!thumbnailCurrentItem.hasClass('active')) {
var duration = 300;
sync2.trigger('to.owl.carousel',[current, duration, true]);
}
}
var thumbs = sync2.owlCarousel({
startPosition: 12,
items:6,
loop:false,
margin:10,
autoplay:false,
nav: false,
dots: false,
onInitialized: function (e) {
var thumbnailCurrentItem = jQuery(e.target).find(thumbnailItemClass).eq(this._current);
thumbnailCurrentItem.addClass('synced');
},
})
.on('click', thumbnailItemClass, function(e) {
e.preventDefault();
var duration = 300;
var itemIndex = jQuery(e.target).parents(thumbnailItemClass).index();
sync1.trigger('to.owl.carousel',[itemIndex, duration, true]);
}).on("changed.owl.carousel", function (el) {
var number = el.item.index;
$owl_slider = sync1.data('owl.carousel');
$owl_slider.to(number, 100, true);
});
});
</script>
<style>
#sync1 .item{
background: #0c83e7;
padding: 80px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
}
#sync2 .item{
background: #C9C9C9;
padding: 10px 0px;
margin: 5px;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-align: center;
cursor: pointer;
}
#sync2 .synced .item{
background: #0c83e7;
}
.navigation-thumbs .owl-item.active.synced {
border: 2px solid #76413a;
box-sizing: border-box;
}
</style>