Caption Slider Extended Tuto / help

[elarifr]

1/ install caption slider extended version like any module
 
2/ add plugin as any module usual

3/ go in admin tool caption slider

you'll have something like the following picture with the list of slide & group with some informations
and ability to
- add group / slides
- modify any group / slide


20111114 - added last caption slider module capslider-v0.1.2 Elari.0.8.3.05.2011 1031.public.zip
20111114 - added capslider-v0.1.2 Elari.0.8.3.06.2011 1114.22h59.public.z ip bg repeat not saved
20120505 - removed capslider-v0.1.2 Elari.0.8.3.05.2011 1031.public.zip (204.83 KB - downloaded 23 times.)
20120505 - added capslider-v0.1.2 Elari.0.8.3.07 (dev) 20120505-11h40.#public.zip
(add new js inline field, allow empty title & content, bug navigation thumbs was always displayed in capslider corrected, a href link removed if no url defined)

[elarifr]

the groups list all common parameter to apply to some slides


groups are ordered by id & have a name that is not relied on the slider output

it display the code to paste in your page to display this slide group

then you have the width & height of the slider main div.
some plugin that are not real slider but only some kind of listing will not use the width or height value

After we have for sliders the size of the caption panel overlay and some offset to position the overlay inside the main div

then we show speed & delay values (if applied in plugin)

then you have the 4 action & information icons

-first one to edit the group
-second inform about CSPM (Caption Slider Page Module) right for user : allow to add slide in this group, user can add slide but need review before publish, can't add slide from CSPM only admin can add slides
- third icon is to duplicate a group
- fouth to delete a group

[elarifr]

the main slides info

slides are ordered by group and by an order weight set in slide tool

for each added slide we have
-a weight value (should be used later to reorder by drag & drop)
-the main picture. if no picture or no thumbs there is a red advice of missing file
-the group name this slide is part of
-if active or not
-and 4 icons for action

-action edit slide: admin as always right to edit a slide, but user can lock content so that no other user can edit
-info content lock right
-action duplicate slide
-action delete slide if not locked

[elarifr]

select to modify or add a group

it show the group edit page

[elarifr]

first we set the group name and the plugin that will be used for this group

[elarifr]

uder we set the slide size

first we set the size (width / height ) of the main div
------> depending of plugin, the width or height can/can not be used

we can also specify some extra css to apply to the main div container
by default it is : border: 0px; margin: 0px; padding: 0px; overflow: hidden;

it is set by the plugin in the demo group installed with each plugin that you can duplicate to make your own setting

under you set the timing parameters of sliding

[elarifr]

now we can set some panel and navigation parameters

depending on each slider plugin some data are used or not
each plugin include a table with the field to be used to disallow the form field
------> but for instance this is not working so all field are avalaible

ruud caption use the caption width height offset to place the caption
you can set the caption color as "#000000" or litteral "black"

there is also a background that can be used. for instance this is twice same field as i have not decided to use a browse to select a bg file / manually write the bg filename or use a select from the media directory that will display all files in /media/slider/background

set the bg repeat-x or -y if you want

and the transparency parameter to apply the the main caption


Under we have a navigation panel parameter for slide that need such parameters like the lofslider
select thumbs picture size, panel size & offset, color, bg, transparency....

[elarifr]

under group tool we can

- set the CSPM option for this group
- set if we display the updated date for each slide (if the plugin use the date)
- set an autostart slide option
- and some extra css that will be added if you wan to override the plugin default css.



maybe i'll add some more features like limit the number of slides to display in a group or some free field that anybody can use has they want

[elarifr]

and we go back to the top of this main group edit

just near the top SAVE button we have a preset select field

ATTENTION : you have to save the group value you want to use or it will not work

so it is only used after editing an existing group not for a new one !!!

clicking on the right icon near the select list will save all the parameters of the group as a file including the server name width height and date

and you can then retrieve these parameters from the select list

it will allow you to make some test of many values
export setting for an other site
use same setting for an other group....

this is a feature derivated from crnogorac081 work

[elarifr]

After setting group parameters you can add / edit slides

there is many parameters

most say clearly what they mean

just under the save / cancel

we set the slide order weight and if the slide is active to be displayed

Under we set the group that this slide will belong to

We then have a file upload that will usually be used for the main slide and the ALT value for picture
we can set a size resize for this slide or keep 0 value to make no change to the file

Under begin the Caption panel
- title and the title link to
- the caption itself in a textarea
- a more text that can be used for a button and the link

And finish to set if you want or not a caption displayed for this slide

[elarifr]

and the navigation part for slider that use a navigation bar (lofslider)

upload the thumbs picture. no resize planned
fill the navigation Title for this slideand a content
by default there is prefilled *30* which is planned to use the 30st ot the caption title and *100* for the 100st of caption text
------------------------------>(this is not working now)

