example30.php HOME Examples overview Download Ask a question / privacy policy / imprint
example31_responsive.php

jQuery Image Slider with Touch Swipe, Image Zoom & Pan, fullscreen view, dynamic options configurator etc.

Loading, please wait...

Use the options below to configure the image slider.

Copy & paste JavaScript code generated by the configurator

The code below updates when you use the options configurator. Please find the descriptions of each option in the configurator:

About this image slider

This example is an attempt to create one more extension for AJAX-ZOOM that turns the viewer into an jQuery image slider with extended functionality. The extension adds extra features such as bullet navigation with image preview or animated titles and descriptions of the images.

All extra features, as well as many commonly used AJAX-ZOOM options, are set via the configuration user interface. As a result, the extension generates copy & paste JavaScript code with all settings, which differ from defaults. You can disable all UI elements like buttons, bullet navigation, description and other or you can position them anywhere else by setting an option in this AJAX-ZOOM extension similar to jQuery plugin or use the online configurator to achieve the same. Most of the options are specific to this slider extension. Some options, however, are handing over directly to the AJAX-ZOOM configuration file where they modify its options dynamically. In fact, this is a wrapping JavaScript for initiation of AJAX-ZOOM that extended it with more functionality.

All the above, including the UI of the options configurator, is part of the jQuery.fn.ajaxZoomSlider extension. The writing style of the code is effortless, so generally, it can serve as an easy to understand demonstration for developers who aim to create custom functionality by using the AJAX-ZOOM event hooks and the API. You are free to edit this code, remove parts of it and add new features.

JavaScript & CSS files in Head


<!-- AJAX-ZOOM main js and css file -->
<script type="text/javascript" src="../axZm/jquery.axZm.js"></script>
<link rel="stylesheet" type="text/css" href="../axZm/axZm.css" />

<!-- AJAX-ZOOM imageSlider extension -->
<link rel="stylesheet" type="text/css" href="../axZm/extensions/jquery.axZm.imageSlider.css" />
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.imageSlider.js"></script>
            

HTML markup


<div id="axZmPlayerOuter" class="embed-responsive" style="padding-bottom: 50%;">
    <!-- Placeholder for AJAX-ZOOM player -->
    <div id="axZmPlayerCont" class="embed-responsive-item" style="max-height: 94vh; max-height: calc(100vh - 50px);">
        Loading, please wait...
    </div>
</div>
            

Javascript


/*
See generated JavaScript code above!
*/
                

Comments (0)

Leave a Comment

Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, your personal image will be attached every time you comment.
Load other examples in slider