itemshow-jquery-banner
jQuery Plugins Plugins 

TWUN ItemShow – Showcase jQuery Plugin

SONHLAB , , , ,

TWUN ItemShow jQuery plugin that is used to create showcases with highly customizing ability. You can use it as an independent Tab, Slider or combine all features with your custom design to make amazing things for your site. It has a lots of modern features, animation effects, interactive methods you need and supports well for responsive layout. Let check our demos for more details.

 

Buy Now

 

 

Demos:

 

ItemShow Features:

  • Unlimited Tabs. Tabs can be stacked.
  • Unlimited Slides for each Tab.
  • Slides can be moved infinitely.
  • AutoPlay with two ways (left and Right).
  • Integrated LightBox wuth a lots of animation effects.
  • Click, Left/Right Arrow keys, Swipe, Scroll to slide.
  • Support three popular types of sliders (bar, full width and full screen).
  • Design style can be customized easily by HTML and CSS.
  • Works on Almost Platforms (Desktops, Laptops, Tablets and Smartphones).

 

Change Logs:

Nov 2016: First Version.

 

Credits:

 

Table of Contents:

  1. Installing TWUN ItemShow.
  2. TWUN ItemShow HTML Structure.
  3. Call TWUN ItemShow.
  4. Parameters.

 

Section 1: Installing TWUN ItemShow Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html>.

Include the following code into HEAD section of the page.

Include CSS files:

<meta name="viewport" content="width=device-width, user-scalable=no" />

<!-- Base Style -->
<link rel="stylesheet" href="css/sonhlab-base.css" type="text/css" />

<!-- Animation Effects For Lightbox -->
<link rel="stylesheet" href="css/animation-effects.css" type="text/css" />

<!-- ItemShow CSS Pack -->
<link rel="stylesheet" href="css/itemshow.css" type="text/css" />

Include Javascript files:

<!-- Start jQuery Library -->
<!--[if !IE]> -->
<script type="text/javascript" src="js/jquery/jquery.min.2.2.4.js"></script>
<!-- <![endif]-->
<!--[if gte IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.2.2.4.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.1.12.4.js"></script>
<![endif]-->
<!-- End jQuery Library -->

<!-- jQuery Mobile For Swipe -->
<script type="text/javascript" src="js/jquery/jquery.mobile.custom.min.js"></script>

<!-- TWUN ItemShow Plugin -->
<script type="text/javascript" src="js/itemshow.dev.js"></script>

 

Done. Now ItemShow jQuery plugin is ready to use.

 

Section 2: ItemShow HTML Structure.

This section should be read along with the example files also contained in the download package.

A simple ItemShow will have a HTML structure like below:

<!-- Start ItemShow -->
<div class="itemshow">

  <!-- Start Tab Controller -->
  <div class="isc-tabs">

    <!-- Start Tab Button Holder -->
    <div class="isc-tabbtholder">
      
      <!-- Start a Tab Button -->
      <div class="isc-tabbt" data-tabid="viewid">Tab Title</div>
      <!-- End a Tab Button -->
    </div>
    <!-- End Tab Button Holder -->

  </div>
  <!-- End Tab Controller -->


  <!-- Start ItemViews -->
  <div class="isc-views">

    <!-- Start ItemView Holder -->
    <div class="isc-viewholder">

      <!-- Start an ItemView -->
      <div class="isc-view" data-viewid="viewid">
        Add-custom-slide-content
        <span class="isc-openbt" data-contentid="lightboxid">Lightbox button</span>
      </div>
      <!-- End an ItemView -->

    </div>
    <!-- End ItemView Holder -->
  </div>
  <!-- End ItemViews -->


  <!-- Start Item Content Holder -->
  <div class="isc-contentholder">

    <!-- Start a Content Pack -->
    <div class="isc-contentpack" data-contentid="lightboxid">
      Add-lightbox-content-here
    </div>
    <!-- End a Content Pack -->

  </div>
  <!-- End Item Content Holder -->

</div>
<!-- End ItemShow -->

The plugin works very simple. When a tab button is clicked, the plugin will show an ItemView that has “data-viewid” value be the same as “data-tabid” value of the tab button. At default, the first tab button is activated. When the Tab Controller section is removed, the plugin will show the first ItemView at default.

In every item in an ItemView, you can add how many lightbox buttons as you want by using “isc-openbt” class. When a lightbox button is clicked, the plugin will show a Content Pack that has “data-contentid” value be the same as “data-contentid” of the lightbox button.

In real use, you can remove Tab Controller and Item Content Holder sections if you don’t want to show Tab buttons and lightbox content.

 

Section 3: Call ItemShow Plugin.

To call the plugin you can add below script into HEAD section:

<script type="text/javascript">
$(window).on('load', function() {
	$('.itemshow').itemshow();
})
</script>

 

Section 4: HTML Parameters and Special Classes.

I. HTML Parameters:

Parameters Positions Description
data-delay itemshow This param is used to set delay time (miliseconds).
When this param is set the AutoPlay feature will be enabled.
data-speed itemshow This param is used to set speed to slide (miliseconds).
data-move itemshow This param is used to set direction when AutoPlay run.
Value: next, prev.
data-navscroll itemshow This param is used to enable scrolling to slide.
Value:  off (default), on.
data-navkey itemshow This param is used to enable left/right arrow key to slide.
Value: off (default), on.
data-navswipe itemshow This param is used to enable swipe left/right to slide (mobile devices only).
Value: off (default), on.
data-style itemshow This param is used to set itemshow style.
Value: standard (default), fullwidth, fullscreen.
data-tabid isc-tabbt This param is used to set tab id.
data-viewid isc-view This param is used to set view id.
data-contentid isc-openbt
isc-contentpack		 This param is used to set content id for lightboxes.
data-animin isc-contentpack This param is used to set animation effect to show lightboxes.
Value: See the animation effect list below.
data-animout isc-contentpack This param is used to set animation effect to hide lightboxes.
Value: see the animation effect list below.
data-bg isc-contentpack This param is used to set background for lightboxes.
Value: accept CSS classes.

 

II. Special Classes:

Showing Animation Effects:

flipInX | flipInY | fadeIn | fadeInUp | fadeInDown | fadeInLeft | fadeInRight | fadeInUpBig | fadeInDownBig | fadeInLeftBig | fadeInRightBig | bounceIn | | bounceInDown | bounceInUp | bounceInLeft | bounceInRight | rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft | rotateInUpRight | lightSpeedIn | twisterInDown | twisterInUp | swap | puffIn | vanishIn | swashIn | foolishIn | tinRightIn | tinLeftIn | tinUpIn | tinDownIn.

 

Hiding Animation Effects:

flipOutX | flipOutY | fadeOut | fadeOutUp | fadeOutDown | fadeOutLeft | fadeOutRight | fadeOutUpBig | fadeOutDownBig | fadeOutLeftBig | fadeOutRightBig | bounceOut | bounceOutDown | bounceOutUp | bounceOutLeft | bounceOutRight | rotateOut | rotateOutDownLeft | rotateOutDownRight | rotateOutUpLeft | rotateOutUpRight | lightSpeedOut | magic | puffOut | vanishOut | swashOut | foolishOut | holeOut | tinRightOut | tinLeftOut | tinUpOut | tinDownOut | bombRightOut | bombLeftOut.

 

Preventing Classes:

isc-stopnavscroll : Used to prevent navscroll function.

If you want to prevent navscroll funciton that you enabled by data-navscroll param in a section, you just add “isc-stopnavscroll” into the section that you want to stop the function when moving mouse point into it.

 

[endedwords product=”TWUN ItemShow”]http://talk.sonhlab.com/room/itemshow-jquery-plugin[/endedwords]