Super User

Super User

Aliquam erat volutpat. Proin euismod laoreet feugiat. In pharetra nulla ut ipsum sodales non tempus quam condimentum. Duis consequat sollicitudin sapien, sit amet ultricies est elementum ac. Aliquam erat volutpat. Phasellus in mollis augue.

Website URL: http://www.youjoomla.com

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>

YJSG 1.0.14 comes with default support for HTML5 video player by using Video.js which also supports Youtube and Vimeo videos. This is a very handy feature that will let you embed video player in any Joomla! content type. We also added  .yjh5v_center  class  that you can use to center your videos within content. For custom skins and more instructions on how to use Videos.js please visit official website.



Default video setup





<video id="default_video" class="video-js vjs-default-skin yjh5v_center" controls width="640" height="264"poster="http://video-js.zencoder.com/oceans-clip.jpg" preload="auto" data-setup="{}">
	<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
</video>

Vimeo video setup



<video id="html5vimeo" class="video-js vjs-default-skin video-small yjh5v_center" controls width="640" height="360" data-setup='{"techOrder":["html5", "vimeo"]}'>
	<source src="https://vimeo.com/50700106" type='video/vimeo'>
</video>

Youtube video setup



<video id="html5youtube" class="video-js vjs-default-skin video-small yjh5v_center" controls width="640" height="360" data-setup='{"techOrder":["html5", "youtube"]}'>
	<source src="http://www.youtube.com/watch?v=9QscURRuF0g" type='video/youtube'>
</video>

Notifications examples:

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

This is box title:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla, est et ultricies porttitor, augue purus condimentum mi, vel congue nunc est vitae diam. Proin.

To create notification just add one of these class names to your div:

  • yjtbox yjt_alert
  • yjtbox yjt_warning
  • yjtbox yjt_message
  • yjtbox yjt_note

You can add or remove the box closing button <span class="yjt_close"></span>
<div class="yjtbox yjt_alert">
  <span class="yjt_close"></span>
  <h4 class="yjtboxtitle">This is box title:</h4>
      My Alert...
  </div>
</div>