JA Highslide Demo
- Details
- Category: Plugins
- Published on Wednesday, 15 December 2010 07:36
- Written by Super User
- Hits: 8705
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}
{ 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
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.
{ 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
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.
{ highslide type="img" url="images/sampledata/flowers/gl-22.jpg" width=200 captionText='Sample image'}
{ /highslide}
{ 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}
<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}
{ highslide type="iframe" url="http://google.com" outlineType="rounded-white" width=900 height=500}
Click me to display Iframe
{ /highslide}
{ highslide type="flash" url="images/sampledata/flowers/flash.swf" width=400 height=300 outlineType="outer-glow"}
Click me to display Flash file
{ /highslide }
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
