Exhibit Plugin: slideViewer

nils / 2007-08-15 17:21:47   

Hello,

Can someone test this plugin for me?
Works on Firefox,Camino and Safari.
Tested on a Mac ...

http://www.falseone.org/projects/slideviewer-demo/

Vaska A / 2007-08-15 21:15:04   

Awesome Nils!

I was hoping somebody would bring that one into the mix. Hope you won't mind, but I thought I would alert folks to this one as well...some are a bit much...but a few are quite nice...could also be a nice addition:

http://malsup.com/jquery/cycle/

I'm super busy for a bit, but if you need any help getting it packaged up...assuming you want to release it to everybody, you know where to find me.

nils / 2007-08-16 02:40:51   

Ok ... here it is.
Cycle Demo

Some Problems with transition effects on static "height" and "width". :(
I bring it up tomorrow.

see ya

nils / 2007-08-16 02:42:24   

thanks vaska ;)

nils / 2007-08-19 20:18:23   

slideViewer

... place the files here!

Download

nils / 2007-08-19 20:22:19   

Placement.jpg

danbanG / 2007-08-19 21:41:37   

and after placing the files? what is the next step? =)

nils / 2007-08-19 21:55:43   

Choose your "Exhibition Format"(english) "Austellungsformat"(deutsch).

danbanG / 2007-08-19 22:04:03   

really nice ... big thanks for this plugin. =D

Vaska A / 2007-08-19 22:16:11   

Good work Nils...I'll have a look when I get a chance. ;)

danbanG / 2007-08-20 17:57:01   

hm ... looks like it doesnt work in opera (ver. 9) and furthermore there are some problems with IE (ver. 6/7).

danbanG / 2007-08-20 18:13:02   

okay opera works, was my fault , )

but i still have some problems with the postions of the images (IE). The images dont return to the exact starting position.

nils / 2007-08-21 12:43:58   

hmmm ... have you customize your slideviewer.css?

nils / 2007-08-21 13:11:46   

Oh .. my fault IE needs "position:relative".

Download slideViewer Pack

jquery.slider.css

danbanG / 2007-08-21 16:44:20   

oh cool, now it looks the same in IE. but I still have those problems with the exact position.

let me show you what i mean:
->link
this is just a fresh setup without any changes. so no changes in the whole xhibit setup and no changes in your newest slideViewer setup.

when you push the buttons 1 and 2 several times, you may notice that the image does not stop at the same point where it started. It sometimes (not always) stops about 5pixel closer to the left site.

