Slide Viewer & Text Arrangement

rachelcolecannon / 2009-09-29 21:31:43   

Hello!

I'd just like to say how much I love Indexhibit! I've learned so much about code since using it. I'm currently working on a website and I've come to a roadblock.

I'm using the Slide Viewer (which is beautiful, by the way) to show the pictures, but I wanted the Slide Viewer to be on the left, and the text be aligned beside it on the right.
It'd look like... (pardon my rough "drawing"):

[menu] [slide viewer] [text]

It now looks like:

[menu] [text]
[slideviewer]

I was thinking it could be changed in the plugin "exhibit.slideViewer.php", but I'm just not sure...
Any suggestions?

Here's an example of a page I want to work that way.

Thank you!
Rachel

Vaska A / 2009-09-29 21:45:34   

Did you make this exhibition format? I didn't know somebody had done this with Slide Viewer.

rachelcolecannon / 2009-09-29 21:48:57   

I'm not quite sure what you mean. I got all the files off of this thread. Then I just played around with the .CSS file to customize it. But I'm glad you think I could customize something that complex! :)

Rachel

Vaska A / 2009-09-29 21:52:00   

Haha...wow...didn't even remember that one.

I'm not sure how Slide Viewer will react if you give it a float 'left' and then float your text in a div at the left as well. You will just have to try it.

The limitation here will be that your images will need to be less wide.

So, give the container for the text (maybe you will need to add one) and the container that holds the images a fast float left and see what happens...

;)

rachelcolecannon / 2009-09-29 21:53:59   

Thank you! I'll try that very soon, but have to run out and grab some dinner. Stomach calls.

Hope it works too! [fingers crossed]

Rachel

lemathieu A / 2009-09-30 20:29:16   

Hey eerybody!

It's a new (for me) format that I would like to use, but I don't understand why it mess my logo placement…
See it in action here.
This page is valid, I don't get why it couldn't work.

Somebody?

Vaska A / 2009-09-30 20:32:15   

On my laptop I can't even get to the controls. Are there controls down there?

lemathieu A / 2009-09-30 20:45:14   

yep, but I don't put the multiple langage at this time… too much text, not enough margin in the Slide Viewer css…
You can see it now. I erase some text.

lemathieu A / 2009-09-30 20:50:21   

oh! and my slide viewer… is not sliding.
: (

benhorinb / 2009-10-01 07:52:24   

looks like you didn't add jquery.cycle.all.js to your index.php file?

lemathieu A / 2009-10-01 08:14:00   

corrected…
but that didn't do the trick.
And he don't have it, and this plugin works on his site.

btw, thanks to you.

benhorinb / 2009-10-01 08:28:52   

sorry my mistake, the plugin adds it automatically, you dont need to do it...
the other thing i can think of is your jquery version. on your site its 1.2.6, and on the other one 1.1.2

arsondpi / 2009-10-01 09:00:33   

lemathieu do me a favour and comment-out using

  1. /* ----comment---- */

in your jquery.slider.css.
// is not right for css. Also check this:

  1. .stripTransmitter a:active; {...

A semicolon escaped from the curly brackets!
Try that and see if it works...Although I pretty sure it has to do with javascript...

arsondpi / 2009-10-01 09:14:09   

ok you also need to add easing attributes in your js...

  1. <script type='text/javascript'>
  2. $(window).bind('load', function() {
  3. ¬†¬†¬†¬†$('div#slider').slideView({ 
  4. ¬†¬†¬†¬†easeFunc: "easeInOutBack", 
  5. ¬†¬†¬†¬†easeTime: 1200 
  6. });  
  7. });
  8. </script>

Finally in your index.php, move the #logo_topleft just after the #wrapper.
It will appear where you want it (cmon man - semantics!)

arsondpi / 2009-10-01 12:24:51   

Mathieu the slider caught my attention and based on the slideshow plugin I made the slider plugin.

You will need to upload:

1) the latest jquery framework
(updating jquery plugin means that you're gonna loose thickbox as an exhibition method)
2) jquery.slideviewer.1.1.js
3) jquery.tooltip.min.js
4) jquery.easing.1.3.js

