Demo 3- No Controls – Huge-IT Demo
  • Home
  • Products
  • Services
  • Blog
  • Forum
  • Contact Us
  • Responsive Slider

    Create responsive WordPress slider in minutes. Bring awesome image slider, showcase post sliders for your WordPress website, display images and photos in beautiful sliders. Responsive Slider is the best solution you may come across with.

    plugin_icon
    home path_icon WordPress Plugins path_icon Responsive Slider path_icon

    Demo 3- No Controls

    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-92.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-92.jpg
    I am in love with something beautiful. Many would call it "Aviation".
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-83.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-83.jpg
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-91.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-91.jpg
    Aviation is proof that given, the will, we have the capacity to achieve the impossible.
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-90.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-90.jpg
    There's only one job in this world that gives you an office in the sky; and that is pilot.
    https://img.youtube.com/vi/MvGBS8XPNwc/maxresdefault.jpg
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-89.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-89.jpg
    To most people sky is the limit. To those who love aviation, the sky is a point of view.
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-88.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-88.jpg
    I am in love with something beautiful. Many would call it "Aviation".
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-86.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-86.jpg
    A mile of highway will take you just one mile... but a mile of runway will take you anywhere
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-85.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-85.jpg
    Most people only dream of what pilots have seen.
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-84.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-84.jpg
    Climb high; climb far. Your goal is the sky; your aim is the star.
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-83.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-83.jpg
    Your wings already exist. All you have to do is FLY.
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-82.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-82.jpg
    People say time flies, so become a pilot!
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-81.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-81.jpg
    I am in love with something beautiful. Many would call it "Aviation".
    ').insertAfter('#slider3_container_'); var type = reslider3["params"]["sharing"]["type"]; shareButtons = ''; jQuery('.socialIcons3').append(shareButtons); } if (reslider3["params"]["sharing"]["show"]["facebook"] === 1) { jQuery('.share-buttons3').append('
  • '); setTimeout(function(){ jQuery('#share-facebook').attr('href', 'https://www.facebook.com/sharer/sharer.php?u=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider3["params"]["sharing"]["show"]["twitter"] === 1) { jQuery('.share-buttons3').append('
  • '); setTimeout(function(){ jQuery('#share-twitter').attr('href', 'https://twitter.com/intent/tweet?text=&url=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider3["params"]["sharing"]["show"]["googleplus"] === 1) { jQuery('.share-buttons3').append('
  • '); setTimeout(function(){ jQuery('#share-googleplus').attr('href', 'https://plus.google.com/share?url=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider3["params"]["sharing"]["show"]["pinterest"] === 1) { jQuery('.share-buttons3').append('
  • '); setTimeout(function(){ jQuery('#share-pinterest').attr('href', 'http://www.pinterest.com/pin/create/button/?url=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider3["params"]["sharing"]["show"]["linkedin"] === 1) { jQuery('.share-buttons3').append('
  • '); setTimeout(function(){ jQuery('#share-linkedin').attr('href', 'http://www.linkedin.com/shareArticle?mini=true&url=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider3["params"]["sharing"]["show"]["tumblr"] === 1) { jQuery('.share-buttons3').append('
  • '); setTimeout(function(){ jQuery('#share-tumblr').attr('href', 'http://www.tumblr.com/share/link?url=' + (encodeURIComponent(window.location.href))); }, 200); } }); if(reslider3["params"]["rightclickprotection"]) { jQuery('#slider3_container').bind("contextmenu", function(e) { e.preventDefault(); }); jQuery(document).keydown(function(e){ if(e.which === 123){ return false; } }); } var $PlayCondition = 1; var c_slider3; init_c_slider3 = function (containerId) { switch(reslider3["params"]["effect"]["type"]) { case 0: var reslide_effect = {$Duration:reslider3["params"]["effect"]["duration"],$Opacity:2,$Brother:{$Duration:1000,$Opacity:2}}; break; case 1: reslide_effect = {$Duration:reslider3["params"]["effect"]["duration"],x:-0.3,y:0.5,$Zoom:1,$Rotate:0.1,$During:{$Left:[0.6,0.4],$Top:[0.6,0.4],$Rotate:[0.6,0.4],$Zoom:[0.6,0.4]},$Easing:{$Left:$JssorEasing$.$EaseInQuad,$Top:$JssorEasing$.$EaseInQuad,$Opacity:$JssorEasing$.$EaseLinear,$Rotate:$JssorEasing$.$EaseInQuad},$Opacity:2,$Brother:{$Duration:1000,$Zoom:11,$Rotate:-0.5,$Easing:{$Opacity:$JssorEasing$.$EaseLinear,$Rotate:$JssorEasing$.$EaseInQuad},$Opacity:2,$Shift:200}}; break; case 2: reslide_effect = {$Duration:reslider3["params"]["effect"]["duration"],x:0.25,$Zoom:1.5,$Easing:{$Left:$JssorEasing$.$EaseInWave,$Zoom:$JssorEasing$.$EaseInSine},$Opacity:2,$ZIndex:-10,$Brother:{$Duration:1400,x:-0.25,$Zoom:1.5,$Easing:{$Left:$JssorEasing$.$EaseInWave,$Zoom:$JssorEasing$.$EaseInSine},$Opacity:2,$ZIndex:-10}} break; case 3: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],x:0.5,$Cols:2,$ChessMode:{$Column:3},$Easing:{$Left:$JssorEasing$.$EaseInOutCubic},$Opacity:2,$Brother:{$Duration:1500,$Opacity:2}} break; case 4: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],x:-0.1,y:-0.7,$Rotate:0.1,$During:{$Left:[0.6,0.4],$Top:[0.6,0.4],$Rotate:[0.6,0.4]},$Easing:{$Left:$JssorEasing$.$EaseInQuad,$Top:$JssorEasing$.$EaseInQuad,$Opacity:$JssorEasing$.$EaseLinear,$Rotate:$JssorEasing$.$EaseInQuad},$Opacity:2,$Brother:{$Duration:1000,x:0.2,y:0.5,$Rotate:-0.1,$Easing:{$Left:$JssorEasing$.$EaseInQuad,$Top:$JssorEasing$.$EaseInQuad,$Opacity:$JssorEasing$.$EaseLinear,$Rotate:$JssorEasing$.$EaseInQuad},$Opacity:2}} break; case 5: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],x:-1,y:-0.5,$Delay:50,$Cols:8,$Rows:4,$Formation:$JssorSlideshowFormations$.$FormationSquare,$Easing:{$Left:$JssorEasing$.$EaseSwing,$Top:$JssorEasing$.$EaseInJump},$Assembly:260,$Round:{$Top:1.5}} break; case 6: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],$Delay:30,$Cols:8,$Rows:4,$Clip:15,$SlideOut:true,$Formation:$JssorSlideshowFormations$.$FormationStraightStairs,$Easing:$JssorEasing$.$EaseOutQuad,$Assembly:2049} break; case 7: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],x:-1,$Easing:$JssorEasing$.$EaseInQuad}; break; case 8: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],x:1,$Easing:$JssorEasing$.$EaseInQuad}; break; case 9: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],y:-1,$Easing:$JssorEasing$.$EaseInQuad}; break; case 10: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],y:1,$Easing:$JssorEasing$.$EaseInQuad}; break; case 11: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],x:-1,y:2,$Rows:2,$Zoom:11,$Rotate:1,$ChessMode:{$Row:15},$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Top:$JssorEasing$.$EaseInCubic,$Zoom:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseOutQuad,$Rotate:$JssorEasing$.$EaseInCubic},$Assembly:2049,$Opacity:2,$Round:{$Rotate:0.8}}; break; case 12: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],x:2,y:1,$Cols:2,$Zoom:11,$Rotate:1,$ChessMode:{$Column:15},$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Top:$JssorEasing$.$EaseInCubic,$Zoom:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseOutQuad,$Rotate:$JssorEasing$.$EaseInCubic},$Assembly:2049,$Opacity:2,$Round:{$Rotate:0.7}}; break; case 13: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],$Zoom:11,$Easing:{$Zoom:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseOutQuad},$Opacity:2}; break; case 14: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],x:0.3,y:0.3,$Cols:2,$Rows:2,$During:{$Left:[0.3,0.7],$Top:[0.3,0.7]},$ChessMode:{$Column:3,$Row:12},$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Top:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseLinear},$Opacity:2}; break; case 15: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],$Delay:20,$Clip:3,$SlideOut:true,$Easing:{$Clip:$JssorEasing$.$EaseOutCubic,$Opacity:$JssorEasing$.$EaseLinear},$Assembly:260,$Opacity:2}; break; case 16: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],$Delay:20,$Clip:12,$SlideOut:true,$Easing:{$Clip:$JssorEasing$.$EaseOutCubic,$Opacity:$JssorEasing$.$EaseLinear},$Assembly:260,$Opacity:2}; break; case 17: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],x:-1,$Rows:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$ChessMode:{$Row:3}}; break; case 18: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],y:-1,$Cols:12,$Formation:$JssorSlideshowFormations$.$FormationStraight,$ChessMode:{$Column:12}}; break; case 19: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],$Delay:100,$Rows:7,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Opacity:2}; break; case 20: reslide_effect ={$Duration:reslider3["params"]["effect"]["duration"],$Delay:100,$Cols:10,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Opacity:2}; break; } var thumbnailsCount, rowsCount, spacingX, spacingY, _SlideshowTransitions = [ reslide_effect ]; switch(reslider3['params']['thumbnails']['positioning']){ case 0: thumbnailsCount = 5; rowsCount = 1; spacingX = 10; spacingY = 3; break; case 1: thumbnailsCount = 10; rowsCount = 1; spacingX = 3; spacingY = 3; break; case 2: thumbnailsCount = reslider3['params']['thumb_cols']; rowsCount = reslider3["params"]["thumb_rows"]; spacingX = reslider3["params"]["thumb_spacingx"]; spacingY = reslider3["params"]["thumb_spacingy"]; break; } var options = { $AutoPlay: (reslider3["params"]["autoplay"]==1)?true:false, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false $SlideDuration: 500, $AutoPlayInterval: reslider3["params"]["effect"]["interval"], $PauseOnHover: reslider3["params"]["pauseonhover"], $ArrowKeyNavigation: 1, $BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not $Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance $ChanceToShow: reslider3["params"]["bullets"]["show"], //[Required] 0 Never, 1 Mouse Over, 2 Always $AutoCenter: reslider3["params"]["bullets"]["autocenter"], //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 $Steps: 1, //[Optional] Steps to go for each navigation request, default value is 1 $Rows: reslider3["params"]["bullets"]["rows"], //[Optional] Specify lanes to arrange items, default value is 1 $SpacingX: reslider3["params"]["bullets"]["s_x"], //[Optional] Horizontal space between each item in pixel, default value is 0 $SpacingY: reslider3["params"]["bullets"]["s_y"], //[Optional] Vertical space between each item in pixel, default value is 0 $Orientation: reslider3["params"]["bullets"]["orientation"] //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1 }, $ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance $ChanceToShow: reslider3["params"]["arrows"]["show"], //[Required] 0 Never, 1 Mouse Over, 2 Always $AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0 $Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1 }, $SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not $Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow $Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow $TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random $ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false } , $ThumbnailNavigatorOptions: { $Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance $ChanceToShow: reslider3["params"]["thumbnails"]["show"], //[Required] 0 Never, 1 Mouse Over, 2 Always $ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1 $AutoCenter: 0, //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3 $Rows: rowsCount, //[Optional] Specify lanes to arrange thumbnails, default value is 1 $SpacingX: spacingX, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0 $SpacingY: spacingY, //[Optional] Vertical space between each thumbnail in pixel, default value is 0 $Cols: thumbnailsCount, //[Optional] Number of pieces to display, default value is 1 $ParkingPosition: 0, //[Optional] The offset position to park thumbnail $Orientation: 1, //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1 $NoDrag: false //[Optional] Disable drag or not, default value is false } }; c_slider3 = new $JssorSlider$(containerId, options); }; jQuery(function($){ (function initReslideSlider() { /*** ####bullets#### ***/ var css_bullets_obj, css_bullets; switch(+reslider3["params"]["bullets"]["position"]) { case 0: reslider3["params"]["bullets"]["autocenter"] = 0; css_bullets_obj = {"left":reslider3["params"]["bullets"]["style"]["position"]["left"],"top":reslider3["params"]["bullets"]["style"]["position"]["top"]}; css_bullets= "left:"+reslider3["params"]["bullets"]["style"]["position"]["left"]+";top:"+reslider3["params"]["bullets"]["style"]["position"]["top"]; break; case 1: reslider3["params"]["bullets"]["autocenter"] = 1; css_bullets_obj = {"right":"","top":reslider3["params"]["bullets"]["style"]["position"]["top"],"left":"","bottom":""}; css_bullets = "top:"+reslider3["params"]["bullets"]["style"]["position"]["top"]; break; case 2: reslider3["params"]["bullets"]["autocenter"] = 0; css_bullets_obj = {"right":reslider3["params"]["bullets"]["style"]["position"]["right"],"top":reslider3["params"]["bullets"]["style"]["position"]["top"]}; css_bullets = "right:"+reslider3["params"]["bullets"]["style"]["position"]["right"]+";top:"+reslider3["params"]["bullets"]["style"]["position"]["top"]; break; case 3: reslider3["params"]["bullets"]["autocenter"] = 2; css_bullets_obj = {"right":"","top":"","left":reslider3["params"]["bullets"]["style"]["position"]["left"],"bottom":""}; css_bullets = "left:"+reslider3["params"]["bullets"]["style"]["position"]["left"]; break; case 4: reslider3["params"]["bullets"]["autocenter"] = 3; css_bullets_obj = {"right":"","top":"","left":"","bottom":""}; css_bullets = ""; break; case 5: reslider3["params"]["bullets"]["autocenter"] = 2; css_bullets_obj = {"right":reslider3["params"]["bullets"]["style"]["position"]["right"],"top":"","left":"","bottom":""}; css_bullets = "right:"+reslider3["params"]["bullets"]["style"]["position"]["right"]; break; case 6: reslider3["params"]["bullets"]["autocenter"] = 0; css_bullets_obj = {"left":reslider3["params"]["bullets"]["style"]["position"]["left"],"bottom":reslider3["params"]["bullets"]["style"]["position"]["bottom"]}; css_bullets = "left:"+reslider3["params"]["bullets"]["style"]["position"]["left"]+";bottom:"+reslider3["params"]["bullets"]["style"]["position"]["bottom"]; break; case 7: reslider3["params"]["bullets"]["autocenter"] = 1; css_bullets_obj = {"left":"","bottom":reslider3["params"]["bullets"]["style"]["position"]["bottom"],"right":""}; css_bullets = "bottom:"+reslider3["params"]["bullets"]["style"]["position"]["bottom"]; break; case 8: reslider3["params"]["bullets"]["autocenter"] = 0; css_bullets_obj = {"left":"","bottom":reslider3["params"]["bullets"]["style"]["position"]["bottom"],"right":reslider3["params"]["bullets"]["style"]["position"]["right"]}; css_bullets = "bottom:"+reslider3["params"]["bullets"]["style"]["position"]["bottom"]+";right:"+reslider3["params"]["bullets"]["style"]["position"]["right"]; break; } _reslide.find('#slider3_container','.reslide_navigator')[0].addStyle(css_bullets); if(reslider3.count) { var thubmnailCWidth = jQuery('.reslide-thumbnail3').width(); var thumbWidth = thubmnailCWidth/reslider3.count; if(reslider3['params']['thumbnails']['positioning']) jQuery('.reslide-thumbnail3 .c,.reslide-thumbnail3 .p,.reslide-thumbnail3 .w').width(thumbWidth-4); else { jQuery('.reslide-thumbnail3 .c,.reslide-thumbnail3 .p,.reslide-thumbnail3 .w').width(58); jQuery('.reslide-thumbnail3 .w').width(56); jQuery('.reslide-thumbnail3 > div').css('max-width',(jQuery('.reslide-thumbnail3').width()-20)+'px');//width(58); var walk = jQuery('.reslide-thumbnail3').width()-20; var walkcount = Math.floor(walk/61)-1; walk = walkcount* 61-3; jQuery('.reslide-thumbnail3 > div').css('max-width',walk+'px'); } } jQuery('#slider3_container .reslide_slides img').css('display','block'); // init_c_slider//("slider//_container"); })(); function ScaleSlider() { var parentWidth = $('#slider3_container').parent().width(); jQuery('#slider3_container').css('display','block'); if (parentWidth) { if(parentWidth div').css('overflow','hidden'); } else { c_slider3.$ScaleWidth(+reslider3['style']['width']); } } else window.setTimeout(ScaleSlider, 10); } $(window).bind("load", ScaleSlider); $(window).bind("resize", ScaleSlider); $(window).bind("orientationchange", ScaleSlider); }); var tag = document.createElement('script'); tag.src = "//www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var playerInfoList = [], YTplayer = {}, i; jQuery('.huge_it_youtube_iframe').each(function(){ var id = jQuery(this).attr('id'), $wmObject = jQuery(this).parent().find('img').attr('src'), index = $wmObject.indexOf('vi/') + 3, videoId = $wmObject.slice(index, index + 11), playButton = jQuery(this).parent().find('div[class*=youtube_play_icon]'), controls = jQuery(this).attr('data-controls'), showinfo = jQuery(this).attr('data-showinfo'), rel = jQuery(this).attr('data-rel'); YTplayer[i] = { id:id, videoId: videoId, playButton: playButton, controls: controls, showinfo: showinfo, rel: rel }; playerInfoList.push(YTplayer[i]); i++; }); function onYouTubeIframeAPIReady() { if(typeof playerInfoList === 'undefined') return; for(var i = 0; i defaultRatio){ jQuery(this).css({ width: '100%', top: '50%', transform: 'translateY(-50%)', position: 'absolute' }); jQuery(this).next().css({ width: '100%', top: '50%', transform: 'translateY(-50%)', position: 'absolute' }); } else { jQuery(this).css({ height: '100%', left: '50%', transform: 'translateX(-50%)', position: 'relative' }); } }); } else if(+reslider3['params']['behavior'] === 2){ jQuery('#slider3_container img[class*=image_]').each(function () { var naturalWidth = jQuery(this).prop('naturalWidth'), naturalHeight = jQuery(this).prop('naturalHeight'), contWidth = '1200', contHeight = '600', naturalRatio = naturalWidth / naturalHeight, defaultRatio = contWidth / contHeight; jQuery(this).css({ position: "absolute", maxWidth: "none" }); if (naturalRatio > 16) & 255; g = (bigint >> 8) & 255; b = bigint & 255; return "rgba(" + r + "," + g + "," + b + "," + opacity + ")"; }, done: function (imgURL) { this.src = imgURL; } }; WaterMark.prototype.init = function () { var $wmObject = this, defer, ele = $wmObject.element, $settings = $wmObject.settings, wmData = { imgurl: $settings.imgSrc }, imageData = { imgurl: ele.src }; defer = $.Deferred(); $.when(defer).done(function (imgObj) { imageData.wmObj = imgObj; $wmObject.urlData(imageData, function (dataURL) { $settings.done.call(ele, dataURL); }); }); ($settings.text !== '') && (wmData.imgurl = $wmObject.wmText()); $wmObject.urlData(wmData, function (imgObj) { defer.resolve(imgObj); }); }; WaterMark.prototype.wmText = function () { var $wmObject = this, $settings = $wmObject.settings, canvas = document.createElement('CANVAS'), context = canvas.getContext('2d'), w = $settings.containerWidth, h = $settings.textFontSize + 8; canvas.width = w; canvas.height = h; context.fillStyle = $settings.containerBackground(); context.fillRect(0, 0, w, h); context.fillStyle = $settings.textColor; context.textAlign = 'center'; context.font = '500 ' + $settings.textFontSize + 'px Sans-serif'; context.fillText($settings.text, (w / 2), ($settings.textFontSize + 2)); return canvas.toDataURL(); }; WaterMark.prototype.urlData = function (data, callback) { var $wmObject = this, $settings = $wmObject.settings; var img = new Image(); img.onload = function () { var canvas = document.createElement('CANVAS'); var context = canvas.getContext('2d'); var w = this.width, h = this.height, contextH; canvas.width = w; canvas.height = h; contextH = 0; context.drawImage(this, 0, contextH, w, h); if (data.wmObj) { var op = $settings.opacity; (op > 0 && op