Demo 2- Thumbnails – 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 2- Thumbnails

    I belong in the air I belong in the air
    I belong in the air
    Do not listen to what they say. Go and see it.
    Sometimes, the world from above seems too beautiful, too wonderful, too distant for human eyes to see
    Get as high as you can Get as high as you can
    Get as high as you can
    There is no sport equal to that which aviators enjoy while being carried through the air on great white wings.
    I belong in the air I belong in the air
    I belong in the air
    Do not listen to what they say. Go and see it.
    Get as high as you can Get as high as you can
    Get as high as you can
    For once you have tasted flight you will walk the earth with your eyes turned skyward.
    I belong in the air I belong in the air
    I belong in the air
    The engine is the heart of an aeroplane, but the pilot is its soul.
    I belong in the air I belong in the air
    I belong in the air
    You wanna fly, you got to give up everything that weighs you down.
    Get as high as you can Get as high as you can
    Get as high as you can
    Do not listen to what they say. Go and see it.
    You haven’t seen a tree until you’ve seen its shadow from the sky.
    ').insertAfter('#slider2_container_'); var type = reslider2["params"]["sharing"]["type"]; shareButtons = ''; jQuery('.socialIcons2').append(shareButtons); } if (reslider2["params"]["sharing"]["show"]["facebook"] === 1) { jQuery('.share-buttons2').append('
  • '); setTimeout(function(){ jQuery('#share-facebook').attr('href', 'https://www.facebook.com/sharer/sharer.php?u=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider2["params"]["sharing"]["show"]["twitter"] === 1) { jQuery('.share-buttons2').append('
  • '); setTimeout(function(){ jQuery('#share-twitter').attr('href', 'https://twitter.com/intent/tweet?text=&url=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider2["params"]["sharing"]["show"]["googleplus"] === 1) { jQuery('.share-buttons2').append('
  • '); setTimeout(function(){ jQuery('#share-googleplus').attr('href', 'https://plus.google.com/share?url=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider2["params"]["sharing"]["show"]["pinterest"] === 1) { jQuery('.share-buttons2').append('
  • '); setTimeout(function(){ jQuery('#share-pinterest').attr('href', 'http://www.pinterest.com/pin/create/button/?url=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider2["params"]["sharing"]["show"]["linkedin"] === 1) { jQuery('.share-buttons2').append('
  • '); setTimeout(function(){ jQuery('#share-linkedin').attr('href', 'http://www.linkedin.com/shareArticle?mini=true&url=' + (encodeURIComponent(window.location.href))); }, 200); } if (reslider2["params"]["sharing"]["show"]["tumblr"] === 1) { jQuery('.share-buttons2').append('
  • '); setTimeout(function(){ jQuery('#share-tumblr').attr('href', 'http://www.tumblr.com/share/link?url=' + (encodeURIComponent(window.location.href))); }, 200); } }); if(reslider2["params"]["rightclickprotection"]) { jQuery('#slider2_container').bind("contextmenu", function(e) { e.preventDefault(); }); jQuery(document).keydown(function(e){ if(e.which === 123){ return false; } }); } var $PlayCondition = 1; var c_slider2; init_c_slider2 = function (containerId) { switch(reslider2["params"]["effect"]["type"]) { case 0: var reslide_effect = {$Duration:reslider2["params"]["effect"]["duration"],$Opacity:2,$Brother:{$Duration:1000,$Opacity:2}}; break; case 1: reslide_effect = {$Duration:reslider2["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:reslider2["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:reslider2["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:reslider2["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:reslider2["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:reslider2["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:reslider2["params"]["effect"]["duration"],x:-1,$Easing:$JssorEasing$.$EaseInQuad}; break; case 8: reslide_effect ={$Duration:reslider2["params"]["effect"]["duration"],x:1,$Easing:$JssorEasing$.$EaseInQuad}; break; case 9: reslide_effect ={$Duration:reslider2["params"]["effect"]["duration"],y:-1,$Easing:$JssorEasing$.$EaseInQuad}; break; case 10: reslide_effect ={$Duration:reslider2["params"]["effect"]["duration"],y:1,$Easing:$JssorEasing$.$EaseInQuad}; break; case 11: reslide_effect ={$Duration:reslider2["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:reslider2["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:reslider2["params"]["effect"]["duration"],$Zoom:11,$Easing:{$Zoom:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseOutQuad},$Opacity:2}; break; case 14: reslide_effect ={$Duration:reslider2["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:reslider2["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:reslider2["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:reslider2["params"]["effect"]["duration"],x:-1,$Rows:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$ChessMode:{$Row:3}}; break; case 18: reslide_effect ={$Duration:reslider2["params"]["effect"]["duration"],y:-1,$Cols:12,$Formation:$JssorSlideshowFormations$.$FormationStraight,$ChessMode:{$Column:12}}; break; case 19: reslide_effect ={$Duration:reslider2["params"]["effect"]["duration"],$Delay:100,$Rows:7,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Opacity:2}; break; case 20: reslide_effect ={$Duration:reslider2["params"]["effect"]["duration"],$Delay:100,$Cols:10,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Opacity:2}; break; } var thumbnailsCount, rowsCount, spacingX, spacingY, _SlideshowTransitions = [ reslide_effect ]; switch(reslider2['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 = reslider2['params']['thumb_cols']; rowsCount = reslider2["params"]["thumb_rows"]; spacingX = reslider2["params"]["thumb_spacingx"]; spacingY = reslider2["params"]["thumb_spacingy"]; break; } var options = { $AutoPlay: (reslider2["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: reslider2["params"]["effect"]["interval"], $PauseOnHover: reslider2["params"]["pauseonhover"], $ArrowKeyNavigation: 0, $BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not $Class: $JssorBulletNavigator$, //[Required] Class to create navigator instance $ChanceToShow: reslider2["params"]["bullets"]["show"], //[Required] 0 Never, 1 Mouse Over, 2 Always $AutoCenter: reslider2["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: reslider2["params"]["bullets"]["rows"], //[Optional] Specify lanes to arrange items, default value is 1 $SpacingX: reslider2["params"]["bullets"]["s_x"], //[Optional] Horizontal space between each item in pixel, default value is 0 $SpacingY: reslider2["params"]["bullets"]["s_y"], //[Optional] Vertical space between each item in pixel, default value is 0 $Orientation: reslider2["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: reslider2["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: reslider2["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_slider2 = new $JssorSlider$(containerId, options); }; jQuery(function($){ (function initReslideSlider() { /*** ####bullets#### ***/ var css_bullets_obj, css_bullets; switch(+reslider2["params"]["bullets"]["position"]) { case 0: reslider2["params"]["bullets"]["autocenter"] = 0; css_bullets_obj = {"left":reslider2["params"]["bullets"]["style"]["position"]["left"],"top":reslider2["params"]["bullets"]["style"]["position"]["top"]}; css_bullets= "left:"+reslider2["params"]["bullets"]["style"]["position"]["left"]+";top:"+reslider2["params"]["bullets"]["style"]["position"]["top"]; break; case 1: reslider2["params"]["bullets"]["autocenter"] = 1; css_bullets_obj = {"right":"","top":reslider2["params"]["bullets"]["style"]["position"]["top"],"left":"","bottom":""}; css_bullets = "top:"+reslider2["params"]["bullets"]["style"]["position"]["top"]; break; case 2: reslider2["params"]["bullets"]["autocenter"] = 0; css_bullets_obj = {"right":reslider2["params"]["bullets"]["style"]["position"]["right"],"top":reslider2["params"]["bullets"]["style"]["position"]["top"]}; css_bullets = "right:"+reslider2["params"]["bullets"]["style"]["position"]["right"]+";top:"+reslider2["params"]["bullets"]["style"]["position"]["top"]; break; case 3: reslider2["params"]["bullets"]["autocenter"] = 2; css_bullets_obj = {"right":"","top":"","left":reslider2["params"]["bullets"]["style"]["position"]["left"],"bottom":""}; css_bullets = "left:"+reslider2["params"]["bullets"]["style"]["position"]["left"]; break; case 4: reslider2["params"]["bullets"]["autocenter"] = 3; css_bullets_obj = {"right":"","top":"","left":"","bottom":""}; css_bullets = ""; break; case 5: reslider2["params"]["bullets"]["autocenter"] = 2; css_bullets_obj = {"right":reslider2["params"]["bullets"]["style"]["position"]["right"],"top":"","left":"","bottom":""}; css_bullets = "right:"+reslider2["params"]["bullets"]["style"]["position"]["right"]; break; case 6: reslider2["params"]["bullets"]["autocenter"] = 0; css_bullets_obj = {"left":reslider2["params"]["bullets"]["style"]["position"]["left"],"bottom":reslider2["params"]["bullets"]["style"]["position"]["bottom"]}; css_bullets = "left:"+reslider2["params"]["bullets"]["style"]["position"]["left"]+";bottom:"+reslider2["params"]["bullets"]["style"]["position"]["bottom"]; break; case 7: reslider2["params"]["bullets"]["autocenter"] = 1; css_bullets_obj = {"left":"","bottom":reslider2["params"]["bullets"]["style"]["position"]["bottom"],"right":""}; css_bullets = "bottom:"+reslider2["params"]["bullets"]["style"]["position"]["bottom"]; break; case 8: reslider2["params"]["bullets"]["autocenter"] = 0; css_bullets_obj = {"left":"","bottom":reslider2["params"]["bullets"]["style"]["position"]["bottom"],"right":reslider2["params"]["bullets"]["style"]["position"]["right"]}; css_bullets = "bottom:"+reslider2["params"]["bullets"]["style"]["position"]["bottom"]+";right:"+reslider2["params"]["bullets"]["style"]["position"]["right"]; break; } _reslide.find('#slider2_container','.reslide_navigator')[0].addStyle(css_bullets); if(reslider2.count) { var thubmnailCWidth = jQuery('.reslide-thumbnail2').width(); var thumbWidth = thubmnailCWidth/reslider2.count; if(reslider2['params']['thumbnails']['positioning']) jQuery('.reslide-thumbnail2 .c,.reslide-thumbnail2 .p,.reslide-thumbnail2 .w').width(thumbWidth-4); else { jQuery('.reslide-thumbnail2 .c,.reslide-thumbnail2 .p,.reslide-thumbnail2 .w').width(58); jQuery('.reslide-thumbnail2 .w').width(56); jQuery('.reslide-thumbnail2 > div').css('max-width',(jQuery('.reslide-thumbnail2').width()-20)+'px');//width(58); var walk = jQuery('.reslide-thumbnail2').width()-20; var walkcount = Math.floor(walk/61)-1; walk = walkcount* 61-3; jQuery('.reslide-thumbnail2 > div').css('max-width',walk+'px'); } } jQuery('#slider2_container .reslide_slides img').css('display','block'); // init_c_slider//("slider//_container"); })(); function ScaleSlider() { var parentWidth = $('#slider2_container').parent().width(); jQuery('#slider2_container').css('display','block'); if (parentWidth) { if(parentWidth div').css('overflow','hidden'); } else { c_slider2.$ScaleWidth(+reslider2['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(+reslider2['params']['behavior'] === 2){ jQuery('#slider2_container img[class*=image_]').each(function () { var naturalWidth = jQuery(this).prop('naturalWidth'), naturalHeight = jQuery(this).prop('naturalHeight'), contWidth = '1100', 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