Image Effects
Use any number of images shortcodes within your Joomla articles or modules.
They can easily be added inside the editor by using
Images shortcode form
located under text editor or by adding shortcodes directly.
Lighbox
shortcode:
[yjsgimgs image="image" class="yjsg-lightbox radiusb5" title="Image 1" link="lightbox-image" target="" effect="none"]
Lighbox gallery
shortcode:
[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"]
Polaroid
shortcode:
[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"]
Tilted group
shortcode:
[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"]
Fade hover effect
Morph hover effect
Tilt hover effect
shortcode:
[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"]
Borders
shortcode:
[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"]