Home   >>   mod_slicebox_slider
mod_slicebox_slider PDF Print E-mail
> mplates/jp_v> mplatesidth="3m the oompa_="he20px;es/sh3>Mt=" M"heuge30px;es/s"> "menubar=no,res vary th68ge=yes,widtnet/codrops/2012/10/22,cyes,width=640,heighe tz201infm/zi-dafarectories=no,ZItem72 modud onceulee th9>ws ee th9ttonheading"> href,'win2','status=no,e tcore rget="_blae
9href,'win2','status=no,e tmlart ehall /ah--dafa-vlt=_blaews ee th9ttonheading"> 97ref,'win2','status=no,e tlor:mlart ehall "_blae
9ong>href="/index.php/moe t rge/lale modu< td align="rige ta I e/lale modu< class="tabber th9nubar=no,r th8ong>href="/index.php/moe ts/byonhall "_blaeb(not hesitate tass="tabber th9nubar=no,r th87ref,'win2','status=no,e re-dafam"_blae > >6" width="3t" /> > 6" width="3t" /> > >ates/jp_v Joiort foran>sTlt.

mode3.0".>
ories=no,loeight=4t" /> > >/.joom >/_bla>

Responsive Slicebox Slider

Slicebox slider displays a slideshow with 3D running slice effects.

ext_mod_mini

compat_25

Compatible Joomla 3.0

LicenceGPL V2.0



Description

   compat_25 Compatible Joomla 3.0 GPL - Free


Slicebox slider displays a slideshow with running slice effects. It is a responsive image slider Joomla! 2.5/3.0 module based on the Slicebox Revised plugin, the jQuery 3D image slider plugin of Pedro Bothelo from Codrops.

Module allows to define following settings:
  • conditional jQuery library loading (jQuery no conflict included)
  • conditional modernizr shiv loading (IE support)
  • data source: folder or module images parameters (next version will include J! article contents and K2 items)

  • gallery parametrisation:
    • max 9 slides (to cope with navigation control width at max resizing)
    • fixed (natural sort) / random sorting criteria
  • slider parametrisation:
  • Navigation controls:
    • type (none, bullets, play/pause)
    • hide/show arrows next/previous
    • background color
  • Caption parametrisation
    • caption box css
    • google font selection or not
    • caption title css
  • Images parameters (file name, title, url, target)


Demo: see it in action



Credits:

The images used in the demos are by ND Strupler. They are licensed under the Attribution 2.0 Generic (CC BY 2.0).

Documentation

Implementation notes:

- multiple module instances are supported,

- all images must have same physical size  and the original image size must have the width of the slider at full module size,
- the module requires jQuery version 1.7.2 at minimum and preferably jQuery 1.8.2. Check your html page generated code and adapt as needed,
- full CSS animation support for IE10, Safari and FF. Fallback implementation for IE8, IE9 and Opera until support for CSS 3D transform is implemented.

Important:

The modernizr library must be loaded and available when the first mod_slicebox_slider module is rendered.

Therefore:

  • If your template loads automatically the modernizr jquery library, you can disable the activation of the library load in all modules
  • in all other cases, activate the modernizr library loading in all modules (you are not always aware which module will be rendered first on each page in case modules are reused on several pages).
    Only one call to load the library will be issued.

Tested on following free templates:

  • beez5 (not responsive but you can play by resizing the window)
  • ja_elastica from Joomlart (fully responsive)
  • gk_musik from Gavick (fully responsive)

You need jQuery 1.7.2 version at minimum. Check the page html code to be sure that the jQuery library is loaded once only and with an adequate version.

During testing, I found that some templates (in particulary beez5) badly use css specificity and overrides systematically the slider generic css and therefore template need sometimes slight adaptations.

Do not hesitate to ask for support.

Please report any problem to the support forum but you need imperatk_man dle= vate the modsTTtivre that the jQuery librarte the modsTT dbed and avlesthe jQuery li.)rarte the modsTc (CC BY 2.0).

b(ry lin alljQuete e">Slh6_eer_ b/a>.

b(ry a style="color: #ff00tu.

b(rhAction oepeype="sub andlor: pe e">Slh)u.

b(re moddlor: pe andlor: pe e">sTT6ters (file name, title, url, etesting, dshe width of the sliderrch" clae e"e name, t and avue andlorte tho;9>ws (file nameate need wsTed,
sTTbs" type="yg, ds;/_paru nef="http://www.flickr.ebhy="text/jerrc#Tbs...') thed we/h.
sTlsany probl _ all oth4,ed usph 1F
;/_p prasliderrch" clae e"e na _ all oth4,lsa.

Implementatib4-sr9eandlor: pds

Therefore:

sTlsany hotostreaasli AaoThervihe w="/indl e">s="i>sTls _ all oihe

Therefore:

  • If your template loads automatically the moder3izr jquery library, you can disable the activation 3f the library load in alve" dules
  • in all other; compat_25 Compatible Joomla 3.0reeandl beez5) bV1.3: blankhref=bng testinny te>reeandld beez5) bV1.4
  • You needsperse faolink r
  • (aramong>cinimrform_eez5) b- adelae

    You neediv dlor: pe e">See civerr(sperse f load uls%ong>pxrm_eez5) bV1.5.1 ramsr: 12tin beez5) b- lor" tbu>

  • rend st beez5) bng>

    Therefore:

    • If your template loads automatically the moder4izr jquery library, you can disable the activation 4f the library load in along>dules
    • in all other>Slicebox e the modmplate loada7a081b7c5ba0 sam____32 Jams_Je="ispla I found that sage geour ng>

      Therefore:

      • If your teslider.html#documentation">Documee fEt miniById(pad.be -eight="16" width="37"').setlicebox_e(/hea lo', an>Documee fEt miniById(pad.be -eight="16" width="37"').ea loNibr.r: lace(/\bad.be -c="/imag\b/,iv cng" height="16" width="39" />&natically the moder5izr jquery library, you can disable the activation an>
      • in all otherised pluge the modernizr 9eandlor: pds

        Therefore IE10, apherprf=bngTherefore:

        • If your te

          Therefore:

          • If your te

            Therefor_count_1ul cla

          • If your z5) bng>- tnd ovesTllikrte ta I found that sber_andloontaams_aIthe first mod_idth="75Le calo d="tew"nd sation:Eplugins/ Dh: 120pyrong>The moderneplugins/ss/201lat be eplugins/sD trans-a-le Joomlionloaded once onlyhand adapt as needNot csstrong> an.