Image Effects

Kategorie: Shortcodes Geschrieben von Super User Zugriffe: 4327

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

Image 1

shortcode:

[yjsgimgs image="image" class="yjsg-lightbox radiusb5" title="Image 1" link="lightbox-image" target="" effect="none"]

Lighbox gallery

Images shortcodes Media shortcodes Icons shortcodes

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

Polaroid 1 Polaroid 2 Polaroid 3

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

Polaroid 1 Polaroid 2 Polaroid 3 Polaroid 4

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

Image 1 Image 1 Image 1 Image 1

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"]