Slide Viewer & Text Arrangement

lemathieu A / 2009-10-25 22:32:53   

I transform the Slider from Arsondpi to the SliderPro
Based on this plugin and the SlideViewerPro javascript, it's more customisable, has thumbnails and can be automated.

The exhibit.sliderPro.php comes with an automatic version, the exhibit.sliderProAuto.php that you will install like all the other plugins, in ndxz-studio/site/plugin.
This plugin works better when all your images have the same height an width. If not he will take the bigger size as the "norm".

All this elements are in the sliderPro_elements folder :
1) the latest jquery framework (updating jquery plugin means that you're gonna loose thickbox as an exhibition method)
2) jquery.slideViewerPro.1.0.js
3) jquery.timers.js
4) and of course the plugins, sliderPro and sliderProAuto

You can download it here.

It has been tested on Mac on Firefox, Opera and IE8.
Let me know how you feel it !

sakisan / 2009-10-25 23:54:05   


1- you made a mistake here :
// images
    $s .= "< div id='img-container'>\n";
    $s .= "< div id='slider' class='svw'>\n";
    $s .= "< ul>\n";
    $s .= $a;
    $s .= "< /ul>\n";
    $s .= "< /div>\n";
    $s .= "< /div>\n\n";

as it's written on the sliderpro website we must have a svwp class not a svw then during the loading your images won't appear as a list as with your file.

2- I don't see where you're calling the css file you give in the css folder?
On my side, when i did it with the float left plugin i put :
$exhibit['lib_css'] = 'svwp_style.css';

Then i didn't add the css in the dynamic functiun inside the plugin php (why do you have a css file in a folder and put the css in the php?).

3- I noticed another mistake in the js (line 26):
jQuery("div.svwp").prepend("< img src='' class='ldrgif' alt='loading...'/ >"); //change with YOUR loader image path

If you tell to people to put the loader image in the folder "files", the adress must be yoursite/files/svwloader.gif

4- i don't see the utility to publish 2 plugins when there are a lot of options to customize the slideshow from only one plug file.
why don't you let all the options with the comments?
So everyone could get all the customization's benefits :

galBorderWidth: 0,                     // the border width around the main images
        thumbsBorderWidth: 1,                     // the border width of each thumbnail. Note that the border in reality is above, not around
        easeTime: 750,                             // the time it takes a slide to move to its position
        asTimer: 6000,                             // if autoslide is true, this is the interval between each slide
        thumbsBorderColor: '#ffffff',             // the border color of the thumbnails but not the current one
        thumbsActiveBorderColor: '#00cccc',     // the border color of the current thumbnail
        thumbsRightMargin: 15,                     // the distance of each thumnail respect to the next one
        buttonsTextColor: '#666666',             //the color of the optional text in leftButtonInner/rightButtonInner
        buttonsWidth: 10,                         // the width of the prev/next buttons that commands the thumbnails
        thumbs: 6,                                 // the number of visible thumbnails
        thumbsPercentReduction: 10,             // the percentual reduction of the thumbnails in relation to the original
        thumbsVis: false,                         // with this option set to false, the whole UI (thumbs and buttons) are not visible
        leftButtonInner: '&larr',                 //could be an image or an escaped char
        rightButtonInner: '&rarr',                 //could be an image or an escaped char;
        autoslide: true,                         // by default the slider do not slides automatically. When set to true REQUIRES the jquery.timers plugin
        typo: true,                             // the typographic info of each slide. When set to true, the ALT tag content is displayed
        typoFullOpacity: 0.7,                     // the opacity for typographic info. 1 means fully visible.
        shuffle: true                             // the LI items can be shuffled (randomly mixed) when shuffle is true

5- I'm a noob and learning to use php and js since a use indexhibit (something like 2 weeks ago) so i don't konw the utility of tooltips, is this js must be loaded here? what is it for?

6- a link to see it in action could be welcomed

7- your name is well written in the @author ;-P

I hope it could help you, but i think it'll be better if any real php and js skilled people could have a look before we share our files with everyone.

lemathieu A / 2009-10-26 08:07:35   

it's here for that : inputs from everybody.
Feel free to modify it (as I'm not a real php and js guy neither)… And to share it back to the community. I wrote it in regards of the progress of this thread, without possibility for really non coders (as 98% on this forum) to grab it.

1/ cool you found it !

2/ I've done it as it was in the "normal" slider

3/ yeah it's because I've done it on a test indexhibit site. And I forgot to change it.

4/ sure

5/ …

6/ oh yes !

7/ Shameless


arsondpi / 2009-10-26 08:21:10   

Thanks Mathieu! A new exhibition format!...

Sakisan tooltips are these yellow boxes with text defined in html by the titleattribute. Javascript tooltips is a high end version of this -you can style them, add effects etc. Google it!!!

I don't think new ideas and plugin should be double checked - they can be "works in progress - use at your own risk". While on the learning process it's unavoidable to make mistakes. You try things - they work or they break. It's on the makers discretion to do his best before the first release, and then its up to the rest of us to pitch in and keep evolving it...

Here's a simple test.

I would edit the titles/captions to be set under the images. And maybe an on-click advance image feature...

lemathieu A / 2009-10-26 12:37:00   

hey pindaros I like your "sponge bob fucker" ! Is it you ?

And for the "n-click advance image feature", I agree with you but didn't know how to…
Shame on me.


sakisan / 2009-10-26 14:00:00   

Hello Arson,
thanks for tooltips. I looked in google, but i didn't understood the necessity of this js in the plugin. I don't have enough knowledges about js and i hearded that was better to load only the usefull. :-$

Anyway, here are my files for the sliderpro floatleft as i did it in the last link you saw last week.
As you said, it's "work in progress"! It works for me on Firefox and safari but i didn't check it on IE.
Thanks in advance to any php or/and js skills to optimize it!
Especially about the on-click advance that i would appreciate a lot as well :-P

About lemathieu's files you put in simple test, don't forget to change the svw class on svwp class. At the moment, the images are displaying as a list with bull-points during the loading.

2- don't take it bad, i'm learning all this stuff exactly as you! I hope it's always great work to participate and tried to do it. You copied-pasted some things missing some logical ways to do i guess.
Normal slider doesn't use an external css. Slidepro do it and you can have a look on the exhibit.thickbox for this.

Enjoy and make it better ;-)

weenuh24 / 2009-10-27 16:39:00   

Is it possible to separate the caption from the image and move it below the thumbnails? Working on a photo site and that is a request from client. argghh! not so savvy with javascript... help!!! :)

arsondpi / 2009-10-27 16:49:26   

Everythings possible - client project??? cmon... read the forum rules. This is a free forum...

weenuh24 / 2009-10-27 18:20:49   

sorry! have just been searching all over the place!! wasn't thinking. thanks :)

doki / 2009-12-30 13:12:42   


i have a questions. How set numbers above the slider?
Here is numbers bottom and i need numbers [1 2 3...] set in top. Thx and sorry for my english : )

Lenzznel / 2010-02-07 15:20:46   

Hi all, Thanks for the great slider.float.left exhibit. I got it running and modifyed it to have the text below the slidewhow (here), that's what I was wishing for!

There's still one bug which I cannot resolve, it's always showing:

Notice: Undefined variable: s in /customers/ on line 66

addressing this line:

// images
$s .= "< div id='slider' class='svw'>\n";

What's the undefined variable here? Any idea?

Lenzznel / 2010-02-09 12:16:29   

Alright, the slideviewer functions, just this little thing with the undifined variable s.

Now I was opening the page in IE and the slideshow and text were completely placed somewhere else. That's the page: Example

Does it have something to do with float left? Anybody knows how to avoid this?

Lenzznel / 2010-02-09 14:58:41   

Now I switched off the Error notice for php and yea, everything works fine. The error might be just hidden and I hope it just doesn't appear somewhere unexpected. It even works in IE!

farwest1 / 2010-02-22 16:55:37   

Ok, I am trying to set SlideViewerPro up. I've installed all of the files from the jQuery site. I modified the (div id="basic"....) section so that it finds my img files. But they don't appear on the opening page (Incidentally, if I switch to the Grow theme, the images do appear in a vertical line.) What appears on my homepage instead of the imgs is this code:

$(window).bind("load", function() {

I've also tried to add:

galBorderWidth: 0,
autoslide: true,
thumbsVis: false,
shuffle: true

...but then the code appears on my homepage rather than an image.

Between the "head" tags of my index.php file, I've inserted the div id="basic" paths to my images and the code above, as well as the style sheet links to svwp_style.css.

I think my issue is where to put various pieces of code. For instance, does the code I show above go in between the "head" tags of index.php or somewhere else?

Hopefully this is enough info to help me troubleshoot my problem. I'm a noob at this, so any help would be appreciated.

rickykappa / 2010-02-22 19:42:29   

you didn't post your page...

Rube / 2010-06-13 20:43:47   

i have installed slideviewer pro on a site i've been working on:

It works fine except on any version of internet explorer where i get no images what so ever. Any ideas?

icraigepps / 2010-06-23 21:02:37   

Hi Everyone,
I've been building a site for a couple of weeks and following tips from the forum with loads of success, but I'm stuck on an issue with captions.
I'm not terribly adept at coding, but always willing to problem solve.

I would like to separate the captions from the image so that the captions are underneath rather than over the image.
Is this really complex for a "moderate" beginner? can anyone point me in the right direction.

I don't have the site up yet, as I'm using Wamp server.


beaplanb / 2010-07-26 15:03:54   

@ all
Hi everyone, i've been reading many threads trying to figure out a way to show the Slider exhibit correctly on IE 6,7 & 8, but no luck yet.
In one thread they posted a link to this web:
In this case the slider is working perfectly on IE for some reason... Does someone have any clue why that is?
The web that i'm working on is on this link:
(still working on it, so only proyect 0000 has images...)
Many thanks!


dansk / 2010-08-10 12:23:51   


I'm seem to be having the same problem with IE. No pictures at all shown on Internet Explorer...!

jkm / 2010-08-10 12:39:31   

Hi Dansk.

Always attach a website link, otherwise we can't really check out your site.

@ beaplanb

You are using slideviewer version 1.1, and the working link you posted uses 1.2, so maybe try upgrading to the newest version.



dansk / 2010-08-10 21:35:09   

Sorry about that jkm.

It's at

I'll check which version I'm using too, hopefully its just that.

dansk / 2010-08-10 21:41:25   

Sorry about that jkm.

It's at

I'll check which version I'm using too, hopefully its just that.

enriquevw / 2010-09-08 21:08:33   

Ok.. so I'm sorry I did not read page 2, I might have to start over because I ended up transforming the regular slide viewer plugin to slide viewer pro my self, it was a pain in the neck but I managed.

There's my slide viewer pro in action...

Does anyone know why the images are a bit offset and why each image that passes it increases?

enriquevw / 2010-09-08 22:41:36   

Oh and the slide viewer makes one of the images dissapear, ie: the first one in every set I use the slide viewer.

fafa007 / 2010-09-19 16:49:36   

My question concerns the positioning of the legend and the title of the image.
I'd like to have these two texts on the right side of the image.
With the split and "position: absolute;" in the css I can move, but the text eventually encroach on the following image.
Example here
Is there a solution to enlarge the display of images (image size = 680px present) and allow the legend to appear on the side?

Thank you for your suggestions.

fafa007 / 2010-10-05 12:57:32   

In fact an equivalent to :

$heightforcaption = $height + 30;

in sliderFloatLeft line 60, but for the width.

Any suggestion to adapt this code?

Josie / 2010-10-19 22:52:41   

Hi there

I am using slideviewer and I have floated the numbers on the right but don't know how to change the order. Can anyone help.

This is my site


Josie / 2010-10-19 22:55:03   

Hi there

I am using slideviewer and I have floated the numbers on the right but don't know how to change the order. Can anyone help.>site


Josie / 2010-10-19 22:57:37   

Sorry link is Site

G470 / 2010-10-20 07:45:48   

@ Josie you gato a simple css problem. Easy to fix ;) just use this:

  1. .stripTransmitter ul {
  2. float: right;
  3. list-style-type: none;
  4. margin: 0px;
  5. padding: 0px;
  6. position: relative;
  7. }

.stripTransmitter ul li {
float: left;
margin: 5px 5px 20px 0px;
width: 20px;

that will do the trick.

Josie / 2010-10-21 01:38:50   

You are wonderful - thanks so much. I just didn't know enough about css.

ele / 2010-11-12 17:05:00   

Hello everyone... does anyone know if there is a slideviewer version 1.2 to download?
I'm using the FloatLeft plugin but its giving me problems with Explorer and slide show doesn't show!
Need help!
thank you

sarahd / 2010-12-17 10:58:47   

Hi. I want to use sliderpro, but want to get rid of the thumbnails and just have numbers. Can anyone help me with this?
Here is the site:


alucidwake / 2011-02-02 10:08:34   

I'm having issues getting my image titles & captions to display with SliderProAuto below the image (or even at all!) I just ran through this thread and tried a bunch of things but I couldn't get it to work.. Can anyone point as to how I should go about solving this? It's gotta be somewhere in here... No?

  1. foreach ($pages as $go)
  2.     {
  3.         $title         = ($go['media_title'] == '') ? '' : $go['media_title'] . ' ';
  4.         $caption     = ($go['media_caption'] == '') ? ' ' : $go['media_caption'];

        //$x = getimagesize(BASEURL . GIMGS . '/' . $go['media_file']);

  1.         $a .= "n<li><img src='" . BASEURL . GIMGS . "/$go[media_file]' alt='{$title} {$caption}' height='{$height}' width='{$width}'/></li>n";
  3.         $i++;
  4.     }


Thank you so much

alucidwake / 2011-02-02 10:14:51   

I'm having issues getting my image titles & captions to display with SliderProAuto below the image (or even at all!) I just ran through this thread and tried a bunch of things but I couldn't get it to work.. Can anyone point as to how I should go about solving this? It's gotta be somewhere in here... No?

  1. foreach ($pages as $go)
  2.     {
  3.      $title         = ($go['media_title'] == '') ? '' : $go['media_title'] . ' ';
  4.  $caption     = ($go['media_caption'] == '') ? ' ' : $go['media_caption'];
  1. //$x = getimagesize(BASEURL . GIMGS . '/' . $go['media_file']);
  1. $a .= "n<li><img src='". BASEURL .+GIMGS . "/$go[media_file]' alt='{$title} {$caption}' height='{$height}' width='{$width}'/></li>n";
  3. $i++;
  4. }


Thank you so much

alucidwake / 2011-02-02 10:16:09   

strange double posting. my apologies

olliequinn / 2011-02-18 14:47:55   


Has anyone had any luck sorting out the problem with Internet Explorer?

I'm building my sight and would love to have the SliderPro Auto on my home page. It's working perfectly on Firefox/Safari/Chrome, just not IE.

Site is here: chuuko
(slider will not be viewable in IE if you click link).

Any help sorting this out would be awesome, thanks!

blameme / 2012-01-13 10:35:10   

Howdy, a buddy needed this working IE so I went through some of the other sliders that worked okay and found a fix, around line 70 of exhibit.sliderProAuto.php there is this line commented out :

  1. //$x = getimagesize(BASEURL . GIMGS . '/' . $go['media_file']);

you just need to change that to:

  1. list($width, $height) = getimagesize(BASEURL . GIMGS . '/' . $go['media_file']);

Seems to work fine in IE7 and 8

leonekn / 2012-02-02 12:30:35   

hi again,
i'm playing with the SliderFloatLeft plugin and i can't seem to get the text to show on the right side. it's on the bottom, i know it's because of my image size being at 600x800. is there a way to widen the area? so that i can fit it? my images being smaller than 600x800 looks so uber tiny so i'd like to keep it at these dimensions.

where do i change the width of the content area where the slider and text column are? i'd like to go wider that 800



leonekn / 2012-02-02 12:38:58   

should i be doing something with the image container? or the strip viewer? or do you recommend me just changing my image size.

leonekn / 2012-02-02 13:03:11   

nevermind, i'm playing with the dimensions of the wrapper!

leonekn / 2012-02-02 13:43:11   

bummer! does anyone know why my images are blending together? the first one is centered perfectly and then the last few images are bleeding into each other or getting squished into the window.

this is what i've done:
opened a canvas that is 600x600 and 'placed' my images onto the canvas so that the dimensions will always be 600x600 no matter what size the image is. it worked before, but now it's not.

check out Sculpture/Search for Lost Time

rickykappa / 2012-02-02 14:11:45   

the last 4 images are scaled by the browser to 600x400px or 400x600px.
watch the html source of your page and you'll see they are forced to it.
hope this helps...

leonekn / 2012-02-02 14:24:16   

ok i'll do more research on how to fix this.

phew, this is never ending, no wonder my friends charge what they do to build sites for other people... and i'm using prebuilt stuff (thankyou) !

Grazie, signore, per l'aiuto

rickykappa / 2012-02-02 14:39:07   

prego, di niente.
ciao ;-)

Leetomic / 2012-03-27 14:10:06   

Hello, I downloaded some sliderpro, sliderpro auto etc online.
Basically, many of them are working well in Safri and chrome.
BUT the thing is that most of them named Slider something are not working in IE(internet explore). I try to find a solution but I haven't seen a solution or slider theme that works well in safari, chrome and IE. When I see some websites built by like Cargo or something, The theme such as a slider is working well in many different browsers.
is there someone who can let me know the slider theme that works on IE,Safri and chrome at the same time??

Here is my site: Webpage

Example here: When you go to my main page, I am using a sort of slider theme. it's working well in Chrome,Safri but not in IE.

Leetomic / 2012-03-27 14:13:45   

Here is my site: www.leetomic.comWebpage

maviveloso / 2012-06-12 06:09:18   

hey lemathieu,
do you have any suggestions on how to fix the problem with thickbox exhibit?
i downloaded yours slideviewer -which are really really nice, thanks a lot for sharing with us - and according to what you said, thickbox don't work.

it wold be very nice have it working also



my site:

This thread has been closed, thank you.