Integrating a javascript plugin

There is a javascript slide show published at http://www.javascriptkit.com/script/script2/fpslideshow/index.shtml   This show is designed as a stand-alone, full-screen feature, but I would like to know how to present it within a div, integrated with other web content.  I also need to know how to adjust the size of the show so that it is less than full-screen.
ddantesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RinilCommented:
hi,

Try editing the thumbdimensions option of fpslideshow.js. for altering the size of the images in show
0
ddantesAuthor Commented:
Thank you for your comment.  I tried editing thumbdimensions:[30,30], changing it to [10,10], but the images are still full-screen.
0
Dave BaldwinFixer of ProblemsCommented:
It does say Full Screen Image Slideshow .
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ddantesAuthor Commented:
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.
0
Dave BaldwinFixer of ProblemsCommented:
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.
0
ddantesAuthor Commented:
Done -- thank you!
0
RobOwner (Aidellio)Commented:
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)
0
RobOwner (Aidellio)Commented:
i've modified it for you here: http://jsfiddle.net/rjurd/NCAab/
0
ddantesAuthor Commented:
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.
0
RobOwner (Aidellio)Commented:
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
0
ddantesAuthor Commented:
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.
0
RobOwner (Aidellio)Commented:
will the images be different aspects?
0
ddantesAuthor Commented:
They are not of uniform size.
0
ddantesAuthor Commented:
But they can all be the same height.
0
ddantesAuthor Commented:
Sorry for my confusion.  The images can be of identical aspect and size.
0
RobOwner (Aidellio)Commented:
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
0
ddantesAuthor Commented:
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.
0
RobOwner (Aidellio)Commented:
no need to apologize, that's what this site is here for :)

i'll have a look and get back to you
0
ddantesAuthor Commented:
tagit: any update?  Thanks!
0
RobOwner (Aidellio)Commented:
Sorry I haven't got back to you sooner.  Almost there with it - not much longer :)
0
ddantesAuthor Commented:
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.
0
ddantesAuthor Commented:
tagit: Just checking if you are still involved with this?  Hope all is well.
0
RobOwner (Aidellio)Commented:
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
0
ddantesAuthor Commented:
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.
0
RobOwner (Aidellio)Commented:
finally! got it working :)

http://jsfiddle.net/rjurd/8dhfr/
0
ddantesAuthor Commented:
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?
0
RobOwner (Aidellio)Commented:
No problem :)

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

my javascript should replace the fpslideshow.js file
0
ddantesAuthor Commented:
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!
0
RobOwner (Aidellio)Commented:
good luck! :)
0
ddantesAuthor Commented:
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
0
ddantesAuthor Commented:
P.S: Please don't concern yourself with the absent thumbnail images.  I intend to remove thumbnails from the presentation.
0
ddantesAuthor Commented:
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.
0
ddantesAuthor Commented:
Hello Tagit:  Just checking to see if you are still following this question?  Thanks!
0
RobOwner (Aidellio)Commented:
yep still here...

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

http://jsfiddle.net/rjurd/8dhfr/6/
0
ddantesAuthor Commented:
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.  
0
RobOwner (Aidellio)Commented:
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
0
RobOwner (Aidellio)Commented:
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
0
ddantesAuthor Commented:
Yes, I agree it works.  Except the images do not scale proportionally to fit the window if the window is resized.  
0
ddantesAuthor Commented:
The resizing is supposed to be automatic, not based on dragging with the mouse.
0
RobOwner (Aidellio)Commented:
Sure i'll keep going on it :)
0
RobOwner (Aidellio)Commented:
this now resizes with the screen

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ddantesAuthor Commented:
It certainly does!   You've delivered the solution totally.   I have a related question, but I want to award points on this one first.
0
ddantesAuthor Commented:
The Expert pursued a solution to this difficult question over the course of many weeks, eventually solving it totally.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.