Thursday, October 20, 2011

Slideshow News Publications

This post follows my Accordion Navigation Collections post and contains the XSL I used at OpenWorld to convert an Applications (formerly Enterprise) Portal news publication into a slideshow. The XSL assumes you have images associated with your news content. Even though the XSL and JavaScript will operate fine with images of different sizes, I recommend that each of the images used with this XSL be of the same size. Here is the XSL: slideshow-hosted.xsl

All of the usual disclaimers apply. Don't trust anyone else's code -- Understand what it is doing before you use it. You take full responsibility for the code once you download it. Don't delegate your responsibility, especially to someone that offers you code for free.

Disclaimer: I make no warranty regarding the use of this XSL.

Security Warning: To make sure the XSL will work "out of the box," I pointed the JavaScript at Google's hosted JavaScript API's and the jQuery Cycle download site. Since this code is used on your enterprise home pages, I suggest you replace these references with references to your own site's versions of these libraries. The thought of allowing some external service to run code on my pages makes me a bit nervous.

17 comments:

Graham said...

Hi Jim. This is great stuff - keep it coming.

Most people know what XSL is and some will know how to write or at least interpret simple XSL.

My question is "What is the easiest way of writing XSL?"

Maybe you (and others) can share which tools they use to help produce the very verbose and often scary looking XSL.

Thanks
Graham

John said...

Jim,

With PeopleTools 8.5x is it possible to point the Javascript references to any delivered Javascript/AJAX libraries on the PeopleSoft Web Server? I've typically added the files manually, but I'm wondering if they are now installed by the web server with PeopleSoft now using AJAX on delivered pages.

Thanks.
John

Jim Marion said...

@John, If I understand your question correctly, you are wondering if you should still use jQuery, etc or if you should switch to something that PeopleTools uses. I encourage you and all customers to stick with jQuery. The PeopleTools Ajax JavaScript libraries are very proprietary and undocumented. You will be much happier if you stick with jQuery.

Krishna said...

Jim,

Thanks for posting the details.

I have followed all your instructions to create a slideshow pagelet but somehow it's showing only links of news publication instead of slideshow images. Can you please help me out on this.

Thanks
Krishna

Jim Marion said...

@Krishna, I recommend using Firebug to review the resultant HTML in Pagelet Wizard to see the img tags and their src attributes to see if the src values are either missing or incorrect. Besides Firefox and Firebug, you can also use IE Developer tools, Safari/Chrome developer tools. Another option is to to use Fiddler to see if your browser is making requests for the images, but the server is returning an error code (like 404 or 500).

Unknown said...

Jim, this is great stuff. I saw your presentation in UI's and customizing the Portal at Collaborate and I was incredibly impressed. I will be going through and trying to recreate some of this using the suggestions you provided in your presentation. Oracle should pay you for this stuff and publish it as a template in a feature pack (if they don't already own the rights); that would be awesome!

Thanks,
Jes

Jim Marion said...

Akhilesh said:

Hi Jim,

After completion of news publications.I have paste the slideshow XSL & i am not able to see any output in pagelet preview, in case of generating default XSL it's shows news feed.

Please help me to resolve slide show.

Thank You.

Jim Marion said...

@Akhilesh, do you use Firebug in Firefox? If so, open it and make sure the JavaScript and net consoles are enabled. Then reload the pagelet and check for errors. It sounds like something didn't load (perhaps the cycle jQuery library?)

Jim Marion said...

@Akhilesh, do you use Firebug in Firefox? If so, open it and make sure the JavaScript and net consoles are enabled. Then reload the pagelet and check for errors. It sounds like something didn't load (perhaps the cycle jQuery library?)

Unknown said...

Hi Jim. Love your blog.

I'm trying to get the slide show effect working but the pagelet isn't showing up. After doing some debugging I am getting a "unable to get property 'height' of undefined or null reference."

$(slideShowQuery)
.width($img.width())
.height($img.height());

This is the block of code it is referencing. I was wondering if you had any insight.

Thanks,
Mark

Jim Marion said...

@Mark, thank you for the compliment. Perhaps it is a change/difference in the versions of jQuery?

Ti said...

Hi Jim,
It was a please meeting you at the Alliance 2015.
I have implemented this on our portal, and the issue I am having is each news article image is being displayed twice for the specified timeout. Also, the first time it shows as a clickable link, but the second is just static image.
Have you seeing this? Any suggestions?
Thank you,
Ti

Jim Marion said...

@Ti, I have not seen this before. I suggest using your browser's inspection tools to attempt to solve the issue.

Unknown said...

Hi Jim,
Hope you can help with this. I have the slider in place, but would like to suppress the "News View Article" page when the article is clicked.

Thanks!

Jim Marion said...

Just remove the a href"..." link part around the image.

Bad said...

Thanks for your quick response. Are you referring to the href in the xsl code? I used the xSL you provided.

Jim Marion said...

That is correct.