Responsive multimedia swipe gallery with 360 / 3D views, flat images, videos, AJAX and IFRAME content

AJAX-ZOOM extension to display 360 product views or 3D product views together with flat images in one viewer. Optionally add Videos from Youtube, Vimeo, and Dailymotion. You can also add other content to display within an iframe or invoked by AJAX request.

About this example and the $.axZm360Gallery extension

It has been often asked how to manage 360/3D product spins and plain 2D images in one gallery. The vertical and horizontal galleries which are integrated into AJAX-ZOOM do not support it. However it is possible to make a custom HTML gallery with both - 360 and 2D images and control the player over API functions. In this example we have made a custom function jQuery.axZmSwitchImage() including some additional logic - when switching between regular 2D images and 360 object it is necessary (or more easy) to reload the player in the background. Thus the javascript function jQuery.axZmSwitchImage() handels the task. You will find the code in the source of this file. Edit, adjust the function as needed - it is commented. options of $.axZm360Gallery extension, which has been introduced in v. 4.2.1. All options of the extension are listed below.

What's new in $.axZm360Gallery compared to the old version:

• HTML markup shrank to a couple of lines.
• Easy to configure over options including the definition of the content.
• Optionally include $.axZmThumbSlider plugin that manages the displaying and scrolling of the thumbnails gallery.
• Almost the same code for responsive and none responsive layout. Basically, you only need to change the HTML markup and enable the embedResponsive option.
• Additionally add videos from YouTube, Vimeo or Dailymotion.
• Image thumbnails for all items in the gallery including that of the videos load instantly. You do not need to define them anywhere.
• Added AJAX invoked content and content that display in an iframe.
• Added subtle control for all features.

Despite all the possibilities, you can use the $.axZm360Gallery plugin only with plain images or only 360/3D product views. So, in case you don't have 360 photography images for a product, you can still use the same layout and scripts for displaying any media that is available.

One of the example objects loaded into the player on www.ajax-zoom.com is a multilevel (multirow) 3D object. However, as of definition, it makes no difference to a regular 360° product spin with just one row. The only difference between regular 360 spin and multirow is that AJAX-ZOOM expects to find the original images of each row in the subfolders of the target folder and not directly in the target folder as it would be for a single row 360 view. For example, the target path to a 3D view is /pic/zoomVR/nike. You would need to place images of each row into the subfolders of that target folder, e.g. /pic/zoomVR/nike/0, /pic/zoomVR/nike/15, /pic/zoomVR/nike/30, /pic/zoomVR/nike/45, /pic/zoomVR/nike/60, /pic/zoomVR/nike/75, /pic/zoomVR/nike/90. You do not need to define these subfolders anywhere. AJAX-ZOOM instantly detects them and proceeds all the images in them automatically. Also, the subfolders do not have to be named in a certain way. You just need to make sure that after sorting, the top row is at the first place and the last row at last.

Please note: some default settings from /axZm/zoomConfig.inc.php are overridden in /axZm/zoomConfigCustom.inc.php after elseif ($_GET['example'] == 'spinAnd2D') { So if changes in /axZm/zoomConfig.inc.php have no effect look for the same options /axZm/zoomConfigCustom.inc.php;

Last but not least: there is no PHP needed to run it in your actual application so you can use it, e.g. with Phalanger in ASP.NET environment.

JavaScript & CSS files in head

<!--  Include jQuery core into head section if not already exists -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

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

<!-- JavaScript for 360/3D gallery -->
<script type="text/javascript" src="../axZm/extensions/jquery.axZm.360Gallery.js"></script>
<link rel="stylesheet" type="text/css" href="../axZm/extensions/jquery.axZm.360Gallery.css" />

<!-- Include axZm.thumbSlider -->
<link rel="stylesheet" type="text/css" href="../axZm/extensions/axZmThumbSlider/skins/default/jquery.axZm.thumbSlider.css" />
<script type="text/javascript" src="../axZm/extensions/axZmThumbSlider/lib/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="../axZm/extensions/axZmThumbSlider/lib/jquery.axZm.thumbSlider.js"></script>
			

CSS in Head

#playerWrap {
	padding-right: 120px; /* width of the gallery */
	height: 600px;
	max-height: calc(100vh - 50px);
	position: relative;
}

#spinGalleryContainer {
	position: absolute;
	z-index: 11;
	width: 120px;
	height: 100%;
	right: 0px;
	top: 0px;
}

#axZmPlayerContainer {
	position: relative;
	height: 100%;
}

#spinGallery {
	position: absolute;
	right: 0;
	width: 110px;
	height: 100%;
	overflow: hidden;
}

