For support please checkout http://themepunch.ticksy.com !
This chapter will give you general instructions on how to install the Showbiz Pro Responsive Teaser JQuery Plugin and setup the options. Later chapters will be more detailed if needed.
Please upload the showbizpro folder to your server. In this folder you will find the following subfolders containing all of the items content:
You could use your own jQuery but we recommend loading it directly from the Google ressources (see later in this documentation).
You will find some example html files in your downloaded zip.
Add the following lines to your HTML Head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" />
<!-- THE SHOWBIZ STLYES --> <link rel="stylesheet" type="text/css" href="showbizpro/css/settings.css" media="screen" /> <!-- THE FANYCYBOX ASSETS --> <link rel="stylesheet" href="showbizpro/fancybox/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" /> <script type="text/javascript" src="showbizpro/fancybox/jquery.fancybox.pack.js?v=2.1.3"></script>
<!-- THE SHOWBIZ JS FILES --> <script type="text/javascript" src="showbizpro/js/jquery.themepunch.tools.min.js"></script> <script type="text/javascript" src="showbizpro/js/jquery.themepunch.showbizpro.js"></script>
<!-- DEMO I. --> <div id="example1" class="showbiz-container"> <!-- THE NAVIGATION --> <div class="showbiz-navigation center sb-nav-grey"> <div id="showbiz_left_1" class="sb-navigation-left"> <i class="icon-left-open"></i> </div> <div id="showbiz_right_1" class="sb-navigation-right"> <i class="icon-right-open"></i> </div> <div class="sbclear"></div> </div> <!-- END OF THE NAVIGATION --> <!-- THE PORTFOLIO ENTRIES --> <div class="showbiz" data-left="#showbiz_left_1" data-right="#showbiz_right_1"> <!-- THE OVERFLOW HOLDER CONTAINER, DONT REMOVE IT !! --> <div class="overflowholder"> <!-- LIST OF THE ENTRIES --> <ul> .... </ul> </div> <!-- END OF OVERFLOW HOLDER --> </div><!-- END OF SHOWBIZ INNER CONTAINER --> </div><!-- END OF SHOWBIZ CONTAINER-->
The Wrapping Container Names can be different. It is only important that the reference in the Plugin initialisation points to this div (in example named showbiz-container).
The Inner Container names must keep their class like overflowholder and showbiz
.showbiz-container { max-width:1210px; min-width:300px; overflow:hidden; padding:0px 20px;margin:0px auto 50px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
Simple Entries. ( Filters, Contents, Captions etc. are shown in later examples)
<!-- AN ENTRY HERE , WITH PREDEFINED GREY SKIN-->
<li class="sb-grey-skin">
<!-- THE MEDIAHOLDER CONTAINER -->
<div class="mediaholder">
<!-- THE INNER WRAP FOR MEDIA HOLDER -->
<div class="mediaholder_innerwrap">
<img alt="" src="images/entries/image.jpg">
<!-- THE HOVER CONTAINER AND THE HOVER ICONS -->
<div class="hovercover" >
<a href="#">
<div class="linkicon notalone"><i class="icon-link"></i></div>
</a>
<a class="fancybox" rel="group" href="images/entries/image.jpg">
<div class="lupeicon notalone"><i class="icon-search"></i></div>
</a>
</div><!-- END OF HOVER CONTIANER -->
</div><!-- END OF MEDIAHOLDER INNER WRAP-->
</div><!-- END OF MEDIAHOLDER CONTAINER -->
<!-- THE VISIBLE DETAILS -->
<div class="detailholder">
<div class="divide15"></div>
<h4 class="showbiz-title txt-center"><a href="#">Teaser Item One</a></h4>
<div class="divide5"></div>
<p class="txt-center">Lorem ipsum dolor sit amet, consetetur sadipscin</p>
</div><!-- END OF VISIBLE DETAILS -->
</li><!-- END OF ENTRY -->
li can have different Styles per one Teaser Rotator. We have predefined Styles, but unlimited own style can be created with simple css settings
Some Helper classes and container can be used like mediaholder, hovercover, detailholder, reveal_container etc. See Helper Classes and Container later in Documentation
Use Font Face Icons instead of PNG Files for Hover effets, It makes your item Retina Ready, and lightweight
Put it in end of your HTML Document in the <body> section. After the Script Loading Section.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#example1').showbizpro({
dragAndScroll:"off",
carousel:"off",
allEntryAtOnce:"off",
visibleElementsArray:[4,3,2,1],
mediaMaxHeight:[0,0,0,0],
entrySizeOffset:0
})
})
</script>
This Chapter is all about the Options. Via the Plugin Options you can change the navigation types,amount of visible items per screen size, max height of media elements, markup default, drag and scroll functions.
The Options are defined in the Plugin Activation section in the HTML Document. (the shown values are Default !)
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#example1').showbizpro({
entrySizeOffset:0,
containerOffsetRight:0,
heightOffsetBottom:0,
carousel:"off",
visibleElementsArray:[4,3,2,1],
mediaMaxHeight:[0,0,0,0],
ytMarkup:"<iframe src='http://www.youtube.com/embed/%%videoid%%?hd=1&wmode=opaque&autohide=1&showinfo=0&autoplay=1'></iframe>",
vimeoMarkup:"<iframe src='http://player.vimeo.com/video/29298709?title=0&byline=0&portrait=0;api=1&autoplay=1'></iframe>",
closeOtherOverlays:"off",
allEntryAtOnce:"off",
dragAndScroll:"off",
easeing:'Power3.easeOut'
});
});
</script>
visibleElementsArray:[4,3,2,1] - Defines how many Entry is visible in the different Responsive levels. The Reponsive levels (4 level!) are the following (the size of the Surrounding container and not the Browser !!!!) :
If you set it to i.e. [5,3,2,1] than over 980px you will see 5 entreis, between 768px and 980px you will see 3 entries, between 420px and 768px 2 Entries and under 420px you will see 1 Entry. Default value: [4,3,2,1]
mediaMaxHeight: [0,0,0,0] - Defines how height the mediaholder_innerwrap container can have depending on the Responsive levels.The Reponsive levels (4 level!) are the following (the size of the Surrounding container and not the Browser !!!!) :
0 means no Limit ! i.e. [320,200,160,120] will set the max-height to 320px , 200px, 160px or to 120px depending on the surrounding container width. Default value is [0,0,0,0]
closeOtherOverlays:on/off - if this set to "on" than clickin a Reveal_opener button will close first all other opened Reveal within the same Teaser and open the clicked one. default value is "off"
allEntryAtOnce:on/off - it is set to "on" than by clicking left/right the slider with the current visible amount of entries will be slide to the left/right. Default value is "off"
carousel: on/off - Allows an endless slide through the entries. If it is set to off the left and right scroll is limited and reaching the last item / first item the scroll is blocked.
dragAndScroll: on/off - If it is set to"on", than the full markup can be draged and scroller by holding the container with the mouse. Do not use Drag6Scroll together with Normal Navigation !! Default value is "off"
heightOffsetBottom: Increase/decrease the height of the container (padding-bottom). Use it in case you add shadows / borders to entries. The overflow container padding can be adjusted with this value to be able to see the shadows on entries. default value is 0.
entrySizeOffset: reduce the width per entries. Dont need to adjust till entries fits always wll within the container. Default Value is 0
conteainerOffsetRight: create a right padding and reduce the <li> tag widths. Dont need to change till entries fits well in the surrounding container. Default value is 0
This Chapter presents the Predfefined Skins.
An Entry can include any kind of Content. To make it easier for you we created some Predefined Skins which help you to make some basic styling for your Entries.
You can mix Skins and containers in any art of way within one Teaser
Skins are Optional. You can craete your own content within an <li> tag with any content you wish
The Skins are a collection of CSS Settings used within a <li> tag (an entry). As far a skin defines looks of titles, content, paddings, sapeces, colors and bg colors. You can add unlimited amount of further skins to your collection. And you can use different skins per entry within the same teaser also.
Best way to link a skin to an entry to set the class for the <li> tag.
<!-- AN ENTRY HERE -->
<li class="sb-media-skin">
We have 4 predefined Skin.
This Chapter presents the Predfefined Markups.
An Entry can include any kind of Content. To make it easier for you we created some containers which help you to build Reveals, Media and Content in your Teaser Entry.
You can mix the Containers in any art of way.
Predefined Containers are Optional. You can craete your own content within an <li> tag with any content you wish
We have a collection of predefined containers, which will help you to make simple hover effects, handle Media, add Reveals (hidden Contents) and add captions / content.
The Predefined Containers:
This Container helps you to add a Media within the Teaser (like an image). Depending on the Skins you will see how to add Border, rounded border and max height for the media you included.
<!-- THE MEDIA HOLDER HERE -->
<div class="mediaholder ">
<div class="mediaholder_innerwrap">
<img alt="" src="images/entries/Fotolia_261640_XS.jpg">
</div>
</div><!-- END OF MEDIA CONTAINER -->
This Container helps you to add a Media within the Teaser (like an image). Depending on the Skins you will see how to add Border, rounded border and max height for the media you included.
<!-- THE MEDIA HOLDER HERE -->
<div class="mediaholder ">
<div class="mediaholder_innerwrap">
<img alt="" data-lazyloadheight="200" data-lazyloadsrc="images/entries/Fotolia_261640_XS.jpg" src="images/entries/empty.png">
</div>
</div><!-- END OF MEDIA CONTAINER -->
The data-lazyloadsrc should point on the Image source. The data-lazyloadheight should be the height of the container before loading the image, and the src should point on any placeholder image. Best if you use for all Items the same placeholder image for quicker loading.
Showbiz adds an item during the loadsequenze with the class sb-preloader which creates a loader circle in the mediaholder folder. This will be removed automatically after the image is loaded. You can style this loader in the settings.css file or copying that class into your own stylesheer and edit it there, for better Update possibilities in the future.
The Hovercover Container usually comes within the mediaholder container to add some hover effect to the Teaser item. It can have a simple colored bg, or cn include some hovering icons like a link and/or lupe icon
Here a full functionable Example within a MediaHolder container:
<!-- THE MEDIAHOLDER CONTAINER -->
<div class="mediaholder">
<!-- THE INNER WRAP FOR MEDIA HOLDER -->
<div class="mediaholder_innerwrap">
<img alt="" src="images/entries/image.jpg">
<!-- THE HOVER CONTAINER AND THE HOVER ICONS -->
<div class="hovercover" >
<a href="#">
<div class="linkicon notalone"><i class="icon-link"></i></div>
</a>
<a class="fancybox" rel="group" href="images/entries/image.jpg">
<div class="lupeicon notalone"><i class="icon-search"></i></div>
</a>
</div><!-- END OF HOVER CONTIANER -->
</div><!-- END OF MEDIAHOLDER INNER WRAP-->
</div><!-- END OF MEDIAHOLDER CONTAINER -->
Note, the notalone class helps you to add two icon next to each other. Without notalon using two icon within one hovercover will overlay the icons.
The Detail Holder is a container to collect titless, content, dates etc. within one contaier, and position it relative or absolute to the rest of the containers. It helps you to add bg color to the content, add border radius and borders, paddings. it is not a must ! I can be used if you need so.
<!-- THE VISIBLE DETAILS -->
<div class="detailholder">
<div class="divide15"></div>
<h4 class="showbiz-title txt-center"><a href="#">Teaser Item One</a></h4>
<div class="divide5"></div>
<p class="txt-center">Lorem ipsum dolor sit amet</p>
</div><!-- END OF VISIBLE DETAILS -->
The Navigation of the Showbiz elements can work different art and way. You can use predefined "Arrow Buttons", you can use you self styled buttons and links, you can use drag & scroll functions and Swipes.
The Navigation Container (predefined via Showbiz) can be positioned anyhwere within the DOM.
The Buttons need to have an Individuel ID so Showbiz container can reference on those buttons.
<!-- THE NAVIGATION -->
<div class="showbiz-navigation center sb-nav-grey">
<div id="showbiz_left_1" class="sb-navigation-left">
<i class="icon-left-open"></i>
</div>
<div id="showbiz_right_1" class="sb-navigation-right">
<i class="icon-right-open"></i>
</div>
<div class="sbclear"></div>
</div> <!-- END OF THE NAVIGATION -->
The Predefined Navigation can have following Classes:
To make a referenz between a Navigation Button and between a Showbiz Teaser you will need to defined the id of the buttons within the data-left and data-right variables at the showbiz container. like this:
<div class="showbiz" data-left="#showbiz_left_1" data-right="#showbiz_right_1">
05 Reveal Containers
Reveal Containers are there for presenting Hidden content per teaser. A Reveal Container can have a single width or fullwidth. Single width is default. Within a Reveal container you can define any art of content. Reveal Containers handled via jQuery and the Reveal Opener. Reveal Opener are the buttons to open/close the reveal wrapper hidden containers. Please see following examples:
Single Width Reveal:
<!-- REVEAL CONTAINER (SINGLE MODE) -->
<div class="reveal_container">
<!-- THE REVEAL CONTENT, ONLY IN DETAIL MODE VISIBLE -->
<div class="reveal_wrapper">
<p class="p40">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
</div>
</div><!-- END OF REVEAL CONTAINER -->
Fullwidth Reveal:
<!-- THE REVEAL CONTAINER - OPENING IN FULLWIDTH -->
<div class="reveal_container tofullwidth">
<!-- THE REVEL HIDDEN / VISIBLE CONTAINER -->
<div class="reveal_wrapper">
<!-- THE HEIGHT ADJUSTER CONTAINER -->
<div class="heightadjuster table">
<!-- TABLE CONSTRUCT FOR LEFT / RIGHT CONTENTS -->
<div class="table-cell onethird">
<img alt="" src="images/entries/Fotolia_261640_XS.jpg" width="100%">
</div>
<!-- CONTENT IN TABLE -->
<div class="table-cell pl20">
<h3 class="showbiz-title large">Ut wisi enim ad minim veniam</h3>
<div class="divide20"></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</p>
<div class="divide20"></div>
<p class="orange bigger bolder">Special Offer:</p>
</div><!-- END OF CONTENT -->
</div><!-- END OF HEIGHT ADJUSTER CONTAINER -->
</div><!-- END OF REVEAL HIDDEN/VISIBLE CONTAINER -->
<!-- THE CLOSER / OPENER FUNCTION -->
<div class="reveal_opener opener_big_grey">
<span class="openme">+</span>
<span class="closeme">-</span>
</div><!-- END OF CLOSER / OPENER -->
</div><!-- END OF THE REVEAL CONTAINER -->
This is the Handler To Open and Close the Reveal Wrapper. Some prepared Classes are defined. The Reveal Opener can be positioned within the reveal_container or outside . It need to stay within the <li> tag, and in Fullwidth mode it is important that it stays insidethe reveal_container (see Example Reveal Fullwdith above)
<!-- THE CLOSER / OPENER FUNCTION -->
<div class="reveal_opener opener_big_grey">
<span class="openme">+</span>
<span class="closeme">-</span>
</div><!-- END OF CLOSER / OPENER -->
The Prepared Classes for the Reveal opener:
Some Video Containers from YouTube and Vimeo Containers can be defined within the reveal_wrapper Makrups to embed video iframes on demand. iFrmaes exist only when reveal wrapper is opened.
Set the option closeOtherOverlays:"on" to close one reveal when other reveal has been opened.
<!-- REVEAL CONTAINER (SINGLE MODE) -->
<div class="reveal_container">
<!-- THE REVEAL CONTENT, ONLY IN DETAIL MODE VISIBLE -->
<div class="reveal_wrapper">
<!-- THE YOUTUBE OR VIMEO HELPER CLASS -->
<div class="sb-yt-markup" data-videoid="3v-w8Cyfoq8"></div>
</div>
</div><!-- END OF REVEAL CONTAINER -->
This Chapter presents the Helper Classes
Some Helper Classes has been pre created for making your life simple at positioning, hide, centering, and styling different containers within the showbiz.
helper classes are there to help you styling but also to add extra functions of Containers
Soem function can not work without helper classes. Please see the following List to understand where to use which class
In the Following section we list the different classes and the subclasses. We dont relist Skins and Containers here ! Please see prepared Containers and Prepared Skins above !!
ShowBiz Pro use Fancybox as Lightbox System for Detail viewing. We use only a basic function of FancyBox, in case you need advanced functions like Thumbnail views, mouse scroll etc. please check out the FancyBox documentation.
Put the following Code in the <head> part of your document under the jQuery Library script !!.
<!-- THE FANYCYBOX ASSETS --> <link rel="stylesheet" href="showbizpro/fancybox/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" /> <script type="text/javascript" src="showbizpro/fancybox/jquery.fancybox.pack.js?v=2.1.3"></script> <!-- Optionally add helpers - button, thumbnail and/or media ONLY FOR ADVANCED USAGE--> <script type="text/javascript" src="showbizpro/fancybox/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
<!-- THE HOVER CONTAINER AND THE HOVER ICONS -->
<div class="hovercover" >
<a class="fancybox" rel="group" href="images/entries/shutterstock_76307515.jpg">
<div class="lupeicon notalone"><i class="icon-search"></i></div>
</a>
</div><!-- END OF HOVER CONTIANER -->
Put this Code somewhere behind the MegaFolio Plugin initialisation (within the <scrip> tags):
// THE FANCYBOX PLUGIN INITALISATION
jQuery(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
The Plugin need to be saved in a variable (we name it here "api") so we can referenz on it later, just like this:
var api=jQuery('.showbizpro-container').showbizpro({....});
Of course you should use the options etc. as written in the Options Chapter.
Since we registered the Plugin we can call its methodes.
api.showbizredraw();
It will rearrange the ShowBiz Pro Entries
Used Assets
If you face problems with the installation or customization of our product please do not hesitate to contact us via our support ticket system: