Full screen background image?

Permalink 1 user found helpful
I was browsing through the C5 add-ons and whatever info I could hoping to find a solution for creating a background image which resizes to fill the entire browser (full screen) and would cycle through images with a fade ineffect.
I was unable to find a C5 solution but I stumbled upon thishttp://www.buildinternet.com/project/supersized/... which is exactly the solution I was hoping to find.
Is there anything like this available for us C5 users?
Or would the Supersized plugin work with my concrete5 site?

Any thoughts would be greatly appreciated.

View Replies:
jordanlev replied on at Permalink Reply
This should be able to work with C5. How comfortable are you with HTML/CSS/Javascript?

If you can understand the sample code from that jquery plugin, and you understand how to make or modify a C5 theme, then it's pretty straightforward.

The basic steps are:

* Drop the "supersized.2.0.js" file into your theme's "js" folder (create that folder if it doesn't already exist)

* In your theme's <head> (which should be in header.php in the elements folder), add this stuff:
$html = Loader::helper('html');
echo $html->javascript('jquery.ui.js');
<script src="<?php echo $this->getThemePath(); ?>/js/supersized.2.0.js"></script>
<?php if (!$c->isEditMode()): ?>
<script type="text/javascript">  
      $.fn.supersized.options = {  
         startwidth: 640,  
         startheight: 480,
         vertical_center: 1,
         slideshow: 1,
         navigation: 1,
         transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
         pause_hover: 0,
         slide_counter: 1,

(make sure those go BELOW the call to "Loader::element('header_required')")

* Add this to your theme's page type templates (each one that you want to have this effect work on):
<div id="supersize">
   $a = new Area('Background Images');
<!--Content area that hovers on top-->
<div id="content">
   $a = new Area('Main');

(adjust the HTML/CSS inside the "content" div as you see fit -- this is the stuff that hovers over the background image)

* Now on your site, you have to add Image blocks to the "Background Images" area on the Page Defaults of each page type (check the documentation if you don't know how to do this). Note that the images will NOT look right when you first add them to the page -- there is a bit of code I put in above that doesn't apply the effect when you're in "edit mode", because otherwise you wouldn't be able to see the images to edit / remove them!

I haven't tested any of this out so there may be problems, but hopefully this gives you a decent idea of how to proceed.

Good luck!

2at replied on at Permalink Reply
Well I made an attempt at this, did not work out in the end. This is about all I have to show for it:

Warning: require(concrete/dispatcher.php) [function.require]: failed to open stream: No such file or directory in /home/2at/public_html/index.php on line 2

Fatal error: require() [function.require]: Failed opening required 'concrete/dispatcher.php' (include_path='.:') in /home/2at/public_html/index.php on line 2

I am not well practiced with modifying C5 themes as of yet. Unless you can make sense of the above warning message and have a suggestion I thank you for your attempt at helping me.
I was also wondering what kind of help is available to me in having someone work on my file for payment? and are you involved in such thing?

Thanks again.
Mnkras replied on at Permalink Reply
i don't know how you did that lol, did you modify the dispatcher.php?
jordanlev replied on at Permalink Reply
Yeah, somehow your site directory got messed up (files or folders accidentally moved or delete). You want to be sure that when modifying themes, you're *only* working with files in the site's "themes" directory, NOT the "concrete/themes" directory (or any other directory).

If you don't remember changing anything, it's probably too complicated to figure out what happened and fix it -- your best bet at this point is to re-install the site and start over (copying over your theme's files that you've worked on thus far, though).
jordanlev replied on at Permalink Reply
Also, it might be helpful to go through the process of building a more "normal" theme (like a normal 2-column layout without and javascript) in concrete5 first, then attempt this more advanced theme. Otherwise you're trying to learn too many new things at once, which is very difficult I think.
2at replied on at Permalink Reply
Yes, I may have bit off more than I could chew on that one. I have made a request to have a new clean install which isn't a big deal as I hadn't spent much time on the site design itself. Thanks for your help and insight. I will be sure to only touch my themes folder from now on haha.
craftyCS replied on at Permalink Reply
Hi Jordan,
I realise your post was a fair way back in July, so far back infact that Supersized is now in version 3.0.

I am trying to do the exact same and was wondering if you had managed to get the background slideshow to work with custom images loaded from the library as I have followed the above method with no success.
jordanlev replied on at Permalink Reply 1 Attachment
Are you having trouble loading the images from the library, or are you having trouble displaying them correctly?

I recently worked on a site with background images that would be different every time the page loaded. So not rotating exactly, but you might be able to tweak the code to suit your needs.

* Unzip the attached file and drop it into your site's "helpers" folder.

* In the <head> element of your template, add code like this:
<style type="text/css">
   $fsID = 1; //<--set this to the fileset you want to use.
   $bgih = Loader::helper('background_image');
   $src = $bgih->getRandomImageUrl($fsID);
   body { background-image: url(<?php echo $src; ?>); }

Hope that helps!
pakeeza1990 replied on at Permalink Reply
there is probliming of the background image especially in the case of theme whenever i do the same job i don,t know why i face always this problem same like you ...

<a href="http://www.forumpakistan.com">pakistani</a
jordanlev replied on at Permalink Reply
What's the problem? I went tohttp://forumpakistan.com but didn't see anything for a background image other than that green pattern.

If you can explain what exactly the problem is, or show screenshots, that would be very helpful.
dancer replied on at Permalink Reply
In relation to this post above.
I think it may have something to do with not finding the images....


Edit: I mean the very first post from Jordan
dancer replied on at Permalink Reply
So.. Jordanlev.

I thought I would pick up the mantle, and if I get this functioning I may right a full post, with files as well, on this so other people have a resource to get this working.

Ideally I want a Div where the background image transitions using Supersized 3.

I have run through your guidance, which is very comprehensive I would like to add, but have not got the slideshow to work.

When I put the stylesheet it the website breaks

I have also had a go at your BG random image thing. The resulting CSS is placed into the code:

<style type="text/css">
      body { background-image: url(); }

But t doesn't seem to find the image file. I was unsure if you had to place the actual fileset name (in the head) or if there was a numeric ID I had to put in...?

Anyway any help.. primarily on the slideshow would be great.

Thanks in advance

jordanlev replied on at Permalink Reply
Hi Alistair,
I'm not sure what to tell you about the slideshow -- I would definitely try to make it work with just a plain old static html/css/javascript file FIRST, then after you know it works try to bring it into Concrete5 (it's also really helpful here on the forums if you have a problem and can post the html/css/javascript that you know works on its own -- makes it really easy for people to suggest how to alter it to put it into concrete5).

As for the background image, you have to put in the numeric fileset id into the code. To get the fileset ID I think you have to go to the dashboard -> file manager, click on the "File Sets" tab (or maybe it's just called "Sets"?), and click on the one you want and look at the ID number at the end of the URL in your browser's address bar.

shotrox replied on at Permalink Reply
Hi guys,

I am also using this supersized background and got it to work nicely in most browsers, however, I have challenges with IE (as always...)

Can someone tell me why this works on firefox but not on IE:

I tried different ways of telling the browser the path to the pictures. It always works in firefox. Never in IE :-(

The javascript works in IE without concrete5 so there must be some conflict with concrete5, I just don't find it...
(see the non concrete5 version:http://act-ivated.com/tracilynn)...

Thank you so much for your help!
senshidigital replied on at Permalink Reply
I have built an add-on for supersized but IE is causing a problem. Seems to be the jquery script thats being loaded by C5 that could be causing the problem. I might be wrong.

Trying out a few options.
senshidigital replied on at Permalink Reply
Definitely the jquery that C5 uses. I loaded up: 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' In its place and Supersized without the thumbnail navigation worked fine. With the Nav did not,

senshidigital replied on at Permalink Reply
OK Got it working with the nav.

When you place in the images the last one can not have a comma after it like so:

{image : '/dev/c5-testing/files/cache/47b8fbe02d97122ba9cfee11e41338d6.jpg', title : 'Macs Adventure Leafet'},
{image : '/dev/c5-testing/files/cache/476dd8e32611ad2dff56bdf91c781207.jpg', title : 'Dalduff Farm Website'},
{image : '/dev/c5-testing/files/cache/c7a50a7cd78368fd2c7727d436653297.jpg', title : 'Macs Adventure Stationery'},
{image : '/dev/c5-testing/files/cache/9078109ca6de8fe3c14a25d1aaaf3f99.jpg', title : 'Exco Intouch Website'}

So it does work but you need to replace the C5 jquery with the latest one. OK for a specific client website but not as an add-on in the marketplace unfortunately.

Unless C5 update the jquery in a future version that is.

Here are both my test pages:



Only thing is I have it pulling images from a file set so not sure how to stop the comma on the last entry. Can anyone help?
shotrox replied on at Permalink Reply
hey Dojo

great job. thank you for doing it! Where do I tell C% to use the other jquery?


senshidigital replied on at Permalink Reply
No problem.

If anyone knows how to not place a comma on the last image inserted it would be appreciated. The code I have on my file if:

<?php foreach ($images as $img): ?>
{image : '<?php echo $img['fullSrc']; ?>', title : '<?php echo htmlspecialchars($img['title'], ENT_QUOTES, APP_CHARSET); ?>'},
<?php endforeach; ?>
jordanlev replied on at Permalink Reply
$js = array();
foreach ($images as $img) {
  $js[] = "{image : '" . $img['fullSrc'] . "', title : '" . htmlspecialchars($img['title'], ENT_QUOTES, APP_CHARSET) . "'}";
echo implode(',', $js);
senshidigital replied on at Permalink Reply
Once again Jordan... your input is much appreciated an invaluable!

This is the add-on you help with the fileset code. If only it would work with C5's jquery!
senshidigital replied on at Permalink Reply
Jordan, If you want this add-on PM'd to you let me know as I can't put it on the marketplace until they update C5 with the latest jquery.

Its a shame as well, this works great on ipads etc.
senshidigital replied on at Permalink Reply
oh.. just place the latest jquery in the top level 'js' folder and call it jquery.js. This will override it. Cant say if this will affect other parts of C5 though.
12345j replied on at Permalink Reply
just name it something other than the default, so that when you call for the original, the new one isn't called.
senshidigital replied on at Permalink Reply
Not sure what you mean but if I understand you correctly, would this not mean it would upload two version of jquery? C5's and the latest version? Would that not cause problems?

Sorry if I have picked you up wrong. Its nearly 1am here! :-/
jordanlev replied on at Permalink Reply
Doesn't work like that -- you can't load your own jquery on top of c5's -- they will conflict. You must name it the same so that C5 loads only yours and not its built-in one as well.

It is somewhat possible that using a newer version of jquery could cause problems, you will need to do some testing (especially various things with the editing interface). But generally jquery is good about maintaining backwards compatibility so it's also possible that it won't cause problems.
senshidigital replied on at Permalink Reply
Thats what I thought too.

I have a photography website I am building for a client so will see if updating the jquery screws up C5.

I have asked Franz if the next version of C5 will update its jquery. Fingers crossed!
senshidigital replied on at Permalink Reply
OK all I think I have cracked this. Some tweaks to the supersized jquery but got it working in IE 8 & 9!!

Can someone test IE 7 with this site:


Try both pages as one has the navigation.

If this works I will submit to the marketplace and see if it gets on.

With the add-on you will be able to switch the nav on and off plus other functions are editable.

Works great on an iPad by the way!