Deprecated: iconv_set_encoding(): Use of iconv.internal_encoding is deprecated in /home/andrey0784/public_html/yachtingaround.com/libraries/joomla/string/string.php on line 28

Deprecated: iconv_set_encoding(): Use of iconv.input_encoding is deprecated in /home/andrey0784/public_html/yachtingaround.com/libraries/joomla/string/string.php on line 29

Deprecated: iconv_set_encoding(): Use of iconv.output_encoding is deprecated in /home/andrey0784/public_html/yachtingaround.com/libraries/joomla/string/string.php on line 30

Strict Standards: Only variables should be assigned by reference in /home/andrey0784/public_html/yachtingaround.com/templates/blaster/yjsgcore/yjsg_core.php on line 42

Strict Standards: Only variables should be assigned by reference in /home/andrey0784/public_html/yachtingaround.com/templates/blaster/yjsgcore/yjsg_stylesw.php on line 16

Notice: Undefined property: YjsgCheckBrowser::$Name in /home/andrey0784/public_html/yachtingaround.com/templates/blaster/yjsgcore/yjsg_core.php on line 338

Notice: Undefined property: YjsgCheckBrowser::$Name in /home/andrey0784/public_html/yachtingaround.com/templates/blaster/yjsgcore/yjsg_core.php on line 341

Notice: Undefined property: YjsgCheckBrowser::$Name in /home/andrey0784/public_html/yachtingaround.com/templates/blaster/yjsgcore/yjsg_head.php on line 213
Image Effects

Strict Standards: Only variables should be assigned by reference in /home/andrey0784/public_html/yachtingaround.com/templates/blaster/yjsgcore/lib/yjsg_loadgrids.php on line 131

BlasterSuspendisse malesuada suscipit

Fusce at urna eget sapien imperdiet auctor. Pellentesque at rhoncus urna. Nullam gravida lorem dolor, quis tincidunt magna bibendum sed. Vivamus vitae porta magna. Aliquam posuere mattis est, quis ultrices nisl commodo volutpat. Quisque non luctus diam. Nam quis nibh gravida lectus porttitor bibendum.


Strict Standards: Only variables should be assigned by reference in /home/andrey0784/public_html/yachtingaround.com/templates/blaster/yjsgcore/lib/yjsg_loadgrids.php on line 131

Strict Standards: Only variables should be assigned by reference in /home/andrey0784/public_html/yachtingaround.com/templates/blaster/yjsgcore/lib/yjsg_loadgrids.php on line 131

Strict Standards: Only variables should be assigned by reference in /home/andrey0784/public_html/yachtingaround.com/templates/blaster/yjsgcore/lib/yjsg_loadgrids.php on line 131

Strict Standards: Only variables should be assigned by reference in /home/andrey0784/public_html/yachtingaround.com/templates/blaster/yjsgcore/lib/yjsg_loadgrids.php on line 131

Image Effects

Category: Shortcodes Published on 20 November 2012
Written by Super User Hits: 135

Polaroid:

To create polaroids from your favorite images we have added special CSS3 classes that you can use:

  • yjt_polaroid
  • yjt_polaroid yjt_tilt
  • yjt_polaroid yjt_morph

Polaroids can also use radiusb CSS class:

Starting from radiusb2 to radiusb10 (radiusb+Number 2 -> 10 = border radius size)

Image parent <a... title="My title" will be your polaroid title.

My Image      My Image      My Image


<a href="#" class="yjt_polaroid" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_tilt" title="My Image">
  <img alt="My Image" src="images/stories/260x180.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_tilt radiusb10" title="My Image">
  <img alt="My Image" src="images/stories/260x180.jpg" />
</a>
<a href="#" class="yjt_polaroid radiusb5 yjt_morph" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>

Polaroid Tilted Group:



Tilted group makes each polaroid tilt to oposite side of it's neighbour:

My Image      My Image      My Image      My Image


<a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" class="yjt_polaroid yjt_group radiusb8" title="My Image">
  <img alt="My Image" src="images/stories/160x120.jpg" />
</a>

Image Fade:

Image fade is very useful Javascript ( Mootools lib) trick that you can use to fade out/in your images or even show different background on mouseneter:

For demo pourpose we used inline CSS but as you can see this class is very flexible and you can do some real magic by simply adding few CSS lines in your stylesheet.
You would need to use 2 data-ATTR attributes in order to acheive desired effect:

data-yjt_fadeto="FADE_TO_NUMBER (1 = 100% visible, 0.5 = 50% visible )

date-yjt_fadespeed="TRANSITION SPEED IN MILLISECONDS" (1000 = 1sec )

<a href="#" data-fadeto="0.3" data-fadespeed="300" class="yjt_fade">
	<img alt="My Image" src="images/stories/160x120.jpg" />
</a>
<a href="#" data-fadeto="0"  data-fadespeed="1000" class="yjt_fade" 
style="background:url(images/stories/key.jpg) no-repeat center center;">
	<img alt="My Image" src="images/stories/160x120.jpg" />
</a>

Image borders:

There are several image borders that you can use:

  • bthin
  • bthick
  • yjt_border bspace
  • yjt_border bspacethick


Images can also use radiusb CSS class:

Starting from radiusb2 to radiusb10 (radiusb+Number 2 -> 10 = border radius size)

My Image My Image My Image My Image My Image
<img alt="My Image"  class="bthin" src="images/stories/160x120.jpg" />
<img alt="My Image"  class="radiusb8" src="images/stories/160x120.jpg" />
<span class="yjt_border radiusb8 bthick">
	<img alt="My Image" src="images/stories/160x120.jpg" />
</span>
<span class="yjt_border radiusb8 bspace">
	<img alt="My Image"  class="radiusb8" src="images/stories/160x120.jpg" />
</span>
<span class="yjt_border radiusb8 bspacethick">
	<img alt="My Image"  class="radiusb8" src="images/stories/160x120.jpg" />
</span>

Strict Standards: Only variables should be assigned by reference in /home/andrey0784/public_html/yachtingaround.com/templates/blaster/yjsgcore/lib/yjsg_loadgrids.php on line 131

Strict Standards: Only variables should be assigned by reference in /home/andrey0784/public_html/yachtingaround.com/templates/blaster/yjsgcore/lib/yjsg_loadgrids.php on line 131

Strict Standards: Only variables should be assigned by reference in /home/andrey0784/public_html/yachtingaround.com/templates/blaster/yjsgcore/lib/yjsg_loadgrids.php on line 131

Strict Standards: Only variables should be assigned by reference in /home/andrey0784/public_html/yachtingaround.com/templates/blaster/yjsgcore/lib/yjsg_loadgrids.php on line 131