<p>
	Use any number of images shortcodes within your Joomla <span class="highlight">articles or modules</span>.<br />
	They can easily be added inside the editor by using <strong>
	<a class="yjsg-link-lightbox" href="images/docs/images-lg.jpg">
		[yjsgfa name="fa fa-picture-o"] Images shortcode form
	</a>
	</strong> located under text editor or by adding shortcodes directly.
</p>
<div class="yjsg-row">
	<div class="yjsg-col-1">
		<div class="yjsg-hr-empty"></div>
		<h3>Lighbox</h3>
		<div class="yjsg-hr-empty"></div>
		<div class="yjsg-center"> [yjsgimgs image="images/stories/300x200.jpg" class="yjsg-lightbox radiusb5" title="Image 1" link="images/docs/images-lg.jpg" target="" effect="none"] </div>
		<h3 class="yjsg-sub-heading">shortcode:</h3>
		[yjsgpre pretty="1" scroll="0"]
		{yjsgimgs image="image" class="yjsg-lightbox radiusb5" title="Image 1" link="lightbox-image" target="" effect="none"}[/yjsgpre] </div>
	<div class="yjsg-col-1">
		<div class="yjsg-hr-empty"></div>
		<h3>Lighbox gallery</h3>
		<div class="yjsg-hr-empty"></div>
		<div class="yjsg-center"> [yjsgimgs image="images/docs/images.jpg" class="yjsg-lightbox-items" title="Images shortcodes" link="images/docs/images-lg.jpg" target="" effect="none"]
			[yjsgimgs image="images/docs/media.jpg" class="yjsg-lightbox-items" title="Media shortcodes" link="images/docs/media-lg.jpg" target="" effect="none"]
			[yjsgimgs image="images/docs/icons.jpg" class="yjsg-lightbox-items" title="Icons shortcodes" link="images/docs/icons-lg.jpg" target="" effect="none"] </div>
		<h3 class="yjsg-sub-heading">shortcode:</h3>
		[yjsgpre pretty="1" scroll="0"]
		{yjsgimgs image="image1" class="yjsg-lightbox-items" title="Image 1" link="lightbox-image1" target="" effect="none"}
		{yjsgimgs image="image2" class="yjsg-lightbox-items" title="Image 2" link="lightbox-image2" target="" effect="none"}
		{yjsgimgs image="image3" class="yjsg-lightbox-items" title="Image 3" link="lightbox-image3" target="" effect="none"}[/yjsgpre] </div>
	<div class="yjsg-col-1">
		<div class="yjsg-hr-empty"></div>
		<h3>Polaroid</h3>
		<div class="yjsg-hr-empty"></div>
		<div class="yjsg-center"> [yjsgimgs image="images/stories/160x120.jpg" class="yjt_polaroid" title="Polaroid 1" link="" target="" effect="none"]
			[yjsgimgs image="images/stories/260x180.jpg" class="yjt_polaroid" title="Polaroid 2" link="" target="" effect="none"]
			[yjsgimgs image="images/stories/160x120.jpg" class="yjt_polaroid" title="Polaroid 3" link="" target="" effect="none"] </div>
		<h3 class="yjsg-sub-heading">shortcode:</h3>
		[yjsgpre pretty="1" scroll="0"]
		{yjsgimgs image="image" class="yjt_polaroid" title="Polaroid 1" link="" target="" effect="none"}
		{yjsgimgs image="image" class="yjt_polaroid" title="Polaroid 2" link="" target="" effect="none"}
		{yjsgimgs image="image" class="yjt_polaroid" title="Polaroid 3" link="" target="" effect="none"}[/yjsgpre] </div>
	<div class="yjsg-col-1">
		<div class="yjsg-hr-empty"></div>
		<h3>Tilted group</h3>
		<div class="yjsg-hr-empty"></div>
		<div class="yjsg-center"> [yjsgimgs image="images/stories/160x120.jpg" class="yjt_polaroid yjt_group" title="Polaroid 1" link="" target="" effect="none"]
			[yjsgimgs image="images/stories/160x120.jpg" class="yjt_polaroid yjt_group" title="Polaroid 2" link="" target="" effect="none"]
			[yjsgimgs image="images/stories/160x120.jpg" class="yjt_polaroid yjt_group" title="Polaroid 3" link="" target="" effect="none"] 
			[yjsgimgs image="images/stories/160x120.jpg" class="yjt_polaroid yjt_group" title="Polaroid 4" link="" target="" effect="none"] </div>
		<h3 class="yjsg-sub-heading">shortcode:</h3>
		[yjsgpre pretty="1" scroll="0"]
		{yjsgimgs image="image" class="yjt_polaroid yjt_group" title="Polaroid 1" link="" target="" effect="none"}
		{yjsgimgs image="image" class="yjt_polaroid yjt_group" title="Polaroid 2" link="" target="" effect="none"}
		{yjsgimgs image="image" class="yjt_polaroid yjt_group" title="Polaroid 3" link="" target="" effect="none"} 
		{yjsgimgs image="image" class="yjt_polaroid yjt_group" title="Polaroid 4" link="" target="" effect="none"}[/yjsgpre] </div>
	<div class="yjsg-col-1-3">
		<div class="yjsg-hr-empty"></div>
		<h3 class="yjsg-center">Fade hover effect</h3>
		<div class="yjsg-center"> [yjsgimgs image="images/stories/160x120.jpg" class="" title="" link="" target="" effect="fade|0.5|800"] </div>
	</div>
	<div class="yjsg-col-1-3">
		<div class="yjsg-hr-empty"></div>
		<h3 class="yjsg-center">Morph hover effect</h3>
		<div class="yjsg-center"> [yjsgimgs image="images/stories/160x120.jpg" class="" title="" link="" target="" effect="morph"] </div>
	</div>
	<div class="yjsg-col-1-3">
		<div class="yjsg-hr-empty"></div>
		<h3 class="yjsg-center">Tilt hover effect</h3>
		<div class="yjsg-center"> [yjsgimgs image="images/stories/160x120.jpg" class="" title="" link="" target="" effect="tilt"] </div>
	</div>
	<div class="yjsg-col-1">
		<h3 class="yjsg-sub-heading">shortcode:</h3>
		[yjsgpre pretty="1" scroll="0"]
		{yjsgimgs image="image" class="" title="" link="" target="" effect="fade|0.5|800"}
		{yjsgimgs image="image" class="" title="" link="" target="" effect="morph"}
		{yjsgimgs image="image" class="" title="" link="" target="" effect="tilt"}[/yjsgpre] </div>
	<div class="yjsg-col-1">
		<div class="yjsg-hr-empty"></div>
		<h3>Borders</h3>
		<div class="yjsg-hr-empty"></div>
		<div class="yjsg-center"> [yjsgimgs image="images/stories/160x120.jpg" class="bthin radiusb5" title="Image 1" link="" target="" effect="none"]
			[yjsgimgs image="images/stories/160x120.jpg" class="bthick" title="Image 1" link="" target="" effect="none"]
			[yjsgimgs image="images/stories/160x120.jpg" class="bspace" title="Image 1" link="" target="" effect="none"]
			[yjsgimgs image="images/stories/160x120.jpg" class="bspacethick" title="Image 1" link="" target="" effect="none"] </div>
		<h3 class="yjsg-sub-heading">shortcode:</h3>
		[yjsgpre pretty="1" scroll="0"]
		{yjsgimgs image="image" class="bthin radiusb5" title="Image 1" link="" target="" effect="none"}
		{yjsgimgs image="image" class="bthick" title="Image 1" link="" target="" effect="none"}
		{yjsgimgs image="image" class="bspace" title="Image 1" link="" target="" effect="none"}
		{yjsgimgs image="image" class="bspacethick" title="Image 1" link="" target="" effect="none"}[/yjsgpre] </div>
</div>