I noticed that on your site (http://www.falseone.org/projects/slideviewer-demo/) this problems doesnt appear in the IE.

danbanG / 2007-08-21 17:17:42   

when you push the buttons 1 and 2 several times, you may notice that the image does not stop at the same point where it started. It sometimes (not always) stops about 5pixel closer to the left site.

this only happens in IE.

nils / 2007-08-24 11:24:58   

sorry. Mac user ... ;(

matthias / 2009-03-31 21:52:48   

The SlideViewer plugin by Nils works real good for me, but now I'd like to modify it in a way that slides change automatically.

Could anyone please give me a hint what I could do?

After trying it for more than two days I realized that I realy don't have any javascript knowledge.

The script is quite short but I can't find where it says 'stop' or something so that I could change it to 'go'.

here the code of the jquery.slideviewer.js file:

  1. jQuery(function(){
  2.    jQuery("div.svw").prepend("<img src='/ndxz-studio/site/img/loadingAnimation-whbg.gif' class='ldrgif' alt='loading...'/ >"); 
  3. });
  4. var j = 0;
  5. jQuery.fn.slideView = function(settings) {
  6. ¬†¬†¬†¬†  settings = jQuery.extend({
  7.      easeFunc: "expoinout",
  8.      easeTime: 750,
  9.      toolTip: false
  10.   }, settings);
  11. ¬†¬†¬†¬†return this.each(function(){
  12. ¬†¬†¬†¬†¬†¬†¬†¬†var container = jQuery(this);
  13. ¬†¬†¬†¬†¬†¬†¬†¬†container.find("img.ldrgif").remove(); // removes the preloader gif
  14.         container.removeClass("svw").addClass("stripViewer");        
  15. ¬†¬†¬†¬†¬†¬†¬†¬†var pictWidth = container.find("li").find("img").width();
  16. ¬†¬†¬†¬†¬†¬†¬†¬†var pictHeight = container.find("li").find("img").height();
  17. ¬†¬†¬†¬†¬†¬†¬†¬†var pictEls = container.find("li").size();
  18. ¬†¬†¬†¬†¬†¬†¬†¬†var stripViewerWidth = pictWidth*pictEls;
  19. ¬†¬†¬†¬†¬†¬†¬†¬†container.find("ul").css("width" , stripViewerWidth); //assegnamo la larghezza alla lista UL¬†¬†¬†¬†
  20. ¬†¬†¬†¬†¬†¬†¬†¬†container.css("width" , pictWidth);
  21. ¬†¬†¬†¬†¬†¬†¬†¬†container.css("height" , pictHeight);
  22. ¬†¬†¬†¬†¬†¬†¬†¬†container.each(function(i) {
  23. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†jQuery(this).after("<div class='stripTransmitter' id='stripTransmitter" + j + "'><ul></ul></div>");
  24. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†jQuery(this).find("li").each(function(n) {
  25. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†jQuery("div#stripTransmitter" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'>"+(n+1)+"</a></li>");¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†
  26.                 });
  27. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†jQuery("div#stripTransmitter" + j + " a").each(function(z) {
  28. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†jQuery(this).bind("click", function(){
  29. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current"); // wow!
  30. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†var cnt = - (pictWidth*z);
  31. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†jQuery(this).parent().parent().parent().prev().find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc);
  32. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†return false;
  33. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†   });
  34.                 });
  35. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†jQuery("div#stripTransmitter" + j).css("width" , pictWidth);
  36. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†jQuery("div#stripTransmitter" + j + " a:eq(0)").addClass("current");
  37.             if(settings.toolTip){
  38. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†container.next(".stripTransmitter ul").find("a").Tooltip({
  39. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†track: true,
  40. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†delay: 0,
  41. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†showURL: false,
  42. ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†showBody: false
  43.                 });
  44.             }
  45.             });
  46.         j++;
  47.   });¬†¬†¬†¬†
  48. };

what i'm workin on …

benhorinb / 2009-10-01 08:40:34   

hi,
would like help to customize this plugin (example link).
trying to get the number buttons to display before the pictures (just change their location to above the gallery). anybody?

kidcreate / 2009-10-15 11:19:08   

I like the feel of the slide function from benhorinb ( post above).
i would like to also include the mouse like http://www.marekhaiduk.de/index.html. Anyone done this?

kidcreate / 2009-10-15 11:19:28   

the mouse wheel i mean

GordonBennett / 2009-12-08 16:30:22   

This would really be fantastic with a click image advance.

farwest1 / 2010-02-23 15:20:59   

Frustration. What am I doing wrong? I'm trying to get Slideviewer to show a series of images on my homepage.

I've loaded the .css file, the js files, and the .php files into their correct places. I can see Slideviewer in the Exhibition Format menu in Indexhibit.

But nothing happens--no images. Is there a piece of code I need to modify in one of the files I uploaded?

I'm very new to this. Here's my site, if you want to have a look: site

farwest1 / 2010-02-23 16:10:42   

Additionally, I have somehow "broken" the Slideshow theme. Could this be because I updated JQuery to 1.3.2?

See here:page

Thanks for any suggestions!

farwest1 / 2010-02-23 16:40:13   

Additionally, if I look at this page, it seems to work. I'm not sure what I'm doing differently. If I evaluate the code in Chrome, it tells me that I have an "Uncaught Type Error: Object (my site) has no method 'slideViewer.' "

So why wouldn't the code be finding the slideViewer plugins I uploaded? Any thoughts?

Chop / 2010-02-24 16:38:13   

Can anyone post a tutorial on how to make the slideviewer work please. I've installed all the files in the right directories but my post display no images.

jesspovey / 2010-07-29 18:10:19   

Hey farwest1 and Chop, I had a similar problem. Upload the images NOT using file manager, but in the images section below left.

I can now see one image in the slide viewer format, but I can't see the others, even though it registers three images.

Anyone got any advice?

http://www.thebottomdraw.com/project/corporate-branding/

Thanks in advance.

erika_onderwater / 2010-10-19 16:59:23   

what gives.. id like to read some more on how to make this work asap please, it s a shame to be on the computer forever when i could be makeing art

erika_onderwater / 2010-10-19 17:01:34   

what gives.. id like to read some more on how to make this work asap please, it s a shame to be on the computer forever when i could be makeing art

ever day i am waiting.. to do more with indexhibit its taken over my life. i just want things to look clean and display my work. with relation to browser sizes and different format content. its a bitch but the tools are in every other cms with documention but i picked indexhibit 2 years ago. . i feel like im strguggling to keep it simple. more documentation please.
love erika

erika_onderwater / 2010-10-19 17:01:39   

what gives.. id like to read some more on how to make this work asap please, it s a shame to be on the computer forever when i could be makeing art

ever day i am waiting.. to do more with indexhibit its taken over my life. i just want things to look clean and display my work. with relation to browser sizes and different format content. its a bitch but the tools are in every other cms with documention but i picked indexhibit 2 years ago. . i feel like im strguggling to keep it simple. more documentation please.
love erika

sameoh / 2010-10-20 09:45:29   

Hi there,

Great plugin, but I'm experiencing the same problems mentioned by some users above-

The images are not sliding into place properly, leaving about 5 pixels or so visible from the previous image (sometimes more) and the final image in the exhibition is not showing up at all.

I'm getting the same problem on Firefox and Safari.

Any help much appreciated!

sameoh / 2010-10-20 09:45:49   

Hi there,

Great plugin, but I'm experiencing the same problems mentioned by some users above-

The images are not sliding into place properly, leaving about 5 pixels or so visible from the previous image (sometimes more) and the final image in the exhibition is not showing up at all.

I'm getting the same problem on Firefox and Safari.

Any help much appreciated!

Nin / 2011-12-08 17:38:28   

Hi,

I found this website (ex: Portraits) and was wondering if this was a variation of the "slider" plugin cause, it looks very similar and I really like the way the pictures are not stuck to each others... the pagination strip and the vertical scrolling when you click on the "exhbitions"...that's great!

Now, I've seen the guy is using a lot of JQuery:
-jquery-1.6.3.min.js
-jquery.pageswitch.js
-jqgalscroll.js
-jquery.scrollTo-min.js
-jquery.easing.1.3.js
-jquery.color.js
-init.js

And that makes me suspect that I might never be able to achieve some of this results, except if I can get close to it by customizing some plusgin that already exist... :-

I've read somewhere that heavily Jqueried website are contraindicated but never found if, first, that was true, and second, if there is other options to it...?

My website is already heavily Jqueried I think (not sure though...) so maybe it's not a good idea adding some mo'...

Also, I saw that the website url is not changing at all during the whole navigation...!?
And was wondering how was it... possible?

To resume by priority:
1) Is the "slider" pluging can do that (with customization)?
2) Is this Jquery list too "dangerous" to play with for beginners?

