example30.phpOverview (index.php)Buy / DownloadAsk a question
example31_responsive.php

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

Loading, please wait... 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <!-- jQuery core -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
    <!-- 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" media="all" />
    
    <!-- AJAX-ZOOM imageSlider extension -->
    <link rel="stylesheet" type="text/css" href="../axZm/extensions/jquery.axZm.imageSlider.js" media="all" />
    <script type="text/javascript" src="../axZm/extensions/jquery.axZm.imageSlider.js"></script>

</head>
<body>
<!-- Container where AJAX-ZOOM will be loaded into. 
Everything inside axZmPlayerCont is removed when AJAX-ZOOM is loaded-->    
<DIV id="axZmPlayerOuter" left style="width: 800px; min-height: 430px; float: left;">
    <DIV id='axZmPlayerCont' style='width: 800px; min-height: 400px; float: left'>
    </DIV>
</DIV>

<script type="text/javascript">
// This code below is updated dynamically when you use the options configurator. 
Please find the desciptions of each option in the configurator: 
http://www.ajax-zoom.com/examples/example30.php

</script>

</body>
</html>

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.