/* hide gallery for small screens */
@media (max-width: 768px) {
	#spinGalleryContainer {
		display: none;
	}
	#playerWrap {
		padding-right: 0;
		height: 400px;
	}
}
			

HTML markup in body

All containers can be responsive! If the container where AJAX-ZOOM will be loaded into is responsive, then set "embedResponsive" option below to true.

<div id="playerWrap">
	<!-- Container where AJAX-ZOOM will be loaded into -->
	<div id="axZmPlayerContainer">
		<!-- This div will be removed after anything is loaded into "content" div -->
		<h4>Loading, please wait...</h4>
	</div>

	<div id="spinGalleryContainer">
		<!-- Thumb slider -->
		<div id="spinGallery">
			<!-- Temp message that will be removed after the slider initialization -->
			<div id="spinGallery_temp" class="spinGallery_temp">
				Gallery will be loaded...
			</div>
		</div>
	</div>
</div>
			

JavaScript

$.axZm360Gallery - documentation (options)

galleryData: [
	['imageZoom', '/pic/zoom/animals/animals_014.jpg'],
	['imageZoom', '/pic/zoom/boutique/boutique_015.jpg'],
	['imageZoom', '/pic/zoom/boutique/boutique_013.jpg'],
	['image360', '/pic/zoom3d/Nike_Running'],
	['image360', '/pic/zoom3d/Teva'],
	['image360', '/pic/zoom3d/nike'],
	['imageZoom', '/pic/zoom/boutique/boutique_014.jpg'],
	['imageZoom', '/pic/zoom/boutique/boutique_015.jpg'],
	['youtube', 'q57I1n4s5Hg'],
	['vimeo', '78673338'],
	['dailymotion', 'x144odn']
]

{
	enabled: false,
	next: {file: '[buttonSet]/zoombutton_slide_vert_next', ext: 'png', w: 20, h: 100},
	prev: {file: '[buttonSet]/zoombutton_slide_vert_prev', ext: 'png', w: 20, h: 100},
	posNext: {right: 0, top: '50%', marginTop: -50, position: 'absolute', zIndex: 5},
	posPrev: {left: 0, top: '50%', marginTop: -50, position: 'absolute', zIndex: 5}
}

galleryData: [
	['animals_014.jpg', '../pic/hotspotJS/animals_014.js'],
	['bike360', '../pic/hotspotJS/bike.js']
]

galleryData: [
	['2D', '../pic/hotspotJS/animals.js'],
	['bike360', '../pic/hotspotJS/bike.js']
]

axZmThumbSliderParam: {
	btn: false,
	orientation: 'vertical',
	scrollbar: true,
	scrollbarMargin: 5
}

axZmCallBacks: {
	onLoad: function(){
		console.log('onLoad fired');
	},
	onSpinPreloadEnd: function(){
		console.log('spin preloaded');
	}
}

thumbDescrObj: {
	boutique_014.jpg: 'Image 1',
	q57I1n4s5Hg: 'Video 1',
	Uvex_Occhiali '360 object 1'
}

thumbImgObj: {
	boutique_014.jpg: '/images/thumb_dbVSGr3.jpg',
	q57I1n4s5Hg: '/images/thumb_mBOG8CL.jpg',
	Uvex_Occhiali '/images/thumb_LWgFmgn.jpg'
}

thumbIconFile: {
	'360': '360_2.png',
	'3D': '3d_2.png',
	'2D': '',
	'youtube': 'youtube_icon.png',
	'vimeo': 'vimeo_icon_1.png',
	'dailymotion': 'video_icon.png'
}

videoThumb: {
	youtube: {
		url: 'https://i1.ytimg.com/vi/',
		img: 'mqdefault'
	},
	vimeo: {
		url: 'https://vimeo.com/api/v2/video/',
		img: 'thumbnail_medium'
	},
	dailymotion: {
		url: 'https://api.dailymotion.com/video/',
		img: 'thumbnail_480_url'
	}
}

videoUrl: {
	youtube: 'https://www.youtube-nocookie.com/embed/',
	vimeo: 'https://player.vimeo.com/video/',
	dailymotion: 'https://www.dailymotion.com/embed/video/'
}

videoSettings: {
	youtube: {
		autoplay: 0,
		controls: 1,
		loop: 0,
		rel: 0,
		showinfo: 0,
		theme: 'light',
		html5: 1
	},
	vimeo: {
		autoplay: 0,
		byline: 0,
		portrait: 0
	},
	dailymotion: {
		autoplay: 0,
		logo: 0,
		quality: 720,
		related: 0
	}
}

Comments (1)

korosh 2013-03-04 08:22:38

It's really good way to show products to my customer. thank you

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.

Add Comment