Of course there is a lot of things one can customize - from the easing effects to all sorts of css (note that I stripped down a lot of slideViewers css so it's ready for your ideas ;-) )

It works on a test... Although I can't seem to spot why the jquery tooltip is not working (I get the titles / captions via normal tooltips)... Any ideas anyone?

edit - I just noticed somebody did the same thing in another thread... :-D :-D

arsondpi / 2009-10-01 13:13:59   

ok - once you upload all of the above try out this modification (image on the left text on the right).
It's got images on the left and text on the right.
Attention though - all images have to have the same size... (haven't got around how to insert $width and $height into the html+css part of the php file)...

lemathieu A / 2009-10-01 13:26:34   

Thank you very much Pindaros !
I'll give it a try asap.

lemathieu A / 2009-10-02 18:07:18   

This is just so great !

Thanks a lot man, really.
It's a fun one.

arsondpi / 2009-10-02 20:35:19   

ha! your server is down as I write this!

lemathieu A / 2009-10-03 10:01:57   

oh sh#t !
don't know what's hapening…
waiting for my host's answer.

I hate when I don't understand…

lemathieu A / 2009-10-06 17:00:19   

ok, everything work again…

so, again, a big thanks to Pindaros for creating that.
If somebody wants to see it in use…

I just seen that image changes on the click also !

arsondpi / 2009-10-06 17:39:31   

...yes - I forgot. Click and advance is something nearly everyone likes...

jdemetrician / 2009-10-06 23:29:45   

Hey everyone,

I have been following along this thread and the thread it originated from and I absolutely love this plug-in. However I'm having a lot of difficulty getting it to work (it won't slide at all to the other image). Any pointers? I really need some help.

This is my site

Please don't judge I am incredibly new at this and I just started building my site.

Thank you in advance.

jdemetrician / 2009-10-06 23:41:26   

Oh sorry

jdemetrician / 2009-10-06 23:42:38   

http://www.jdemetrician.com/index.php?/identity/aefag/#

jdemetrician / 2009-10-07 04:54:23   

I just got it working! This is great thank you so much for posting the links for the files and sorry for the necessary posts haha

jdemetrician / 2009-10-07 04:56:07   

...sorry for the UNecessary posts haha

matski / 2009-10-12 15:48:14   

I've been frantically trying to get something working with text on the right-hand side of the images. By a process of elimination I realised I'd probably need to dig into the PHP to get it working and wasn't really prepared to do it. So thanks *so much* arsondpi for this plugin. I hope it becomes an official one soon.

I'll post my site up in this thread once I get it finished!

Thanks again...

sakisan / 2009-10-21 01:01:50   

Hello,
i'm looking for customize my pages under sliderfloatleft.
I would like to display the title and the caption of each image (if possible under the text in the right part). I tried to put one div more with the elements i want and even when i arrived to get this div i don't know how to call the title and the caption from my db. One another hand, i'm not sure that the div could be refreshed after clicking on an image...
Then, it will be perfect if i could get my elements on the right under the text, but even get them somewhere could give me a smile back!
So after a lot of research i think it could be something to do in this part of my exhibit.sliderFloatLeft.php :

  1.     // people will probably want to customize this up
  2.     foreach ($pages as $go)
  3.     {
  4.          $title         = ($go['media_title'] == '') ? '' : $go['media_title'] . ' ';
  5.          $caption         = ($go['media_caption'] == '') ? ' ' : $go['media_caption'];

You can see an exemple here : http://tinyurl.com/yhjtjjg
For the moment i can't display any of title or caption :-(

Thks a lot to give me the right path! I'm not used at all to practice php codes, i learnt a lot since i'm using it but be gentle to be pedagogical ;-)

arsondpi / 2009-10-21 13:33:43   

I've updated the sliderFloatLeft plugin...
It seems I did this (title + caption) but forgot to upload it.
You can have control over title and caption via css...
Check the code to see how it's done...(it's a also a simple example of how variables work...)

sakisan / 2009-10-21 16:03:02   

Thks a lot arsondpi,
i loaded your updated plugin but it seems that's increasing a lot the loading time for my pages and makes some
"Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request."

When i arrived to load the page i still can't see the title or the caption :-(

Can i see it in action anywhere?

lemathieu A / 2009-10-22 08:53:20   

It works great for me (both versions).

sakisan / 2009-10-22 09:40:26   

Bonjour lemathieu,
peux-tu me donner un lien?

sakisan / 2009-10-22 10:07:27   

@lemathieu
http://www.hmplus.net ?
parce que je n'y vois pas de page en slider float left...
et ta page slider n'a pas de titre ou caption affichés en fonction des images...
sauf erreur de ma part
merci pour ton aide
p.s.: les pages pub et webdesign s'affichent sans aucun contenu chez moi

Doctor_Osimo / 2009-10-22 12:29:54   

@sakisan

I tried to use SliderLeftFloat but couldn't get it to work. Guess it has been a js problem… don't know really…

but i could edit the Slider to display caption and title: have a look

  1. all you have to do is put this
  2. < h3 class='title'>{$title}< /h3>< p class='caption'>{$caption}< /p>
  1. in line 61 of exhibit.slider.php in front of the image tag:
  2. $a .= "n< li>< h3 class='title'>{$title}< /h3>< p class='caption'>{$caption}< /p>< img src='" . BASEURL . GIMGS . "/$go[media_file]' alt='{$title} {$caption}' height='{$height}' width='{$width}' />< /li>n";

If you copy & paste the code don't forget to delete the spaces in the html tags („< li>“ etc.)!

then you can easily access both title & caption with CSS

sakisan / 2009-10-22 13:16:43   

@Doctor_Osimo
a billion of thanks!!!!
for the first time i can see the titles and the captions, it looks to be a right path to do so i'm working on it :-D
by the way, it seems to work on my sliderfloatleft

arsondpi / 2009-10-22 13:24:43   

Guys it's working in my server... make sure you upload:

jquery.tooltip.js
jquery.slideviewer.1.1.js
jquery.easing.1.3.js

-----

Doctor_Osimo / 2009-10-22 13:36:00   

@arsondpi
yes, these files are in my js folder… perhaps you see the problem, here is the link:

SliderFloatLeft - Test

Besides: what is the difference between Slider and SliderFloatLeft? Is it just the displaying of title & caption?

sakisan / 2009-10-22 13:41:02   

hello arson,
here are my js :
jquery.tooltip.js (jQuery Tooltip plugin 1.3)
jquery.easing.1.3.js (jQuery Easing v1.3)
and jquery.slideviewer.1.1.js

as i told you, i have some server errors when adding your last float left plugin :-(

When i take out the line 59
"list($width, $height) = getimagesize(BASEURL . GIMGS . '/' . $go['media_file']);"
i can access again to my page without any server error and yhe plug seems to work.
but i never could see my titles or caption displaying

sakisan / 2009-10-22 13:44:24   

@doctor_Osimo
the difference is that you get the slider on the left and the text on his right side

sakisan / 2009-10-22 13:47:09   

you can see it here

arsondpi / 2009-10-22 14:21:12   

I bet this

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

is causing all the mess... It's wrong, wrong, wrong.

Some php help somebody..?

Edit: Try it now... let's see - I nicked some code from the Iwakami.... hmmm...

lemathieu A / 2009-10-22 15:34:48   

@ sakisan : your images are way too heavy ! 280ko for images that size ! In photoshop, do "save for the web", make adjustements, and you will see : my images of this size are 50ko weight ; your page will load 5 times speeder.

@ sakisan & Doctor_Osimo : I do it in a test site currently offline, but it was working fine. Just don't use title and captions (never), so I don't know… ;)

sakisan / 2009-10-22 16:59:21   
  1. I have now the titles and captions displaying using this:
  2.         
  3. $a .= "n < li>< div class='title'>{$title}< /div>< div class='caption'>{$caption}< /div>< img src='" . BASEURL . GIMGS . "/$go[media_file]' alt='' height='{$height}' width='{$width}'/>< /li>n";
  4. The problem left is the size...
  5. The height is coming from the image's one and when we have the add of text on the top, the image slide to the bottom and a part of it is hidden.

I was asking to myself if it would not be better to add the tittle and caption div in the script (as the striptransmitter one is) but it's far from any skill i have today! so... i'm working on it :-$

arson, doctor or anyone else, you're more than welcome ;-P

@lemathieu
oui le poids des images sera optimisé
mais le problème posé est bien dans le fait d'utiliser les titres & légendes avec sliderfloatleft...
Pour moi ce plugin fonctionnait avant la ligne php qui pose aujourd'hui problème.
Il en a également posé un au docteur sur son site de demo avec un slider de 4 images de 74Ko...

lemathieu A / 2009-10-23 08:39:59   

@ sakisan : just because you said upper in this thread that it was long to upload.

@ all : Well done guys. Keep it this way !

arsondpi / 2009-10-23 09:11:05   

I dunno what's going on with your versions.... it works in an exhibit test I did.

Doctor_Osimo / 2009-10-23 10:25:21   

@arsondpi:

I did the same as sakisan said above ¬´When i take out the line 59
"list($width, $height) = getimagesize(BASEURL . GIMGS . '/' . $go['media_file']);"
i can access again to my page without any server error and yhe plug seems to work.
but i never could see my titles or caption displaying»

No it works – but don't know if it's correct ;-)

@sakisan:
For the display of the title & caption below the images you need to get rid of the height in the div with id="slider". You can do so in your css:

  1. #slider {
  2. ¬†¬†¬†¬†height: auto !important;
  3. }

@all
Tested the Slider & SliderFloatLeft yesterday in IE 7 on Windows XP and it did not work at all! Has anyone an idea?

arsondpi / 2009-10-23 10:45:35   

I dunno... I have limited resources on things.
You could ask someone or wait from someone who'd like to pitch in.

IE7?...you mean the layout didn't work or the actual script? If it's the layout it may have to do with floats...
I might be able to fix it. If the script doesn't work -again- I don't know...

sakisan / 2009-10-23 11:26:38   

Hello Guys,
thanks so much for your help!
Now it works for me, but as Doctor_Osimo i don't know if it's correct :-$
Sorry about my noob's skill about js and php, i'm trying to learn as more as i can, but it's really new to me and not easy!... I'll keep an eye on the progress make on this plugin. A lot of people don't like to scroll, so i find it perfect to show some artist's work. I really think it deserves to be in a must have list. I hope some people will try to make it more universal.
Thanks again especially to arson and doctor_osimo, thanks for sharing your skills

sakisan / 2009-10-23 18:17:18   

@ all
if you want to see the new slideViewerPro 1.0 in action...
I put it in the slidefloatleft plugin.
There are a lot of option to customize and it may slide automatically :-D
here it is

This thread has been closed, thank you.