Thanks a lot!

A.

Nin / 2011-12-15 08:04:04   

Hi,

I've dowloaded the slider float left exhibition format from Pernin's website and after a few customization, I was wondering if it is possible to:

1) Put the Stripviewer (list of number) on the bottom-center of the images and not on the bottom-left...

2) If it's possible to show the pictures without the easing slide but just to "jump" from one to another...

Thanks a lot!

Here's my test page. (just click 2 times on the text button to hide it!)

Thanks!

A.

G470 / 2011-12-15 10:07:31   

Please have a look at the slideviewer homepage for options.
slideviewer script

Easing options for the easing stuff can be found here

Nin / 2011-12-16 07:46:35   

Yes, thank you very much for these usefull websites but I do know how to change the easing fuctions...

My problem is that I don't know how to make a "custom" easing function with an animation "that is not part" of the easing function list...

I explain myself:
-I want my pictures to fade in and out. Not to slide in any kind of bouce, swing, expoSine etc etc...

I've tried to take the "slideshow" plugin as example:

  1. function dynamicJS()
  2. {
  3.     global $timeout;
  4.     return "$(document).ready(function(){ 
  5.     $('#s1').cycle({
  6.     fx:'fade', 
  7.     speed:'2000', 
  8.     timeout: 0, 
  9.     next:'#next', prev:'#prev'});
  10.     });";

And tried to customize it for the Slider Float Left...
Like this:

  1. function dynamicJS()
  2. {
  3.     
  4.    global $timeout;
  5.     return  "$(window).bind('load', function() {   
  6.     $('div#slider').slideView({ 
  7.     fx: 'fade', 
  8.     speed:'2000',
  9.     timeout: 0,
  10.     next:'#next', prev:'#prev'});

    
    });";

}

And called in the default general 'lib_js' librabry, the Jquery.Cycle.All.Js file...

In vain...
I'm must miss something cause my pics are still sliding even with this above function...

I then tried to take off the easing.Js file from the library but the slider is still sliding...!?

Now I don't even know if what I want to do (fadeIn and Out) is possible since slider or made to slide!!!

Anyway, I'll try other stuffs but if you have an idea, I'm a taker!

Thanks,

A.

Nin / 2011-12-16 08:39:33   

Oh!

...And I also found this but I'm not sure I understand the trick since in my SliderFloatLeft plugin, my pics doesn't seems to have specifis IDs but look like they're all wrapped in the slideviewer div...

Is that makes sense?

Nin / 2011-12-17 11:10:54   

Well... I still can't get this fade effect to work!

- I'Ve been through all the forum threads, ALL.
- Checked ALL the indexhibit participants list but none of them were using the fadeIn funct.
- I've checked everything on the net but only found messy Jquery variations of codings that didn't work...!
- I've read and read again every single line of the 2 websites above but nothing came out from that.
- Finally, I've tried to take example on other plugins: slideshow-djuve-iwakani...everything I found with easing/fade in effect...

But I'm still at the same point!

No centered stripviewer and no fading!

First: Everytime I change my easing.js default function to "string".
The slider doesn't work anymore!

Then: If I add this code in the plugin sliderfloatleft.php:

  1. $(element).fadeIn(1000, method, callback}); $(element).FadeIn({ duration: 1000, easing: method, complete: callback});

I'm having error message!

If I try this in index.php:

  1.     $(document).ready(function() {
  2.       $('div#slider').click(function() {
  3.         $(this).next().fadeToggle('slow');
  4.       });
  5.     });

Or this

  1. $("div#slider").click(function () {
  2.       $(this).hide("fade", {}, 1000);
  3. });

Nothing happens!

If someone could just tell me where to start, it would be amazing...

I've seen that there a jquery.effects.fade.js file that some guy create...
Should I download it? Am I oblige to add something to my plugin?

Thx.

This thread has been closed, thank you.