AIOS Popup

Magnific Popup is used as the default popup plugin but you need to change. jQuery(”).magnificPopup({}) to jQuery(”).aiosPopup({});

You can also use pre-loaded scripts using this following classes.

Sample Usage

<a href="Video Popup Link Here" target="_blank" class="aios-video-popup"></a>

Video Popup Demo

<a href="Frame Link" class="aios-frame-popup"></a>

Iframe Popup Demo

<a href="Image Link" class="aios-image-popup"></a>

Image Popup Demo

<a href="#popup-body" rel="nofollow" class="aios-content-popup"></a>
         <div id="popup-body"/> Content Goes Here... <div/>

Content Popup Demo

Other Usage

jQuery('.popup-gallery').aiosPopup({
	delegate: 'a',
	type: 'image',
	tLoading: 'Loading image #%curr%...',
	mainClass: 'mfp-img-mobile',
	gallery: {
		enabled: true,
		navigateByImgClick: true,
		preload: [0,1] // Will preload 0 - before current, and 1 after the current image
	},
	image: {
		tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
		titleSrc: function(item) {
			return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
		}
	}
});

<div class="popup-gallery">
	<a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"></a>
	<a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"></a>
	<a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"><img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75"></a>
	<a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"><img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75"></a>
	<a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"><img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75"></a>
	<a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"><img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75"></a>
	<a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75"></a>
</div>

jQuery('.popup-with-form').aiosPopup({
	type: 'inline',
	preloader: false,
	focus: '#name',

	// When elemened is focused, some mobile browsers in some cases zoom in
	// It looks not nice, so we disable it:
	callbacks: {
		beforeOpen: function() {
			if($(window).width() < 700) {
				this.st.focus = false;
			} else {
				this.st.focus = '#name';
			}
		}
	}
});

<a class="popup-with-form" href="#test-form">Open form</a>

<!-- form itself -->
<form id="test-form" class="mfp-hide white-popup-block">
	<h1>Form</h1>
	<fieldset style="border:0;">
		<p>Lightbox has an option to automatically focus on the first input. It's strongly recommended to use <code>inline</code> popup type for lightboxes with form instead of <code>ajax</code> (to keep entered data if the user accidentally refreshed the page).</p>
		<ol>
			<li>
				<label for="name">Name</label>
				<input id="name" name="name" type="text" placeholder="Name" required="">
			</li>
			<li>
				<label for="email">Email</label>
				<input id="email" name="email" type="email" placeholder="[email protected]" required="">
			</li>
			<li>
				<label for="phone">Phone</label>
				<input id="phone" name="phone" type="tel" placeholder="Eg. +447500000000" required="">
			</li>
			<li>
				<label for="textarea">Textarea</label><br>
				<textarea id="textarea">Try to resize me to see how popup CSS-based resizing works.</textarea>
			</li>
		</ol>
	</fieldset>
</form>

For more options you can check Magnific Popup Documentation