Skip to content
Snippets Groups Projects
Commit f38cf6c7 authored by Karthik Kumar D K's avatar Karthik Kumar D K Committed by karthikdksrijan
Browse files

Issue #3273083 by heykarthikwithu: Feature requests

parent 87bd5893
No related branches found
No related tags found
No related merge requests found
......@@ -47,3 +47,13 @@
perspective: 1000;
transform-style: preserve-3d;
}
.imagefield_slideshow-wrapper #image-pager {
text-align: center;
margin-top: 15px;
position: initial;
display: block;
}
.imagefield_slideshow-wrapper #image-pager img {
display: inline-block;
}
......@@ -4,6 +4,8 @@ imagefield_slideshow:
https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js: { type: external, minified: true }
https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.flip.min.js: { type: external, minified: true }
https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.shuffle.min.js: { type: external, minified: true }
https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.swipe.min.js: { type: external, minified: true }
# js/imagefield-slideshow.js: {}
css:
theme:
css/imagefield-slideshow.css: {}
......
......@@ -35,6 +35,7 @@ function imagefield_slideshow_theme() {
'speed' => NULL,
'timeout' => NULL,
'pager' => NULL,
'image_pager' => NULL,
'link_image_to' => NULL,
],
],
......
......@@ -8,7 +8,7 @@
'use strict';
$(document).ready(function () {
console.log('imagefield_slideshow loaded');
});
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
})(jQuery, Drupal, drupalSettings);
/* Plugin for Cycle2; Copyright (c) 2012 M. Alsup; v20141007 */
!function(a){"use strict";function b(b){return{preInit:function(a){a.slides.css(d)},transition:function(c,d,e,f,g){var h=c,i=a(d),j=a(e),k=h.speed/2;b.call(j,-90),j.css({display:"block",visibility:"visible","background-position":"-90px",opacity:1}),i.css("background-position","0px"),i.animate({backgroundPosition:90},{step:b,duration:k,easing:h.easeOut||h.easing,complete:function(){c.API.updateView(!1,!0),j.animate({backgroundPosition:0},{step:b,duration:k,easing:h.easeIn||h.easing,complete:g})}})}}}function c(b){return function(c){var d=a(this);d.css({"-webkit-transform":"rotate"+b+"("+c+"deg)","-moz-transform":"rotate"+b+"("+c+"deg)","-ms-transform":"rotate"+b+"("+c+"deg)","-o-transform":"rotate"+b+"("+c+"deg)",transform:"rotate"+b+"("+c+"deg)"})}}var d,e=document.createElement("div").style,f=a.fn.cycle.transitions,g=void 0!==e.transform||void 0!==e.MozTransform||void 0!==e.webkitTransform||void 0!==e.oTransform||void 0!==e.msTransform;g&&void 0!==e.msTransform&&(e.msTransform="rotateY(0deg)",e.msTransform||(g=!1)),g?(f.flipHorz=b(c("Y")),f.flipVert=b(c("X")),d={"-webkit-backface-visibility":"hidden","-moz-backface-visibility":"hidden","-o-backface-visibility":"hidden","backface-visibility":"hidden"}):(f.flipHorz=f.scrollHorz,f.flipVert=f.scrollVert||f.scrollHorz)}(jQuery);
\ No newline at end of file
This diff is collapsed.
/*! shuffle transition plugin for Cycle2; version: 20140128 */
(function($) {
"use strict";
$.fn.cycle.transitions.shuffle = {
transition: function( opts, currEl, nextEl, fwd, callback ) {
$( nextEl ).css({
display: 'block',
visibility: 'visible'
});
var width = opts.container.css( 'overflow', 'visible' ).width();
var speed = opts.speed / 2; // shuffle has 2 transitions
var element = fwd ? currEl : nextEl;
opts = opts.API.getSlideOpts( fwd ? opts.currSlide : opts.nextSlide );
var props1 = { left:-width, top:15 };
var props2 = opts.slideCss || { left:0, top:0 };
if ( opts.shuffleLeft !== undefined ) {
props1.left = props1.left + parseInt(opts.shuffleLeft, 10) || 0;
}
else if ( opts.shuffleRight !== undefined ) {
props1.left = width + parseInt(opts.shuffleRight, 10) || 0;
}
if ( opts.shuffleTop ) {
props1.top = opts.shuffleTop;
}
// transition slide in 3 steps: move, re-zindex, move
$( element )
.animate( props1, speed, opts.easeIn || opts.easing )
.queue( 'fx', $.proxy(reIndex, this))
.animate( props2, speed, opts.easeOut || opts.easing, callback );
function reIndex(nextFn) {
/*jshint validthis:true */
this.stack(opts, currEl, nextEl, fwd);
nextFn();
}
},
stack: function( opts, currEl, nextEl, fwd ) {
var i, z;
if (fwd) {
opts.API.stackSlides( nextEl, currEl, fwd );
// force curr slide to bottom of the stack
$(currEl).css( 'zIndex', 1 );
}
else {
z = 1;
for (i = opts.nextSlide - 1; i >= 0; i--) {
$(opts.slides[i]).css('zIndex', z++);
}
for (i = opts.slideCount - 1; i > opts.nextSlide; i--) {
$(opts.slides[i]).css('zIndex', z++);
}
$(nextEl).css( 'zIndex', opts.maxZ );
$(currEl).css( 'zIndex', opts.maxZ - 1 );
}
}
};
})(jQuery);
......@@ -124,6 +124,7 @@ class ImagefieldSlideshowFieldFormatter extends ImageFormatterBase implements Co
'imagefield_slideshow_transition_speed' => 100,
'imagefield_slideshow_timeout' => 100,
'imagefield_slideshow_pager' => TRUE,
'imagefield_slideshow_pager_image' => FALSE,
'imagefield_slideshow_link_image_to' => '',
] + parent::defaultSettings();
}
......@@ -225,11 +226,17 @@ class ImagefieldSlideshowFieldFormatter extends ImageFormatterBase implements Co
'#description' => t("The timeout for slides."),
];
$element['imagefield_slideshow_pager'] = [
'#title' => $this->t("Enable Pager ?"),
'#title' => $this->t("Enable Default Pager ?"),
'#type' => 'checkbox',
'#default_value' => $this->getSetting('imagefield_slideshow_pager'),
'#description' => $this->t('This will show the Pager on slideshow.'),
];
$element['imagefield_slideshow_pager_image'] = [
'#title' => $this->t("Enable Image Pager ?"),
'#type' => 'checkbox',
'#default_value' => $this->getSetting('imagefield_slideshow_pager_image'),
'#description' => $this->t('This will show the Image Pager on slideshow.'),
];
$link_image_to = ['' => 'Nothing', 'content' => 'Content', 'file' => 'File'];
$element['imagefield_slideshow_link_image_to'] = [
'#type' => 'select',
......@@ -301,6 +308,13 @@ class ImagefieldSlideshowFieldFormatter extends ImageFormatterBase implements Co
]);
}
$image_pager2 = $this->getSetting('imagefield_slideshow_pager_image');
if ($image_pager2) {
$summary[] = $this->t("Image Pager: @image_pager", [
"@image_pager" => $image_pager2,
]);
}
$link_image_to = $this->getSetting('imagefield_slideshow_link_image_to');
if ($link_image_to) {
$summary[] = $this->t("Link Image to: @link_image_to", [
......@@ -386,7 +400,8 @@ class ImagefieldSlideshowFieldFormatter extends ImageFormatterBase implements Co
'#pause' => $this->getSetting('imagefield_slideshow_style_pause'),
'#speed' => $this->getSetting('imagefield_slideshow_transition_speed'),
'#timeout' => $this->getSetting('imagefield_slideshow_timeout'),
'#pager' => $this->getSetting('imagefield_slideshow_pager'),
'#pager' => (count($image_uri_values) > 1) ? $this->getSetting('imagefield_slideshow_pager') : FALSE,
'#image_pager' => (count($image_uri_values) > 1) ? $this->getSetting('imagefield_slideshow_pager_image') : FALSE,
'#link_image_to' => $link_image_to,
];
......
......@@ -23,7 +23,9 @@
data-cycle-timeout="{{ timeout }}"
data-cycle-prev="#imagefield_slideshow-prev-{{ prev }}"
data-cycle-next="#imagefield_slideshow-next-{{ next }}"
data-cycle-loader="wait">
data-cycle-loader="wait"
data-cycle-pager="#image-pager"
data-cycle-pager-template="">
{% if pager %}
<div class="cycle-pager"></div>
{% endif %}
......@@ -39,6 +41,13 @@
<img title="{{ value.title }}" alt="{{ value.alt }}" src="{{ value.uri }}" />
{% endif %}
{% endfor %}
{% if image_pager %}
<div id="image-pager" class="cycle-pager external">
{% for key,value in url %}
<img title="{{ value.title }}" alt="{{ value.alt }}" src="{{ value.uri }}" width="50" height="50" />
{% endfor %}
</div>
{% endif %}
</div>
{% if prev_next %}
<div class="prev-next">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment