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.

Generated copy & paste JavaScript code

This code below is updated dynamically when you use the options configurator. Please find the desciptions of each option in the configurator:
https://www.ajax-zoom.com/examples/example30.php

About

This jQuery image slider is a wrapper and extension of AJAX-ZOOM jQuery plugin. Considering what you see above as just another image slider out of many on internet, the WOW effect is certainly its ability to dynamically zoom into images of virtually any dimensions and file sizes. Also the fullscreen option, as well as touch device compatibility with pinch zoom and touch swipe make it unique. Please note that the original sized image never loads into cache. Only the portion of the image being zoomed.

All elements like buttons, bullet navigation, description etc. can be disabled and positioned anywhere over the image or besides just by setting an option in jQuery plugin manner or with the online configurator. Most CSS is defined in a separate file. The slider extension is open source, commented and can be extended as you like (no overkill js). Most of the options are specific to this slider extension. Some options however are passed directly to AJAX-ZOOM and set its options dynamically over this extension. In fact this is a wrapper for AJAX-ZOOM extended by more custom functionality using AJAX-ZOOM API.

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