Integrating a javascript plugin

hi,

Try editing the thumbdimensions option of fpslideshow.js. for altering the size of the images in show

Thank you for your comment.  I tried editing thumbdimensions:[30,30], changing it to [10,10], but the images are still full-screen.

It does say Full Screen Image Slideshow .

Thank you for your comment.  Yes, the plug-in has "Full Screen" in the title.  I'm asking for help in changing that feature by adjusting the code.

You might want to "Request Attention".  I don't have that running and I don't have to time to set it up right now and check it out.

Done -- thank you!

look for the scaleimage function in fpslideshow.js (line 41) and it's used in changeimage (line 58)

windoww and windowh are the two variables you need to change.  when the scaleimage function is called they are set to the window width and height.  you will need to modify this to reference your div tag or to a static height and width.  just add you own object to the setting variable of the fpslideshow object (line 3)

i've modified it for you here: http://jsfiddle.net/rjurd/NCAab/

tagit: Thank you for your extraordinary effort!  I haven't gotten the slide show to work yet -- I replaced fpslideshowvar.js with your javascript, created fadeshow.css with your styling, and included the html in the body of my index page. The index page references the js and css files.  There are no images when the index page loads, so I must be missing something.

no problem!  i've attached a demo for you that might be easier to incorporate.  have a look in the html for how to use it and link to the javascript and css that i've included in the demo.

let me know what doesn't work and if you are having issues incorporating it further into your site
fpslideshow.zip

Thank you for your deluxe packaging!  Now the slide show works.  I just need to know how to configure the div styling so the image width is a percentage of screen width and the resizing is proportional, like in the full-screen example.

will the images be different aspects?

They are not of uniform size.

But they can all be the same height.

Sorry for my confusion.  The images can be of identical aspect and size.

If that's the case then you can set the initial size of the div (and the realtime resize option i've added in) to this aspect ratio

I apologize for needing more guidance.  I've examined html, along with the css and js files which you kindly created, and I'm still uncertain how to apply your latest comment.

no need to apologize, that's what this site is here for :)

i'll have a look and get back to you

tagit: any update?  Thanks!

Sorry I haven't got back to you sooner.  Almost there with it - not much longer :)

Thank you for the update.  I only butted in because I got an automated Email from Experts Exchange saying I need to add a comment because the question is inactive.

tagit: Just checking if you are still involved with this?  Hope all is well.

I'm still here :) trying to make it perfect

http://jsfiddle.net/rjurd/UNagQ/

You can resize and move the image with the correct proportions but it doesn't initialise like that

Thanks for the update.  My apologies for the complexity of this question.  Please let me know when you are satisfied with the code, and I'll implement it.

finally! got it working :)

http://jsfiddle.net/rjurd/8dhfr/

Thank you for your persistence!   I'm having a little challenge implementing the code in my own files, and when I visit your example page and click "run", there is a black square in the result area under IE, and there is a fading slide show of small proportions under Firefox.  Should I be copying your javascript to my index page, or does it belong in fpslideshow.js?

No problem :)

The black square is when the fpslideshow site is down or not allowing connections.

my javascript should replace the fpslideshow.js file

Understood.  I'll change the path to point to images hosted on my local disc, and put your javascript in the fpslideshow.js fle.  It may be a day or so before I can report back, and I'm eager to test this!

good luck! :)

Hello Tagit:  Thank you for your patience.  Well, I was unsuccessful in implementing your latest code. I couldn't get any images to appear.  I changed the image path to point to files on my server,  but the slide show area is still black.   However,  your previous javascript and html does produce a slide show, integrated with other page content!   Unfortunately the slide show does not resize.   The embedded zip file contains the html, javascript, style sheet and images.  Please advise me how to apply the resizing function.  After that I have some additional questions, pertaining to refinements, which I would like to post as a related question, so that I can award points on this marathon project.
slideshow.zip

P.S: Please don't concern yourself with the absent thumbnail images.  I intend to remove thumbnails from the presentation.

PPS: Under Firefox, I can see the slide show with your latest code, but not under IE. Also, under Firefox, the show won't start unless the page is reloaded.  IMO the previous code is better -- shows images under IE and launches automatically.  Just needs a tweak to perform the resize feature.

Hello Tagit:  Just checking to see if you are still following this question?  Thanks!

yep still here...

i've updated the images to other ones that are available to link to:

http://jsfiddle.net/rjurd/8dhfr/6/

I'm grateful for your continued participation with this question.  As before, I can see the slide show with Firefox or other non-IE browsers, but for some reason, not with IE.  

 I uploaded a slide show, with my own images, to www.mauitradewinds.com/show    This uses your javascript and css, except I have removed thumbnail images as best I could.  I can see the show with every browser, and it is integrated with other web content (thank you!).   However, it doesn't resize if the browser window is resized.  Can you verify whether your code performs the resize function?   The images which you posted are small, and I can't easily test them by resizing the window.  

I'll have a look at using your images as well.  you should be able to resize (and drag) the div using the mouse in my example.

I'll keep testing in IE

I've just viewed your site in IE http://www.mauitradewinds.com/show/ and it works, that is i can see the images.... try clearing your cache etc  I've tested IE7, IE8 and IE9

Yes, I agree it works.  Except the images do not scale proportionally to fit the window if the window is resized.  

The resizing is supposed to be automatic, not based on dragging with the mouse.

Sure i'll keep going on it :)

It certainly does!   You've delivered the solution totally.   I have a related question, but I want to award points on this one first.

The Expert pursued a solution to this difficult question over the course of many weeks, eventually solving it totally.