JA Typo Demo

This page presents most of typographical aspects of JA T3v2 Framework. Make your readers happy with great Typography and User Experience!

Preformatted text

HTML Headings

HTML pre tag & code class

Below is a sample of <pre> tag or code class:

#ja-rightcol {
  width: 180px;
  float: right;
  color: #EEEEEE;
}

Highlight

This is a highlight phrase. Use <span class="highlight">Your highlight phrase goes here!</span>.

Blockquote

This is a sample Blockquote. Use <blockquote>Your quote goes here!</blockquote> to form a quote!

This is a sample Blockquote. Use <blockquote><span class="open">Y</span>our quote goes her<span class="close">e!</span></blockquote> to form a quote!

Dropcaps

This is a sample Drop Cap. The first letter in this paragraph is big. JA Templates bring into your Jooomla template the magazine drop cap technique and CSS2 includes the first-letter pseudo class. Use <p><span class="dropcap">T</span>Your content goes here!</p> to form a dropcap!

01This is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-1">01</span>Your content goes here!</p> to form a block dropcap!

02This is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-1">02</span>Your content goes here!</p> to form a block dropcap!

03This is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-1">03</span>Your content goes here!</p> to form a block dropcap!

AThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-2">A</span>Your content goes here!</p> to form a block dropcap!

BThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-2">B</span>Your content goes here!</p> to form a block dropcap!

CThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-2">C</span>Your content goes here!</p> to form a block dropcap!

aThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-3">a</span>Your content goes here!</p> to form a block dropcap!

bThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-3">b</span>Your content goes here!</p> to form a block dropcap!

cThis is a sample block dropcap. Use <p class="blockdropcap"><span class="dropcap-3">c</span>Your content goes here!</p> to form a block dropcap!

Lists Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus sapien vel mauris viverra quis euismod dui tincidunt. Phasellus laoreet mattis est, eu vulputate sapien suscipit ac. Vestibulum porttitor justo a est elementum luctus. Nulla ac pharetra nulla. Quisque metus orci, cursus at sollicitudin sit.

Unordered Lists with classes

Icons Style

Button & Tags Style

Button Style

JA Janrain Demo

Introduce

JA Janrain possible for users to log in to your site by using their facebook, google, yahoo, twitter, ... account. This means they no longer have to register to your site. Janrain will handle the registration for them by using their social media account. You can choose whether your users have the option to use the normal Joomla login form next to the Janrain login.

· Support login by using eg. facebook, google, yahoo,twitter,myspace,openid...accounts.

· Auto create new account with received information from openid site.

Configuration

Use { janrain} tag in specific articles

Demonstration

Please see the module on the left .

JA Popup Demo

An elegant Javascript based image, media and gallery viewer. It turns your clustered content items (image, youtube videos, iframe, ajax, flash, html…) into lightweight showcase. Very rich backend to control the popup display...

{ japopup type="youtube" content="http://www.youtube.com/v/cdphzxz64BY?hl=en&fs=1" group1=thickbox 
width="640" height="380" 
title="Political Roast : Obama Emanuel  2005"}Political Roast : Obama Emanuel 2005{ /japopup}

