/**
* copyright Copyright (C) 2015 Cedric KEIFLIN alias ced1870
* http://www.joomlack.fr
* http://www.template-creator.com
* license GNU/GPL
* Image Effect CK
* @version 1.1.1
**/
(function($) {
var ImageEffectck = function() {
// var image.wrap;
$("img[class^='effectck'], img.fadeck, img.edafck, img.puffck").each(function(i, image) {
// do only if the image is not yet wrapped
if (! $(image).parent().is('figure')) {
var w = $(image).attr('width');
var fl = $(image).css('float');
$(image).wrap('<figure class="imageeffectck ' + $(image).attr('class') + '"><div class="imageeffectck_img"></div></div>');
image.wrap = $(image).parent().parent();
image.wrapinner = $(image).parent();
var props = Array('border-top-left-radius'
, 'border-top-right-radius'
, 'border-bottom-left-radius'
, 'border-bottom-right-radius'
, 'float'
);
for (i=0;i<props.length;i++) {
catchCssProperty(image, props[i]);
}
// fix for Chrome
if (parseInt(w) > 0) {
image.wrap.width(w).css('max-width', '100%');
} else if ($(image).attr('class').match(/circle/)) {
image.wrap.width(500);
console.log('Image Effect CK message : default width set, missing on image : ');
console.log(image);
}
// if (fl) image.wrap.css('float', fl);
// get the the text from the image title
var imgtitle, txt_title, txt_desc;
if (imgtitle = $(image).attr('title')) {
imgtitle = imgtitle.split('::');
if (imgtitle.length >= 1) {
txt_title = imgtitle[0];
}
if (imgtitle.length >= 2) {
txt_desc = imgtitle[1];
}
}
// remove the attribute on the image to avoid conflicts
$(image).attr('class', '')
.attr('width', '')
.attr('height', '')
.attr('title', '')
.css('float', '');
// create the final code
image.wrapinner.append('<figcaption>'
+'<div>'
+ ( txt_title ? '<div class="imageeffectck_title">' + txt_title + '</div>' : '' )
+ ( txt_desc ? '<div class="imageeffectck_desc">' + txt_desc + '</div>' : '' )
// + ( $(image).attr('href', '') ? '<a href="' + $(image).attr('href') + '"></a>' : '' ) // il faut d�tecter parent ancre >> pas besoin l'ancre s'applique sur figure
+'</div>'
+'</figcaption>')
}
// for mobile only, allow the 1st tap to show the effect, 2nd tap to open the link
// check if there is a link on the figure
if (image.wrap.parents('a').length) {
image.wrap.parents('a')[0].addEventListener("touchstart", touchStart, false);
// initialize the data if we click outside
image.wrap.parent('a').on('mouseleave', (function(e) {
$(this).data('touch', '0');
}));
}
});
/**
* Catch the tap event on touch device
*
* @param {type} event
* @returns void
*/
function touchStart(event) {
if (! $(this).attr('rel')) {
if ($(this).data('touch') !== '1') {
$(this).data('href', $(this).attr('href'));
$(this).removeAttr('href');
$(this).data('touch', '1');
} else {
$(this).attr('href', $(this).data('href'));
$(this).data('touch', '0');
}
}
}
/**
* Catch the css of the image and apply it to the figure
*
* @param {type} image
* @param {type} prop
* @returns {undefined}
*/
function catchCssProperty(image, prop) {
var v = $(image).css(prop);
if (parseInt(v)) {
$(image).css(prop, '');
$(image.wrap).css(prop, v);
}
}
}
window.ImageEffectck = ImageEffectck;
})(jQuery);
// autoloader
jQuery(document).ready(function(){
new ImageEffectck();
});