Knowledge Base/Official Insight Help/Graphic Design (Themes & Layouts)

Creating a Slideshow

Insight Support
posted this on December 31, 2010 16:31

A slideshow is a great way of adding interest to your frontpage, displaying images from an event, or creating adverts that draw attention to particular content.

 

Loading...

You can create a slideshow that is easy to update by combining some javascript code, in an article, and our Media XML Feed as follows:

Step 1 - Create a folder to store your images

First you'll need to create a usergroup group or mediafolder media folder to contain the images you wish to display. Next upload your images to the folder you've created. Note:Size your images before uploading to the dimensions you require and make a note of their width and height.

Important: Limit the number of images to something like 5-6 as with such a slideshow the browser will load all of the images before it starts playing – if you've got too many, or the images haven't been correctly optimised, then there will be a pause and a blank area where the slideshow is before it starts playing.

Consequently, using .jpeg images which can be optimised/compressed rather than .png images which can't is the best option.

By default, the images will display in alphabetical order, so if you name the images in the media folder as "1", "2", "3, etc. they will display in that order.

Step 2 - Create a Media feed

Next you want to create a Media feed in the Media RSS format for the slideshow folder you created. You can accomplish this as follows:

  • Select the Settings tab from the navigation tabs at the top of the Web Office.
  • Next select the API category from the options in the navigation on the left-hand side. This will reveal further options, select the Media XML option.
  • Select the Add a new media feed task to begin creating your feed, give your feed a name e.g.frontpage slideshow, and click the Add button.
  • The properties of your new feed will now be displayed. Now make the following changes to the feed properties:
    The XML format should be set to to Format 4 - Media RSS
    Change the feed root group to the slideshow folder you uploaded your images to.
    In the Media types area select the image types you wish to display e.g.JPEG, GIF and PNG.
  • Make a record of the feed url e.g.http://shareinsight.co.uk/Media/MediaXML.xml?fid=165
  • Once you have made these changes click the Save button in the top-right corner to commit your changes.

Step 3 - Add an article to display the Slideshow

Finally you need to create and article in the normal way, (with the article referenced from within the layout in which you wish it to display). Once the document editor has opened to display the contents pane you can insert the relevant javascript code to create a slideshow as follows:

  • select the Source button to reveal the HTML code of the article.
  • Paste the following code into the article source:

    <script type="text/javascript" src="http://www.google.com/jsapi"> </script>
    <script type="text/javascript" src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"> </script>
    <style type="text/css">
    .gss a img {border : none;}
    .gss {
    width: 400px;
    height: 300px;
    color: #dddddd;
    background-color: #000000;
    padding: 0px;
    } </style>
    <script type="text/javascript">
    function load() {
    var samples = "http://shareinsight.uk.endis.com/Media/MediaXML.xml?fid=165";
    var options = { fullControlPanel: true, fullControlPanelSmallIcons: true,
    displayTime: 3000,
    transitionTime: 600,
    thumbnailTag : 'content',
    linkTarget : google.feeds.LINK_TARGET_SELF,
    pauseOnHover : true
    };
    new GFslideShow(samples, "slideshow", options);
    }
    google.load("feeds", "1");
    google.setOnLoadCallback(load);
    </script>
    <div align="center">
    <div id="slideshow" class="gss">
    <div align="left">Loading...</div>
    </div>
    </div>
  • Change the url in the following line:var samples = "http://shareinsight.uk.endis.com/Media/MediaXML.xml?fid=1"; to contain the url of the feed you created.
  • Modify the dimensions, highlighted in red in the code above, to be the dimensions that you wish your slideshow to display at.

Finally publish your article and your slideshow should be visible.

Using a slideshow for adverts

It's possible to link the images in a slideshow to other content. This means you could use it for displaying adverts. Link your images as follows:

  1. Locate your image and select it to display its properties.
  2. Under 'Extra link' click the 'Set link' button; the 'link' browser will open in a new window.
  3. Select the content you want to link to.  
  4. Click Save to commit your changes.

If you've published your slideshow in the past you'll notice your images don't link to your content. This is because it's stored in memory so takes awhile to update.

Troubleshooting

If your slideshow doesn't display check the following:

  • Make sure the feed url is identical to the feed on your site and is surrounded by quotes.
  • Check your feed is set to format 4 - Media RSS.
  • Copy and paste the feed url into your browser's address bar and hit enter to view the feed. It should list the images you've uploaded. If no images are displayed check you have uploaded images to the specified folder and that their format matches the image types you selected to be displayed in your feed.
  • To add a second slideshow to the page, change the following words in the code (e.g. by appending a number '2'): gss, samples, options, slideshow, load (except google.load).