Popup type:Type of popup (Fancy box, Grey box, High slide, Thick box, Multi box

Width: Width of modal window

Height: Height of modal window

Show overlay(Dim background): The background will be dimmed when popup is opened

Overlay fill: The higher the darker

Add title to tag: If Yes, the title will be displayed in popup windows

Add description in Tag: If Yes, the descriptions will be displayed in popup windows

Image in Slideshow type: Apply when popup type = slideshow

JA Highslide Demo

JA Highslide

Introduction

Highslide is a brilliant thumbnail viewer developed in javascript. It is a Joomla! plugin that allows you to easily use Highslide by automatically inserting the necessary javascript into your content or module HTML. The plugin makes use of a Joomla! quicktag to facilitate the integration process. JA Highslide comes with many types of content, ranging from images, contents, html, iframe to flash or ajax. For customization purpose, the plugin gives you the flexibility in editing javascript object settings. You can set global options through the configuration page, or override the global options for individual images or contents without digging into the plugin code. Some brief features of the plugin are highlighted below

JA Highslide features:

* Clean and professional showcase layout

* Multi-language supported

* Items management made simple and flexible

* Unlimited Items and Category

* Powerful and unlimited custom fields for each item

* Easy to select article for each item

* Customizable layout

* Cross-browser supported

Demonstration

• Slideshow Caption

• Slideshow Controlbar

• Modules

• Module

• Image

• Item

• HTML Content

• Iframe

• Flash

{ highslide type="slideshow-caption" 
url="images/sampledata/flowers/gl-27.jpg,images/sampledata/flowers/gl-29.jpg,images/sampledata/flowers/gl-32.jpg,images/sampledata/flowers/gl-24.jpg" 
width=150 positions="top, right" 
outlineType="rounded-white"}{ /highslide}

PREVIOUS
LEFT ARROW KEY NEXT
RIGHT ARROW KEY Close MOVE

{ highslide type="slideshow-controlbar" 
url="http://www.catfacts.org/cat-facts.jpg,http://www.catfacts.org/cat-tounge-full.jpg, http://www.catfacts.org/cat-picture-full.jpg,http://www.catfacts.org/cat-mouth-full.jpg" 
width="150" positions="top, right" } { /highslide}

{ highslide type="modules" position="ja_tabs_plg" 
outlineType="rounded-white" width=700 height=400 
captiontext="This is demo content" pre=true}

   Click me to display module have "ja_tabs_plg" position

{ /highslide}

Click me to display module have "ja_tabs_plg" position

• Move

Flowers 5

Eros quis mauris nulla id quis ac consequat Praesent libero justo. Neque congue dui odio justo Ut wisi malesuada justo pede consequat. Tincidunt dui elit vel rhoncus enim ante vestibulum at consequat interdum. Libero penatibus Aliquam lobortis eget Donec faucibus aliquet leo at consectetuer. Vel ante purus Sed Pellentesque pellentesque pellentesque pede convallis wisi ipsum.

Lorem ipsum dolor sit amet consectetuer Curabitur semper sit neque nascetur. Auctor consequat mollis massa pede a mauris metus Morbi at nunc. Mauris Vestibulum pede condimentum id vitae Suspendisse urna Aliquam Nulla tempus. Et magnis neque pellentesque Morbi augue Aenean Mauris quis congue felis.

Flowers 4

Eros quis mauris nulla id quis ac consequat Praesent libero justo. Neque congue dui odio justo Ut wisi malesuada justo pede consequat. Tincidunt dui elit vel rhoncus enim ante vestibulum at consequat interdum. Libero penatibus Aliquam lobortis eget Donec faucibus aliquet leo at consectetuer. Vel ante purus Sed Pellentesque pellentesque pellentesque pede convallis wisi ipsum.

Lorem ipsum dolor sit amet consectetuer Curabitur semper sit neque nascetur. Auctor consequat mollis massa pede a mauris metus Morbi at nunc. Mauris Vestibulum pede condimentum id vitae Suspendisse urna Aliquam Nulla tempus. Et magnis neque pellentesque Morbi augue Aenean Mauris quis congue felis.

Flowers 3

Eros quis mauris nulla id quis ac consequat Praesent libero justo. Neque congue dui odio justo Ut wisi malesuada justo pede consequat. Tincidunt dui elit vel rhoncus enim ante vestibulum at consequat interdum. Libero penatibus Aliquam lobortis eget Donec faucibus aliquet leo at consectetuer. Vel ante purus Sed Pellentesque pellentesque pellentesque pede convallis wisi ipsum.

Lorem ipsum dolor sit amet consectetuer Curabitur semper sit neque nascetur. Auctor consequat mollis massa pede a mauris metus Morbi at nunc. Mauris Vestibulum pede condimentum id vitae Suspendisse urna Aliquam Nulla tempus. Et magnis neque pellentesque Morbi augue Aenean Mauris quis congue felis.

Flowers 1

Eros quis mauris nulla id quis ac consequat Praesent libero justo. Neque congue dui odio justo Ut wisi malesuada justo pede consequat. Tincidunt dui elit vel rhoncus enim ante vestibulum at consequat interdum. Libero penatibus Aliquam lobortis eget Donec faucibus aliquet leo at consectetuer. Vel ante purus Sed Pellentesque pellentesque pellentesque pede convallis wisi ipsum.

Lorem ipsum dolor sit amet consectetuer Curabitur semper sit neque nascetur. Auctor consequat mollis massa pede a mauris metus Morbi at nunc. Mauris Vestibulum pede condimentum id vitae Suspendisse urna Aliquam Nulla tempus. Et magnis neque pellentesque Morbi augue Aenean Mauris quis congue felis.

---

• Close

{ highslide type="module" modulename="mod_flowers1" 
outlineType="rounded-white" width=500 height=350 
captiontext="This is demo content" pre=true}
Click me to display module Flowers
{ /highslide}

Click me to display module Flowers

• Move

Flowers 1

Eros quis mauris nulla id quis ac consequat Praesent libero justo. Neque congue dui odio justo Ut wisi malesuada justo pede consequat. Tincidunt dui elit vel rhoncus enim ante vestibulum at consequat interdum. Libero penatibus Aliquam lobortis eget Donec faucibus aliquet leo at consectetuer. Vel ante purus Sed Pellentesque pellentesque pellentesque pede convallis wisi ipsum.

Lorem ipsum dolor sit amet consectetuer Curabitur semper sit neque nascetur. Auctor consequat mollis massa pede a mauris metus Morbi at nunc. Mauris Vestibulum pede condimentum id vitae Suspendisse urna Aliquam Nulla tempus. Et magnis neque pellentesque Morbi augue Aenean Mauris quis congue felis.

---

• Close

{ highslide type="img" url="images/sampledata/flowers/gl-22.jpg" width=200 captionText='Sample image'}
{ /highslide}

Click me to display image

{ highslide type="item" itemid=107 outlineType="rounded-white" 
width=500 height=350 captiontext="This is demo content" pre=true}

Click me to display The Article id=107 

{ /highslide}

Click me to display The Article id=107

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.

<div id="contenthere" style="display: none;">
<img border="0" alt="Sample image" style="float: left; padding-right: 10px;" />
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. 
 Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris.
 Suspendisse condimentum mi ac tellus.   
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.   
Donec sed enim. Ut vel ipsum. Cras consequat velit et justo.   
Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi.   
Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. 
Pellentesque nonummy pretium tellus.</div>

{ highslide type="html" contentid="contenthere" outlineType="rounded-white" width=400 height=320         
captiontext="This is demo content"}        
     Click me to display content  
{ /highslide}

Click me to display content

• Move

---

• Close

{ highslide type="iframe" url="http://google.com" outlineType="rounded-white" width=900 height=500}
     Click me to display Iframe
{ /highslide}

Click me to display Iframe

{ highslide type="flash" url="images/sampledata/flowers/flash.swf" width=400 height=300 outlineType="outer-glow"}
    Click me to display Flash file
{ /highslide }

Click here to view flash

• MOVE
• Close

WRONG IMAGE LOCATION httt://demo.joomlart.com/extensions16/index.php/j16component/84-sample-data-articles/plugins

Parameter Options General

All parameter options for the Ja Highslide Plugin.

Type: The Ja Highslide typing (img, html, slideshow-caption, slideshow-controlbar, flash, iframe, module, modules, item, ajax)

Event: (click, loadbody). Event is loadbody in the case you want popup open automatically, 'dismissbuton' parameter to set show check box "Not show again" (value is true/false). Value default is click.

outlineType: is stype border of popup (beveled, drop-shadow, glossy-dark, outer-glow, rounded-black, rounded-white). You can add style for border.

captionText: is caption of popup

Loaddelay:is delay time to load show popup highslide (unit ms). It is use in the case event=loadbody.

notshowagain:use in the case event=loadbody. It is time to not open automatically again popup highslide (unit day).

dismissbuton: it is use in the case event=loadbody. Choose show check box "Not show again" (value is true/false).

notshowagaintime: use in the case event=loadbody. It is time to not open automatically again popup highslide when user check to check box "Not show agian"(unit day).

src or url: for image: is path to image directory. Note: you can again config it in plugin highslide manager. Default in images/stories directory.

width (px): width of the popup highslide

height (px): height of the popup highslide. Value default is 200.

Note: Parameters are case sensitive