Ajax-Zoom Обзор

Если вы хотите показывать изображения с высоким разрешением на своем веб-сайте, вы никогда не ошибетесь с Ajax-Zoom. Этот плагин jQuery, Ajax-Zoom, НЕ требует никаких плагинов для браузера, таких как Flash, Java или Silverlight, идеально подходящих для электронной коммерции, расширенных презентаций продуктов и других приложений.

Посмотреть демоверсии

Что такое Ajax-Zoom?

Ajax-Zoom — очень мощный плагин для масштабирования и панорамирования изображения с возможностью поворота на 360 °. Он имеет опцию галереи изображений на основе jQuery и PHP и может быть легко интегрирован в любой ваш сайт, так как у него также есть более 300 других опций! Полностью упакованное и бесплатное / недорогое решение для масштабирования jQuery для представления изображений с высоким разрешением в Интернете.

Особенности :

Ajax-Zoom имеет полноэкранные возможности, различные варианты защиты изображений, динамические водяные знаки / аннотации. Не требуется никаких плагинов, таких как Flash, Java или Silverlight, что иногда может быть проблемой. Он поддерживает типы изображений JPG, TIF, PNG, BMP, GIF и PSD. Бесступенчатый интерфейс масштабирования, панорамирования и кадрирования с поддержкой колесика мыши (масштабирование до точки). Поддержка iPhone / iPad. А знаете что интересно? Это бесплатно, что загрузчик Ajax и фон могут быть заменены вашими собственными изображениями!

Полноэкранный режим

Круто, что он использует плагин HotSpots для проигрывателя AJAX-ZOOM 3D / 360 / 2D, потому что теперь мы можем создавать несколько горячих точек или прямоугольных областей изображения и настраивать для них несколько действий при щелчке мышью (например, ссылки, всплывающие подсказки, всплывающие лайтбоксы). ).

Пример кода 1 :
Единственное отличие между любой другой реализацией или примером AJAX-ZOOM состоит в том, что файл JavaScript с данными JSON, созданными этим редактором, загружается в функцию обратного вызова onLoad AJAX-ZOOM с помощью jQuery.fn.axZm.loadHotspotsFromJsFile API, см. Ниже…

 Loading, please wait... // Create empty object var ajaxZoom = {}; // Define callbacks, for complete list check the docs ajaxZoom.opt = { onBeforeStart: function(){ // Set backgrounf color, can also be done in css file jQuery(".zoomContainer").css({backgroundColor: "#FFFFFF"}); }, onLoad: function(){ // Some settings can be set inline jQuery.axZm.spinReverse = false; // Load hotspots over this function... // or just define jQuery.axZm.hotspots here and trigger jQuery.fn.axZm.initHotspots(); jQuery.fn.axZm.loadHotspotsFromJsFile("../pic/hotspotJS/eos_1100D.js", false, function(){ // Do something if you want }); } }; // Define the path to the axZm folder, adjust the path if needed! ajaxZoom.path = "../axZm/"; // Define your custom parameter query string // example=spinIpad has many presets for 360 images // You can change them in /axZm/zoomConfig.inc.php after elseif ($_GET['example'] == 'spinIpad') // 3dDir - best absolute path to the folder with 360/3D images // for 2D you can use zoomData, eg zoomData=/your/path/image1.jpg|/your/otherPath/image2.jpg ajaxZoom.parameter = "example=spinIpad&3dDir=/pic/zoom3d/Uvex_Occhiali"; // The ID of the element where ajax-zoom has to be inserted into ajaxZoom.divID = "abc"; 
 
 Loading, please wait... // Create empty object var ajaxZoom = {}; // Define callbacks, for complete list check the docs ajaxZoom.opt = { onBeforeStart: function(){ // Set backgrounf color, can also be done in css file jQuery(".zoomContainer").css({backgroundColor: "#FFFFFF"}); }, onLoad: function(){ // Some settings can be set inline jQuery.axZm.spinReverse = false; // Load hotspots over this function... // or just define jQuery.axZm.hotspots here and trigger jQuery.fn.axZm.initHotspots(); jQuery.fn.axZm.loadHotspotsFromJsFile("../pic/hotspotJS/eos_1100D.js", false, function(){ // Do something if you want }); } }; // Define the path to the axZm folder, adjust the path if needed! ajaxZoom.path = "../axZm/"; // Define your custom parameter query string // example=spinIpad has many presets for 360 images // You can change them in /axZm/zoomConfig.inc.php after elseif ($_GET['example'] == 'spinIpad') // 3dDir - best absolute path to the folder with 360/3D images // for 2D you can use zoomData, eg zoomData=/your/path/image1.jpg|/your/otherPath/image2.jpg ajaxZoom.parameter = "example=spinIpad&3dDir=/pic/zoom3d/Uvex_Occhiali"; // The ID of the element where ajax-zoom has to be inserted into ajaxZoom.divID = "abc";  

Пример кода 2 :
Этот пример не требует кодов PHP и может также быть вставлен с помощью редактора WYSIWYG в любой контент. Все, что вам нужно сделать, это определить строку ajaxZoom.parameter с путями к исходным изображениям.

 
 
  Загрузка, пожалуйста подождите... 


 // Создать новый объект
 var ajaxZoom = {}; 

 // Определяем путь к папке axZm
 ajaxZoom.path = "../axZm/"; 

 // Определяем строку запроса вашего пользовательского параметра
 ajaxZoom.parameter = "example = 2 & zoomData = / pic / zoom / furniture / test_furniture1.png | /pic/zoom/furniture/test_furniture2.png | /pic/zoom/boutique/test_boutique1.png | / pic / zoom / boutique / test_boutique2 .png "; 

 // Идентификатор элемента, в который должен быть вставлен ajax-zoom
 ajaxZoom.divID = "test";

Как это получить :

Хорошо, что вы всегда можете скачать и протестировать Ajax-Zoom, и если у вас уже есть хорошее представление об этом и у вас включены определенные функции — вы можете купить его.

Проверьте демоверсии

Обратитесь в службу поддержки для дальнейших запросов.