Blog

  • Mega Zoom & Pan Picture Viewer (Pictures and Media)

    Mega Zoom & Pan Picture Viewer (Pictures and Media)

    What is Mega Zoom & Pan Image Viewer?

    The Mega Zoom & Pan Image Viewer plugin is a great image viewer and navigator with a full responsive layout for displaying large images. It is a powerful tool prepared to showcasing products (high resolution product images, e.g. clothes, cars, technical schemes etc), displaying maps, and any other images, with its zoom, pann, dragging, navigation controls, scrollbar, zoom buttons, and highly customizable markers / hotsposts.

    It is mobile optimized running great on iOS (iPad,iPhone), Android and Windows mobile and desktop mobile devices and of course it works on every modern browser and older browsers like IE7 or IE8. Follow the links to view this demos. Watch demo running om IOS or Watch demo on Android

    What is Mega Zoom & Pan Image Viewer main features:

    Tons of options (check them out in our live preview).

    Easy to use and install adn configure.

    Fully Responsive & Mobile Optimized (Smartphones & Tablets).

    Three available display types: responsive / fixed, fullscreen and lightbox.

    The possibility to set the start zoom factor and maximum zoom factor.

    Complete control buttons bar with buttons (optional).

    The control buttons bar can be positioned top or bottom.

    All buttons are optional and can be easily removed if one or more are not needed.

    The order of buttons can be set as you wish.

    The buttons geometry (spacing and position) can be set individually offering fine tune control.

    Optional navigational arrow buttons button for rotating the object.

    Optional zoom in/zoom out buttons plus scrollbar.

    Optional hide/show markers/hotsposts button.

    Hide / show controller button.

    Hyperlink button for creating a hyperlink in the menu.

    Info window button for showing a detailed custom made window which supports unlimited html content.

    Customizable buttons tooltips, the buttons tooltips text can be modified with ease based on the presented product type (please note that the buttons tooltips are optional).

    Awesome markers / hotspots support! Three hotspots types (link, small info window and detailed info window) allowing to display information about the product on specific regions. Once created a hotspot can be added on more then one image.

    Optional fullscreen button.

    Fast CSS3 & JavaScript engine with fall back on CSS1 for older browsers like IE7 or IE8 (exceptional performance!).

    The markers / hotspots can be of any size or shape and they can vary, for example if you want to add three link type hotspots each of them can have a different size or graphics, this applies to all markers/hotspots types.

    Built in tool for finding the correct position of the marker / hotspot on an image .

    Gestures events support for IOS (ipad and iphone) the image can be zoomed with two fingers.

    Navigator window (optional).

    Customizable custom right click menu (optional).

    Keyboard support (optional).

    Mouse wheel support.

    The zoom factor can be set allowing to fine tune the level of zoom, this way the image can be zoomed as much as you like.

    Customizable rotation speed while dragging.

    Customizable slideshow rotation speed.

    Customizable rotation speed while the right or left buttons are pressed and hold.

    Five awesome skins along with the .psd files included (check them out in our live previews).

  • Customizable custom right click menu (optional). Below there is an image to ilustrate this.
  • Detailed Documentation included!.

    Examples files for each skin and display type included, this way the html can be copy and pasted into your html page!.

    Many others features, all of them are explained in details in the documentation files.

    BUY ALL OUR PRODUCTS IN A MEGA BUNDLE WITH A 90% DISCOUNT!!! THIS IS A LIMITED OFFER SO HURRY UP AND GRAB IT!!! : https://codecanyon.net/item/fwd-mega-bundle/19117054

    Tags: zoomer, crop, responsive, image, hotspot, ipad, jquery, landmark, map viewer, pan, resize, responsive, scale, touch, zoom, android

  • SLIDER-28 (Pictures and Media)

    SLIDER-28 (Pictures and Media)

    SLIDER-28 PACKAGE is a collection of several image,video and text content slider to present your content in a batter way. There are total 28 sliders in the package. Each SLIDER-28 item is completely separate from one to another. You can find each SLIDER-28 item with different css file in the css folder. To make using of slider we add a manual with each and every slider item. you can find that manual in the example page of each slider. All 28 slider is created here only with css,html and jquery. All sliders are taken data from external xml file . I have made each effect in a very simple way and you can change most of the slider setting just by make minor change in css, variables in variable js file and by changing value in config xml file., just by copy and paste. In case of popups you can change some important setting from their config.xml. All sliders are xml driven. Is it not very easy? Actually if you see it keenly you can understand that everything is ready here just you have to copy and paste codes in your page. You have no need to know coding.
    Demo is content with the same files like the original source so you can get a clear and original preview of each slider in demo page.
    I have used some outside source in these slider package
    Most of the font using here from google font.
    Images I have take from https://pixabay.com/ a 100% free photo website
    Using of any slider is very easy. Just have to copy and paste js folder,css folder ,image folder and xml folder to your directory and then open the example page. You can see a div in the page with some particular id copy that code and paste it in your page where you want to load the slider. You have done. Run the page you can see the slider in your page. You have no nee to write asingle line of code to implement a slider in your page.
    A documentation include with the downloadable file. In this documentation you will get a complete description how to use and how to customize the slider.

  • NHL Scoreboard Reside (Miscellaneous)

    NHL Scoreboard Reside (Miscellaneous)

    The jQuery NHL Scoreboard Live provides nearly complete coverage of your favorite team′s game scores live, and displays it in a sleek score card; in both side bar and header bar formats.

    Most notable is that it does not require the need for any 3rd party API keys and thereby the data is delivered free of charge! That’s right no monthly fees, no membership dues, nothing … its inherent features add intrinsic value, quality, and versatility to any web page.

    Pleas note … The logos and marks displayed by this product are for visual effect only and in no way suggests that their respective and rightful owners endorse it.

    The NHL Scoreboard Live employs the latest AJAX methodologies to poll data from 3rd party service providers and present the results to you without the need to refresh your web page.

    Each NHL Scoreboard Live element is fully configurable. Foreground color, background color, height, width, game day, etc.

    User interface objects are produced using standard HTML and the popular fonts by Font-Awesome; which are delivered and renamed as part of the NHL Scoreboard Live package.

    For further explanation and product operation … Please feel free to play around in the NHL Scoreboard Live Sandbox.

  • Show off Slider (Sliders)

    Show off Slider (Sliders)

    Showcase Slider is a simple jQuery Slider, horizontally or vertically two components slide.

    Features

    • autoplay (with a progressbar)
    • random play
    • pause on hover
    • horizontal slides
    • vertical slides
    • custom info for image like ‘sale’, ‘-50%’ or something else
    • keyboard support for next and prev slide

    How to use

    
    <!-- jQuery library (served from Google) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <!-- Javascript file -->
    <script src="src/js/sliderShowcase.js"></script>
    <!-- CSS file -->
    <link href="src/css/slidershowcase.css" rel="stylesheet" />

    HTML Markup

    <section id="demo-slider">
      <div>
        <h2>Product1</h2>
        <p>Lorem ipsum dolor sit amet, coetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,  takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <a href="#">read more</a>
        <img src="YOUR_IMAGE" alt="" />
      </div>
    
      <div>
        <h2>Product 2</h2>
        <p>Lorem ipsum dolor sit amet, coetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum Lorem ipsum dolor sit amet.</p>
        <a href="#">read more</a>
        <img src="YOUR_IMAGE" alt="" />
      </div>
    </section>
    

    Call the Plugin

    $(document).ready(function()
      $('#demo-slider').SliderShowcase(
      
        OPTIONS
      );
    );

    You can find the options here or in the downloaded documentation file.

    Included Files

    • Documentation
    • HTML Example
    • jQuery: sliderShowcase
    • jQuery: Pause Jquery plugin v0.1
    • jQuery: imagesLoaded PACKAGED v4.1.1

    Some Files are only included in Preview / Documentation

    if your slider looks weird, could be due to the missing scrips, which are only in preview

    • Bootstrap
    • Font Awesome
    • Dreamweaver.js (for syntax highlight)
    • custom css for Preview
    • jQuery easing
    • Slider Images
  • ezPrintJS – Simplify Web page Printing (Miscellaneous)

    ezPrintJS – Simplify Web page Printing (Miscellaneous)

    Have you ever wanted to make your complex pages look clean and readable on the paper?

    Tired of customizing CSS styles to adapt your pages for printing purposes?

    ezPrintJS here to help you!

    ezPrintJS is a tiny JavaScript library which allows to make pretty-looking printable pages without the need of modification even single line of existing code in your CSS styles and HTML markup.

    You are free to precisely customize content your visitors will see on the paper.

    Features:

    • Zero dependencies (add polyfill if you’re willing to support outdated browsers)
    • No server-side required (no Selenium, PhantomJS or other apps needed)
    • Compatible with almost all modern browsers
    • Print certain region of page using CSS selectors
    • Hide or show elements on printable pages
    • Expand scrollable areas (useful when printing tables)
    • Print SVG and 2D Canvas objects
    • Add watermark image on page
    • Set header and footer taglines
    • Many options to make your pages look perfect even on the paper
    • Leverage full control on what users will send to printer with custom content handlers
    • Set printable areas as many as you want
    • …and many, many more in only ~13KB library

    Please note, ezPrintJS will not produce PDF, images or other formats.

    It’s just helps you generate on-the-fly clean looking pages with content your visitors want to see!

    See examples at: https://nedgeva.github.io/

  • Bibliography and Quotation Generator (Miscellaneous)

    Bibliography and Quotation Generator (Miscellaneous)

    Description

    Easily generate bibliography on your webpages using this jQuery plugin. This is simple, intuitive and customizable. Wrap the word you wants to be cited inside a span and add required citation information in attributes. Invoke the plugin to automatically generate the references. Check the demo and documentation for more details.

    Features

    • Instant tooltip: Show full reference in a tooltip on hover on the reference number
    • Navigation: Click on the reference number to navigate to the reference list and vice versa
    • Themes: 4 different themes have been provided to change the appearance of the reference list
    • Customization: You can customize everything like templates and appearance. The default citation style is APA style. However you can create your own style using curly bracket expressions (follow documentation)

    View demo on mobile

    Browser support

    Stay in touch

    Following are some options you can contact us for queries or suggesstions. Please mention the detail description of the issue and also provide your envato username. Do not add any support related questions in the comment section of the item. Follow us on CodeCanyon and subscribe to our RSS feed to get notified for all new items we publish.

     

      

    Want a new feature to be added ? Drop a mail at support@tabgraf.com. We will go through each requests carefully and will surely add it if feasible.

    Change log

    Version 1.0

    Initial release
  • Tremendous Sidebar (Social Networks)

    Tremendous Sidebar (Social Networks)

    Description

    Super Sidebar is a beautiful, powerful, customizable, easy to use sticky social sidebar. It comes with a lot of options that allow it a wide number of different possible configurations while still remaining lightweight and easy to work with.

    Here are some of the important features of the sidebar:

    • It can be positioned either on the left or right sides and vertically on top, center or bottom. Additionally, it can be positioned at exact values or at percentage values.
    • The buttons and the labels can have 4 different shapes: square, round, rounded and rounded out.
    • The labels can have 7 different appearance animation effects, or the effect can be turned off.
    • It comes with 5 different available colors: default, black, blue, red, yellow. Additionally, any color can be added through the CSS file.
    • The colors can be set for mouseover as well so that the buttons and labels change color on mouseover.
    • Visually, the label can either be separated from the button or connected to it, as to appear as an extension of the button.
    • The button labels can be turned on or off.
    • There are settings to have spaces on the side, between buttons or between the label and the button.
    • It can have subbars that open when mousing over a button.
    • The subbar can have 3 different positions: under, on the side, or circular, to have the buttons be displayed in a circle.
    • The subbar also comes with 4 different animation effects either animating the whole bar or each button individually.
    • It is possible for the buttons to open pop-up windows that can have different content.
    • There are 3 built-in windows that the sidebar comes with and other windows can be custom built following the existing examples.
    • The windows can also be dynamically positioned, using keywords, exact values or percentage values.
    • The sidebar comes with 14 built-in social buttons (Facebook, Twitter, Google+, LinkedIn, Dribbble, Pinterest, Instagram, Behance, Flickr, Twitch, Vimeo, Youtube, Github, Tumblr) and 3 window buttons (Contact, Newsletter, RSS). Other buttons can be added following the existing examples and the instructions in the guide.
    • Continued support and updates.

    But enough talk, have a look over the preview for yourself.

    Updates

    Future developments and updates will be posted here and the files will be free for anyone who has purchased the sidebar at any time.

  • SwNav — Adaptive Menu Plugin (Navigation)

    SwNav — Adaptive Menu Plugin (Navigation)

    SwNav — adaptive menu plugin

    A perfect solution for complex menus.

    Build your own navigation using our NavBuilder.

    Description

    Create your own navigation easy. No code skills required to build
    adaptive navigation for your site. Just open the builder page, set up navigation and copy result code to your website.

    Features

    • Easy customization;
    • Many options available;
    • Adapted to any screen size;
    • Visual builder available — no code required!
    • Flexbox and power of modern CSS and HTML;
    • Fallback for older browsers;
    • Good documentation;
    • Small size: ~5kb gzipped;
    • About 20 variable options;
    • Color theme preview;

    Dependencies

    • jQuey — required;
    • Modernizr — optional for browsers which doesn’t support flexbox;
    • FontAwesome icons — only if you want to use this icons in navigation;

    Updates

    Please leave your ideas for plugin improvement in comments section.

    Version 1.1

    New features:

    • Background transition option. Use it for smooth CSS-animation of background color of nav item;
    • Hover-to-open option. Use it to open submeny by hover on parent item;
    • Rounded navbar. Use it to make rounded corners of navbar.
  • LightMyBox – Every other Gorgeous Lightbox (Media)

    LightMyBox – Every other Gorgeous Lightbox (Media)

    What is LightMyBox?

    LightMyBox is another jquery lightbox which makes your website’s photo galleries beautiful. LightMyBox is compatible with all major browsers and devices, this is completely responsive and works on mobile devices without any problem. LightMyBox is simple, minimal, very flexible and easy to use, setup is easy and completely documented, also there is support which is available to help you if you had any problem during setup. LightMyBox uses latest techniques and created based on CSS3 animation techniques.

    Beautiful background options

    LightMyBox has different and beautiful options for background

    LightMyBox Features

    • Simple and Minimal Skin
    • Responsive – You will not have any problem with handheld devices.
    • Different options for background – as you see in above
    • Custom Theme – You can create custom theme if you want
    • Very flexible and easy to use
    • Callback Functions – allows you to customize your integration

    Notices

    • Demo images are not included in the download
  • Global Telephone Codes jQuery Plugin (Kinds)

    Global Telephone Codes jQuery Plugin (Kinds)

    This is a plugin for getting phone codes for correct phone number input.

    Features

    • Display all country codes in dropdown menu
    • Detects user’s country code by ip and selects it by default
    • Display relevant placeholder for selected phone code (for formatting and validation)
    • Navigate in dropdown by typing country name
    • Extensive API documentation

    Demo and Examples

    You can view a live demo and some examples of how to use the various options here: http://phonecodes.webcoder.az/, or try it for yourself using the included example.

    Browser Compatibility

    Chrome FF Safari IE Chrome Android Mobile Safari IE Mob
    8

    Package Contains

    • Demo
    • CSS and JavaScript files for various project types