Demo-1-Simple view – 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-1-Simple view

    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-67.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-67.jpg
    If you are good at building bridges, you will never fall into the abyss!
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-66.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-66.jpg
    Bridges become frames for looking at the world around us.
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-65.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-65.jpg
    Men build too many walls and not enough bridges.
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-64.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-64.jpg
    The wisdom of bridges comes from the fact that they know the both sides, they know the both shores!
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-58.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-58.jpg
    Not happy with this side? Cross the other side! And here the bridges are the geniuses which can make this possible!
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-63.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-63.jpg
    See the bridges that connect you to success.
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-62.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-62.jpg
    Golden bridge or diamond bridge; it doesn’t matter! As long as the bridge takes you across the other side, it is a good bridge!
    https://img.youtube.com/vi/AV2aHLlYAOI/maxresdefault.jpg
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-61.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-61.jpg
    An action is the bridge between thought and reality.
    https://i.vimeocdn.com/video/542479644_640.jpg
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-59.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-59.jpg
    Trust is the bridge from yesterday to tomorrow, built them with the help of thanks.
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-57.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-57.jpg
    If art is the bridge between what you see in your mind and what the world sees, then skill is how you build that bridge.
    https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-55.jpg https://demo.huge-it.com/wp-content/uploads/2017/10/Untitled-55.jpg
    Oh, how so beautiful an old bridge looks! You know why? Because it helped so many people to crossover under every condition!
    ').insertAfter('#slider1_container_'); var type = reslider1["params"]["sharing"]["type"]; shareButtons = ''; jQuery('.socialIcons1').append(shareButtons); } if (reslider1["params"]["sharing"]["show"]["facebook"] === 1) { jQuery('.share-buttons1').append('
  • '); setTimeout(function(){ jQuery('#share-facebook').attr('href', 'https://www.facebook.com/sharer/sharer.php?u=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider1["params"]["sharing"]["show"]["twitter"] === 1) { jQuery('.share-buttons1').append('
  • '); setTimeout(function(){ jQuery('#share-twitter').attr('href', 'https://twitter.com/intent/tweet?text=&url=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider1["params"]["sharing"]["show"]["googleplus"] === 1) { jQuery('.share-buttons1').append('
  • '); setTimeout(function(){ jQuery('#share-googleplus').attr('href', 'https://plus.google.com/share?url=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider1["params"]["sharing"]["show"]["pinterest"] === 1) { jQuery('.share-buttons1').append('
  • '); setTimeout(function(){ jQuery('#share-pinterest').attr('href', 'http://www.pinterest.com/pin/create/button/?url=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider1["params"]["sharing"]["show"]["linkedin"] === 1) { jQuery('.share-buttons1').append('
  • '); setTimeout(function(){ jQuery('#share-linkedin').attr('href', 'http://www.linkedin.com/shareArticle?mini=true&url=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider1["params"]["sharing"]["show"]["tumblr"] === 1) { jQuery('.share-buttons1').append('
  • '); setTimeout(function(){ jQuery('#share-tumblr').attr('href', 'http://www.tumblr.com/share/link?url=' + (encodeURIComponent(window.location.href))); }, 200); } }); if(reslider1["params"]["rightclickprotection"]) { jQuery('#slider1_container').bind("contextmenu", function(e) { e.preventDefault(); }); jQuery(document).keydown(function(e){ if(e.which === 123){ return false; } }); } var $PlayCondition = 1; var c_slider1; init_c_slider1 = function (containerId) { switch(reslider1["params"]["effect"]["type"]) { case 0: var reslide_effect = {$Duration:reslider1["params"]["effect"]["duration"],$Opacity:2,$Brother:{$Duration:1000,$Opacity:2}}; break; case 1: reslide_effect = {$Duration:reslider1["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:reslider1["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:reslider1["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:reslider1["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:reslider1["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:reslider1["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:reslider1["params"]["effect"]["duration"],x:-1,$Easing:$JssorEasing$.$EaseInQuad}; break; case 8: reslide_effect ={$Duration:reslider1["params"]["effect"]["duration"],x:1,$Easing:$JssorEasing$.$EaseInQuad}; break; case 9: reslide_effect ={$Duration:reslider1["params"]["effect"]["duration"],y:-1,$Easing:$JssorEasing$.$EaseInQuad}; break; case 10: reslide_effect ={$Duration:reslider1["params"]["effect"]["duration"],y:1,$Easing:$JssorEasing$.$EaseInQuad}; break; case 11: reslide_effect ={$Duration:reslider1["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:reslider1["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:reslider1["params"]["effect"]["duration"],$Zoom:11,$Easing:{$Zoom:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseOutQuad},$Opacity:2}; break; case 14: reslide_effect ={$Duration:reslider1["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:reslider1["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:reslider1["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:reslider1["params"]["effect"]["duration"],x:-1,$Rows:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$ChessMode:{$Row:3}}; break; case 18: reslide_effect ={$Duration:reslider1["params"]["effect"]["duration"],y:-1,$Cols:12,$Formation:$JssorSlideshowFormations$.$FormationStraight,$ChessMode:{$Column:12}}; break; case 19: reslide_effect ={$Duration:reslider1["params"]["effect"]["duration"],$Delay:100,$Rows:7,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Opacity:2}; break; case 20: reslide_effect ={$Duration:reslider1["params"]["effect"]["duration"],$Delay:100,$Cols:10,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Opacity:2}; break; } var thumbnailsCount, rowsCount, spacingX, spacingY, _SlideshowTransitions = [ reslide_effect ]; switch(reslider1['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 = reslider1['params']['thumb_cols']; rowsCount = reslider1["params"]["thumb_rows"]; spacingX = reslider1["params"]["thumb_spacingx"]; spacingY = reslider1["params"]["thumb_spacingy"]; break; } var options = { $AutoPlay: (reslider1["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: reslider1["params"]["effect"]["interval"], $PauseOnHover: reslider1["params"]["pauseonhover"], $ArrowKeyNavigation: 1, $BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not $Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance $ChanceToShow: reslider1["params"]["bullets"]["show"], //[Required] 0 Never, 1 Mouse Over, 2 Always $AutoCenter: reslider1["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: reslider1["params"]["bullets"]["rows"], //[Optional] Specify lanes to arrange items, default value is 1 $SpacingX: reslider1["params"]["bullets"]["s_x"], //[Optional] Horizontal space between each item in pixel, default value is 0 $SpacingY: reslider1["params"]["bullets"]["s_y"], //[Optional] Vertical space between each item in pixel, default value is 0 $Orientation: reslider1["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: reslider1["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: reslider1["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_slider1 = new $JssorSlider$(containerId, options); }; jQuery(function($){ (function initReslideSlider() { /*** ####bullets#### ***/ var css_bullets_obj, css_bullets; switch(+reslider1["params"]["bullets"]["position"]) { case 0: reslider1["params"]["bullets"]["autocenter"] = 0; css_bullets_obj = {"left":reslider1["params"]["bullets"]["style"]["position"]["left"],"top":reslider1["params"]["bullets"]["style"]["position"]["top"]}; css_bullets= "left:"+reslider1["params"]["bullets"]["style"]["position"]["left"]+";top:"+reslider1["params"]["bullets"]["style"]["position"]["top"]; break; case 1: reslider1["params"]["bullets"]["autocenter"] = 1; css_bullets_obj = {"right":"","top":reslider1["params"]["bullets"]["style"]["position"]["top"],"left":"","bottom":""}; css_bullets = "top:"+reslider1["params"]["bullets"]["style"]["position"]["top"]; break; case 2: reslider1["params"]["bullets"]["autocenter"] = 0; css_bullets_obj = {"right":reslider1["params"]["bullets"]["style"]["position"]["right"],"top":reslider1["params"]["bullets"]["style"]["position"]["top"]}; css_bullets = "right:"+reslider1["params"]["bullets"]["style"]["position"]["right"]+";top:"+reslider1["params"]["bullets"]["style"]["position"]["top"]; break; case 3: reslider1["params"]["bullets"]["autocenter"] = 2; css_bullets_obj = {"right":"","top":"","left":reslider1["params"]["bullets"]["style"]["position"]["left"],"bottom":""}; css_bullets = "left:"+reslider1["params"]["bullets"]["style"]["position"]["left"]; break; case 4: reslider1["params"]["bullets"]["autocenter"] = 3; css_bullets_obj = {"right":"","top":"","left":"","bottom":""}; css_bullets = ""; break; case 5: reslider1["params"]["bullets"]["autocenter"] = 2; css_bullets_obj = {"right":reslider1["params"]["bullets"]["style"]["position"]["right"],"top":"","left":"","bottom":""}; css_bullets = "right:"+reslider1["params"]["bullets"]["style"]["position"]["right"]; break; case 6: reslider1["params"]["bullets"]["autocenter"] = 0; css_bullets_obj = {"left":reslider1["params"]["bullets"]["style"]["position"]["left"],"bottom":reslider1["params"]["bullets"]["style"]["position"]["bottom"]}; css_bullets = "left:"+reslider1["params"]["bullets"]["style"]["position"]["left"]+";bottom:"+reslider1["params"]["bullets"]["style"]["position"]["bottom"]; break; case 7: reslider1["params"]["bullets"]["autocenter"] = 1; css_bullets_obj = {"left":"","bottom":reslider1["params"]["bullets"]["style"]["position"]["bottom"],"right":""}; css_bullets = "bottom:"+reslider1["params"]["bullets"]["style"]["position"]["bottom"]; break; case 8: reslider1["params"]["bullets"]["autocenter"] = 0; css_bullets_obj = {"left":"","bottom":reslider1["params"]["bullets"]["style"]["position"]["bottom"],"right":reslider1["params"]["bullets"]["style"]["position"]["right"]}; css_bullets = "bottom:"+reslider1["params"]["bullets"]["style"]["position"]["bottom"]+";right:"+reslider1["params"]["bullets"]["style"]["position"]["right"]; break; } _reslide.find('#slider1_container','.reslide_navigator')[0].addStyle(css_bullets); if(reslider1.count) { var thubmnailCWidth = jQuery('.reslide-thumbnail1').width(); var thumbWidth = thubmnailCWidth/reslider1.count; if(reslider1['params']['thumbnails']['positioning']) jQuery('.reslide-thumbnail1 .c,.reslide-thumbnail1 .p,.reslide-thumbnail1 .w').width(thumbWidth-4); else { jQuery('.reslide-thumbnail1 .c,.reslide-thumbnail1 .p,.reslide-thumbnail1 .w').width(58); jQuery('.reslide-thumbnail1 .w').width(56); jQuery('.reslide-thumbnail1 > div').css('max-width',(jQuery('.reslide-thumbnail1').width()-20)+'px');//width(58); var walk = jQuery('.reslide-thumbnail1').width()-20; var walkcount = Math.floor(walk/61)-1; walk = walkcount* 61-3; jQuery('.reslide-thumbnail1 > div').css('max-width',walk+'px'); } } jQuery('#slider1_container .reslide_slides img').css('display','block'); // init_c_slider//("slider//_container"); })(); function ScaleSlider() { var parentWidth = $('#slider1_container').parent().width(); jQuery('#slider1_container').css('display','block'); if (parentWidth) { if(parentWidth div').css('overflow','hidden'); } else { c_slider1.$ScaleWidth(+reslider1['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(+reslider1['params']['behavior'] === 2){ jQuery('#slider1_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