?
Solved

Integrating a javascript plugin

Posted on 2011-10-15
45
Medium Priority
?
292 Views
Last Modified: 2012-05-12
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.
0
Comment
Question by:ddantes
  • 24
  • 16
  • 2
  • +1
43 Comments
 
LVL 5

Expert Comment

by:Rinil
ID: 36975067
hi,

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

Author Comment

by:ddantes
ID: 36975085
Thank you for your comment.  I tried editing thumbdimensions:[30,30], changing it to [10,10], but the images are still full-screen.
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 36975191
It does say Full Screen Image Slideshow .
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:ddantes
ID: 36976202
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
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 36976496
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
 

Author Comment

by:ddantes
ID: 36976514
Done -- thank you!
0
 
LVL 43

Expert Comment

by:Rob
ID: 36978848
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
 
LVL 43

Expert Comment

by:Rob
ID: 36979123
i've modified it for you here: http://jsfiddle.net/rjurd/NCAab/
0
 

Author Comment

by:ddantes
ID: 36980438
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
 
LVL 43

Expert Comment

by:Rob
ID: 36983167
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
 

Author Comment

by:ddantes
ID: 36983689
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
 
LVL 43

Expert Comment

by:Rob
ID: 36984073
will the images be different aspects?
0
 

Author Comment

by:ddantes
ID: 36984423
They are not of uniform size.
0
 

Author Comment

by:ddantes
ID: 36989503
But they can all be the same height.
0
 

Author Comment

by:ddantes
ID: 36997000
Sorry for my confusion.  The images can be of identical aspect and size.
0
 
LVL 43

Expert Comment

by:Rob
ID: 36997288
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
 

Author Comment

by:ddantes
ID: 36997466
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
 
LVL 43

Expert Comment

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

i'll have a look and get back to you
0
 

Author Comment

by:ddantes
ID: 37019549
tagit: any update?  Thanks!
0
 
LVL 43

Expert Comment

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

Author Comment

by:ddantes
ID: 37021700
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
 

Author Comment

by:ddantes
ID: 37059778
tagit: Just checking if you are still involved with this?  Hope all is well.
0
 
LVL 43

Expert Comment

by:Rob
ID: 37060293
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
 

Author Comment

by:ddantes
ID: 37060315
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
 
LVL 43

Expert Comment

by:Rob
ID: 37080435
finally! got it working :)

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

Author Comment

by:ddantes
ID: 37081107
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
 
LVL 43

Expert Comment

by:Rob
ID: 37081119
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
 

Author Comment

by:ddantes
ID: 37081186
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
 
LVL 43

Expert Comment

by:Rob
ID: 37081196
good luck! :)
0
 

Author Comment

by:ddantes
ID: 37091207
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
 

Author Comment

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

Author Comment

by:ddantes
ID: 37091670
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
 

Author Comment

by:ddantes
ID: 37118042
Hello Tagit:  Just checking to see if you are still following this question?  Thanks!
0
 
LVL 43

Expert Comment

by:Rob
ID: 37118194
yep still here...

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

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

Author Comment

by:ddantes
ID: 37118713
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
 
LVL 43

Expert Comment

by:Rob
ID: 37118729
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
 
LVL 43

Expert Comment

by:Rob
ID: 37118736
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
 

Author Comment

by:ddantes
ID: 37118758
Yes, I agree it works.  Except the images do not scale proportionally to fit the window if the window is resized.  
0
 

Author Comment

by:ddantes
ID: 37118759
The resizing is supposed to be automatic, not based on dragging with the mouse.
0
 
LVL 43

Expert Comment

by:Rob
ID: 37118767
Sure i'll keep going on it :)
0
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points
ID: 37118819
this now resizes with the screen

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

Author Comment

by:ddantes
ID: 37118942
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
 

Author Closing Comment

by:ddantes
ID: 37118947
The Expert pursued a solution to this difficult question over the course of many weeks, eventually solving it totally.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question