under you have the days selection that will display slide only the selected days
and it seems i have lost somewhere the date start / end that was also planned
------------------------------>(this is not working now, i don't like the DB field i used and will change this to use only one byte to set all days)

Finally we have the user lock report for this slide including created date and owner, last change date, lock by which user, ( and if reviewed for later )

[elarifr]

back to the top of slide edit we have the lock management

we can set the slide open for content edition by anybody else
with the ability to set if somebody else can lock the slide

or set the content locked so that nobody else than the own can edit content

[elarifr]

reserved for slide review

[elarifr]

check down for plugin_mydemo



plugin dev


plugin are just snippet that return a content to the showslider function

Code:

$slider_plugin = '/modules/capslider/snippet/plugin_'.$group_model_call.'/'.$group_model_call.'_plugin.php';
if (!file_exists(WB_PATH.$slider_plugin)) {$slider_plugin='/modules/capslider/snippet/plugin_capslider/capslider_plugin.php'; }
if (file_exists(WB_PATH.$slider_plugin)) {
//echo $slider_plugin ;
$slider_plugin_output="";
require(WB_PATH.$slider_plugin);
echo $slider_plugin_output;

a "newname" plugin is packaged like a module with a info.php
it must be installed in the /modules/capslider/snippet/plugin_newname/

and the plugin itself must be named newname_plugin.php


so the info will look like

Code:

$module_directory = 'capslider/snippet/plugin_newname';
$module_name = 'CaptionSlider Plugin newname';
$module_function = 'none';
$module_version = '1.x';
$module_platform = '2.8.x';
$module_author = 'newname athor name';
$module_license = 'GNU General Public License';
$module_description = "Some newname information. Capstion Slider need to register jquery, if you have no display check that you have in your template index.php the following line : register_frontend_modfiles('jquery');";

as you can see i have added
$module_function = 'none';
this is only because of CSPM page module when installed it will allow to add a page CaptionSlider but no need to have the list of all plugin installed as page module


The install.php will just install a demo group for using the newname plugin and set the usefull default value you want

Code:

$table = TABLE_PREFIX .'mod_capslider_groups';
$database->query("INSERT INTO ".$table." (`group_name`,`group_model_call`,`group_page_access`,`delay`,`speed`,
`width`,`height`,`panel_color`,`panel_bgx`,`panel_bgy`,`panel_width`, `panel_height`, `panel_bottom`, `panel_left`, `panel_opacity`,
`thumbs_width`,`thumbs_height`,`navig_color`,`navig_bgx`,`navig_bgy`,`navig_width`,`navig_height`,`navig_left`,`navig_bottom`)
                                  VALUES ('demo_newname','newname','0','6000','3000',
    '980','340','purple','1','1','300','100','50','0','0.80',
    '70','25','grey','1','1','360','32','530','20' )");

please note that the `group_model_call` is only newname not plugin_newname !!!

[elarifr]

the install will later provide some info about field usage in slide modify

[elarifr]

check down for plugin_mydemo




the plugin_newname.php

this is the file that produce the code to display

we first chek that we have a numeric group to display
we only accept a numeric value to limit risk of injecting some hack

Code:

if(!isset($group) && !is_numeric($group)) {
return "Error - No Sliders Group";

read the db

Code:

$btable = TABLE_PREFIX .'mod_capslider_slide';
//need to add date check verification to display slide
//need to add language check verification to display slide
$banner_query = $database->query("SELECT  * FROM ".$btable." WHERE `active` = 1 AND `image` <> '' AND `group_id` = '".$group."' ORDER BY weight");

at this stage you can define/calculate some extra value to be used later in the css

you can check the existing plugin to see that we have a content construction variable
that should be different from one used in other plugin. if you have two slide in same page that use same variable they will collapse

we set a jquery variable that include the code of the plugin you want to use

Code:

$js_code = '
<script type="text/javascript" language="javascript" src="'.WB_URL.'/modules/capslider/snippet/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="'.WB_URL.'/modules/capslider/snippet/js/jquery.easing.js"></script>
<script type="text/javascript" language="javascript" src="'.WB_URL.'/modules/capslider/snippet/js/lofslider.script.js"></script>
<script type="text/javascript">
$(document).ready(function() {[

extra code....
/code]


we define the css inline

[code]$css_code ='
/* Add the original css name : featureList.css */
/* Add slide css after this part */
<style type="text/css">

you css code will use some php value that have to be defined before

and will finish by adding the extra css defined in goup

Code:

/* this part is added from slide group css */'
.$slide_css
.'</style>';

then we finish to produce the output to return
that begin like this

Code:

//By licence terms you are not allowed to remove the following line including comment and url to websitebaker.org & accedinfo.com
$slider_plugin_output  = '<!-- http://websitebaker2.org CaptionSlider by Ruud - Upgraded by Elarifr http://accedinfo.com -->';
$slider_plugin_output .= '<!-- Begin Slide Plugin Call : '.$group_model_call.'_plugin.php (group:' .$group.') by http://accedinfo.com -->';
$slider_plugin_output .= $js_code;
$slider_plugin_output .= $css_code;
$slider_plugin_output .= '<!-- SLIDER -->';
$slider_plugin_output .= '<div id="slider'.$group.'" class="newnamestyle" style="width:'.$width.'px;height:'.$height.'px;overflow:hidden">'.$extra;

and will finish by

Code:

$slider_plugin_output .= '</div>';
$slider_plugin_output .= '<!-- END SLIDER -->';
$slider_plugin_output .= '<!-- End Slide Plugin Call : '.$group_model_call.'_plugin.php (group:' .$group.') by http://accedinfo.com -->';

we can now return the output to be displayed

Code:

return $slider_plugin_output;
?>

[/code]

[elarifr]

here is a plugin_mydemo that can help to port any jquery to caption slider or create you own plugin

it does not include any jquery js

it will just display a list of all raw value that you can manage as you want
 
updated to display also group value and the background repeat -x -y
need capslider 0.8.3.06 to properly manage bg repeat

[elarifr]

new plugin offers_col01b


the badge is selected from navigation_bg and use navig width height (best 100px)
picture is from the thumbs (best same 100px)

use panel_tilte + link @ top
use panel_more + link @ bottom
use panel_caption as main text
use navig_title as badge text

[Roych]

Hi,

I'm having some problems creating lofslider01. I have tried everything on this forum and still couldn't get it to work.

I would like to create this one (the first one)
http://climatisation-gilbert.fr/pages/demo-slider/lofslider01.php

Is there any tutorial or. I'm not a coder but understand some.

Do I have to instal lofslider in jquery_admin also? If I add the jquery function slider dissapears.

I installed all of the modules here and still can't get it.

Wich of these hundred modules are the right and working ones?

I really like the module and just what I need, so anyone. 

Thank you for your help

R.

[elarifr]

Firs install last capslider at the beging of this thread

then install the plugin

removed plugin_lofslider01. 20111123.public.zip
updated plugin_lofslider01. 20111124.public.zip (html code displayed in page bug)
removed plugin_lofslider012 0111124.public.zip (520.66 KB - downloaded 2 times.) typo in lof_slider01
updated plugin_lofslider01. 20111130.17h13.zip

in the zip you'll find some sample picture

no need to install jquery_admin but you must have jquery loaded in your template

in capslider admin tool you'll have a lofslider01 demo group.

first duplicate this demo group

add some slide to this group (look in the zip there are some sample image) or take the one from lof

copy in the group section the code to paste

go in a page add a code section and paste the code provided in the capslider admin group section

please send me a link to see how it works / or not

elarifr

[Roych]

Thank you very much
it's working now but there is some text above it

/* Add the original css name : featureList.css */ /* Add slide css after this part */
border: 0px; margin: 0px; padding: 0px; overflow: hidden;

How do I fix this?

And one arrow is missing next to thumbs.


here is the lik to my test page.

http://www.atelierindevin.com/

Thank you.

[Roych]

Hi

Anyone knows how do I get rid of the text above my slider? I tryed to look for the css file but couldn't find it, any idea?

Text above the slider

/* Add the original css name : featureList.css */ /* Add slide css after this part */

And right arrow is missing in thumbs preview, doesn't mather how many slides do I add. How do I fix this?

my test page:
http://www.atelierindevin.com/pages/home.php

Thank you

R.

[elarifr]

roych please check your pm i had send you a message to tell you to use the updated 20111124 plugin


i have also corrected a typo mistake that hide the previous right arrow

so use the lastest plugin_lofslider01. 20111130.17h13.zip

elarifr

[frankeye]

Hi elarifr,
I´ve tried your new capsslider module, an it works. I`m not a programmer but a well known user - it was very tricky for me to get the capsslider to work....it very important to go one step after another in your post ...

With websitebaker2go 2.8.2 and only my test-template it all works fine, my homepage online with WB 2.8.1 there are some difficulties, and I don't  know if its the capsslider-script in my test-template, or is it the problem, that I use js in my other templates.
The caps don't slide very well, often the first slide is displayed two or thee times after another, than sometimes switching very fast and non rolling-effekt of the text .... http://www.dieoptiker.de/pages/home/test-coffeeoptix.php

My second question: please look at this link: http://www.to-eyes.de/mustermann/ - is it possible to use CSPM for an looking like the gallery under the navigation-bar. Can I use your my_demo to create it?

Thanks for your great work
frankeye

[elarifr]

thank to know it works for you

should be also some issue with the order js are loaded, use firebug and check the files loaded

try to clean your cache i have add some issue with that... that make slide not very smooth

concerning the other slide it use nivo slider...
yes you can use the my_demo squeletton to make a nivo-slider.
grab the nivo-slider plugin http://nivo.dev7studios.com
first change the name of the plugin my_demo to nivo-slider add css / html code and only at last add the js code

let me know ...



ps i had updated capstion slider for an optical shop http://linoptique.com