The changes I make to my slideshow don't display? Once you've published your slideshow successfully it is stored in memory so any updates take a while to display.

 

Comments

User photo
Sarah Painter

Can i get the image captions to display in the slide show? i can't work out how

March 15, 2011 14:32
User photo
Insight Support
ShareInsight

No, it's not possible to display the captions using this code.

March 16, 2011 09:53
User photo
Paul Conneely

Hi Justin, How do you add extra images to the slide show once it is set up?

June 15, 2011 14:58
User photo
Insight Support
ShareInsight

Add the new images to the folder that holds the images already included in the slideshow and they'll automatically appear. If they don't appear immediately they will do within a few hours.

June 20, 2011 10:47
User photo
Alistair Birch
ShareInsight

Want to get rid of the black background when your slideshow is loading?

Simply insert this code above the slideshow code, where #FFF is the colour of your background (#FFF is a shortcut for #FFFFFF = white)

<style type="text/css">
.gss {
background-color: #FFF !important;
}
</style>

June 23, 2011 10:05
User photo
Alistair Birch
ShareInsight

Image ordering
If you want to control the order of images in the slideshow, simply name them 1-family, 2-youth, 3-picnic etc, whatever the subjects are.

As long as "Item ordering:" is set to "Alphabetic - ascending" in the Slideshow media feed (which it is by default), your slides will order by the numbers you've inserted.

NB Once you've made a change like this or to the actual images in the folder, it can take a little while for the slideshow to update as the XML feed is cached once read and not re-read immediately a change is made.

Add links to your slideshow
Again, this is easy - go to each image in your slideshow media folder and add a link to the image. This will then provide a link when the image is displayed in the slideshow. See the note above re waiting for this change to update.

June 23, 2011 10:17
User photo
James Proctor

Is it possible to remove the bar at the bottom of the slideshow when hovering over it (the 'previous', 'pause/play' and 'next picture' buttons)? Thanks.

July 11, 2011 10:45
User photo
Alistair Birch
ShareInsight

Hi James

You can experiment with the following settings in the code - change the first instance of 'true' in the following line to 'false' as below:

var options = { fullControlPanel: false, fullControlPanelSmallIcons: true,

That will remove the controls, but it will still allow you to pause the slideshow if you hover your mouse over the image. To get rid of this as well - amend the following line as shown:

pauseOnHover : false

Be careful you don't delete any of the punctuation as you edit these lines, otherwise they may not work.

July 11, 2011 15:07
User photo
Catherine Valentine

I have created the slideshow as described above and linked to content within the site.  Thank you for the instructions!  Can you tell me how long it should take for the links to work, please?  I created the slideshow last night and this morning  (c12 hours later) it was still not working.  I have now relinked each of the pages. How long should I wait?

Regards

Catherine

February 01, 2012 11:09
User photo
Paul Hunt

I have created this and all works well but are you able to have it not as the home page, so the slide show shows up on another page, i have tried this but all i seem to get is a link to the page

Paul

February 03, 2012 14:37
User photo
Paul Tostevin
Endis

Hi Paul

The slideshow will work on any page - it sounds that you do not have a layout applied to the group the article is in or you have not set the article as the group home page. If you cannot get it to work please email support@endis.com

Paul

February 13, 2012 11:12
User photo
Gregor Peden

Is it possible to make use of the thumbnails so users can see in advance the images to be displayed and click on them as required? Perhaps in place of the 'previous' and 'next' icons...

March 23, 2012 09:28
User photo
Paul Tostevin
Endis

Hi Gregor

I would suggest looking at other javascript slideshows that are freely available on the web. The customization options for the Google Slideshow are available at:-

http://www.google.com/uds/solutions/slideshow/reference.html

Paul

March 26, 2012 12:27
User photo
James Proctor

Hi there,

I have one slideshow already in operation on a page but want to add a second - where specifically do I have to add the number '2' to the source code?

 

Thanks,

 

James.

P.S. The first slideshow I created works great - thanks for the assistance!

April 02, 2012 14:27
User photo
Jennie Cloherty

Hi,

Above, a comment says "Is it possible to remove the bar at the bottom of the slideshow when hovering over it (the 'previous', 'pause/play' and 'next picture' buttons)?" -

But I would like to HAVE the previous/next buttons! How do I create this??

Thanks,
Jennie

April 03, 2012 09:37
User photo
Marian Barrios Walteros

Hello,

I have a functioning slideshow on my website which looks fantastic and works fantastic, I just want to know if there is anyway of linking the images to other pages on the website when you click on them. 

Thank you in advance  

April 11, 2012 19:29
User photo
Paul Tostevin
Endis

A link can be set on the image by selecting the image under the media tab to go into the image properties and clicking on the 'Set Link' button

April 25, 2012 17:29
User photo
Alistair Birch
ShareInsight

James, check the code underneath the "var samples" line where you enter the feed address has the following settings – it should have if you've copied the code correctly.

var options = { fullControlPanel: true, fullControlPanelSmallIcons: true,

If the items don't appear, try viewing in a different browser.

Al

May 09, 2012 15:03
User photo
Nick Boot-Handford

Is it possible to put videos in the slideshow as well?

August 09, 2012 15:48
User photo
Alistair Birch
ShareInsight

Hi Nick, I'm not sure about that one, I think the slideshow code (it's not ours) may only be built to handle still images, but it might it be worth digging round on the web to see what's possible – I think the key thing to include in the search is Google and gfslideshow.js from the second line of the search.

Let us know how you get on.

Al

August 10, 2012 11:07
User photo
Paul Tostevin
Endis

Hi Nick - there are many different javascript slideshows that can be used on the Insight platform - one I have seen, and will probably use soon, is AnythingSlider - (http://css-tricks.com/examples/AnythingSlider/) - this includes the ability to have a 'video slide'

Paul

August 10, 2012 12:45
User photo
Jeremy Moore

this is not working, slideshow remains black. website is: www.christlifecenter.com it is on the Events and Ministries page. Thanks for your help

August 10, 2012 18:21
User photo
Paul Tostevin
Endis

Hi Jeremy - in the article it highlights the fact that certain lines in red need modifying - I can see that you have not updated the line

var samples = "http://shareinsight.uk.endis.com/Media/MediaXML.xml?fid=165";

Please update this with the correct URL.

If you are still having a problem please email support@endis.com with the details.

Paul

August 13, 2012 09:39
User photo
Robert Dale

I want to add a 2nd slideshow on the main page and see from troubleshooting

To add a second slideshow to the page, change the following words in the code (e.g. by appending a number '2'): gss, samples, options, slideshow, load (except google.load).

The above doesn't make sense to me the only place I can find a number in the code is google.load("feeds", "1");  changing this to a '2' only one of the slideshows loads I can't get both to work

Please help

October 02, 2012 21:40
User photo
Alistair Birch
ShareInsight

Hi Robert, I believe it's not existing numbers which you change but numbers you add, so instances of

gss, samples, options, slideshow, load (except google.load)
become
gss2, samples2, options2, slideshow2, load2 (except google.load).

Note there are no spaces between the name and the number.

So the line – var samples – becomes – var samples2

I think you may need to change the number 1 you changed to 2 back to 1

Hope that helps – if you get further problems, copy your original post and this reply and send to support@endis.com

Al

October 03, 2012 09:55
User photo
Richard Ofori-Asenso

Followed all steps not working..Website www.highburybaptistchurch.org thanks

February 04, 2013 17:40
User photo
Paul Tostevin
Endis

Hi Richard - It would be best if you send an email to support@endis.com and give details of where on the site the slideshow has been implemented and is not working as I cannot see it..

Paul

February 04, 2013 17:47
User photo
Richard Ofori-Asenso

Hi Paul many thanks for the reply,, i have followed the steps created a folder for the images 'slide images' and followed all the other steps.i want to use the slide show on the front-page..its been running as 'loading for over an hour now' when i tried previewing it

February 04, 2013 18:04
User photo
Paul Tostevin
Endis

As you have not saved  the layout then we cannot see what changes you have made - please send an email to support@endis.com with the information.

February 04, 2013 18:07
User photo
Richard Ofori-Asenso

Hi Paul,

what layout are you referring i cant seem to understand..i have saved what i created in the documents published folder as 'frontpage'.Thanks

February 04, 2013 18:18
User photo
Andy Wall

Is there a way to get the images to display in a random order rather than in a specified order?

March 06, 2013 13:24
User photo
Alistair Birch
ShareInsight

Hi Andy, I happened to see your comment this morning about randomizing the slides and asked one of our tech guys what he thought. He found the following via Google. Now, it's important to say that we haven't tried this and we can't support it, so I would definitely make a backup copy of your code if it al goes wrong, but it would be worth playing with – let us know how you get on : )

http://schock.net/articles/2010/05/13/how-to-make-googles-ajax-slid...

April 02, 2013 12:27