Chit-Chat

Fullscreen slideshow Portfolio

Permalink February 17, 2011 at 6:49 AM

Hey one and all.
I am not sure if I am in the right place for this... perhaps it should be in the Building forum.

Anyway, I am currently building my own website (finally) and I would like to display my work as full screen. Now I have found a JQuery plugin that would work wellhttp://buildinternet.com/2010/11/supersized-3-0-full-screen-backgro... .

I was wondering the best way of handling the images.. which block should I use?

I was thinking the Page list block and add a load of images through the custom attributes but not too sure whether this would work too well.

Any suggestions?

Thanks

dancer replied on Feb 17, 2011 at 6:59 am Permalink Reply

Ok so when I searched the forum I searched for "Fullscreen" [without spaces]. This bought up no results... I have just done a search with the space and found a few useful posts.
http://www.concrete5.org/community/forums/block_requests/supersized...

http://www.concrete5.org/community/forums/themes/full-screen-backgr...

Still curious to know the best way for handling the images though :)

12345j replied on Feb 17, 2011 at 9:05 am Permalink Reply

well a good place to start would be the slideshow block. What id do is either create a new editable area of the full screen, then insert a slideshow there, or create a scrapbook block of your slideshow, which would be called by the theme, and then style that. Or you could just hardcode supersized into the template using plain old html and javascript.

dancer replied on Feb 17, 2011 at 9:45 am Permalink Reply

Hey,Thanks for the response.
There seems to be a slight bug with the slideshow block... all the images are loading underneath each other so the pages simply gets longer and longer until they've all loaded and the back to the top of the page again :/

Anyway, I dont think there are any control settings on this block.

Thanks again
D!!

12345j replied on Feb 17, 2011 at 11:58 am Permalink Reply

it sounds like there is a bug with the slideshow block for you, maybe not all files were uploaded- try reuploading the folder.

dancer replied on Feb 17, 2011 at 12:10 pm Permalink Reply

haha. No it's running locally and I have updated the block just incase... more likely to be my coding ;)

12345j replied on Feb 17, 2011 at 12:35 pm Permalink Reply

what did you code? just add an editable area as the background, put it in edit mode, then add a slideshow block in there. Or use attributes if you want to change the slideshow per page.

dancer replied on Feb 17, 2011 at 12:38 pm Permalink Reply

Maybe some of my CSS conflicting... not sure... this is not the ideal solution for me anyway as, without delving into the JQuery, you don't have an manual controls for the slideshows

12345j replied on Feb 17, 2011 at 12:51 pm Permalink Reply

so id hard code the supersized block in- thats just plain old html

dancer replied on Feb 17, 2011 at 1:04 pm Permalink Reply

I would but the main problem I have is the JQuery, I have only just started to learn it. I basically followed Jordanlevs post here:

http://www.concrete5.org/community/forums/themes/full-screen-backgr...

But I think the images are not being called correctly and therefore not loading.

The Supersize demo has the images placed in the JQuery, here (at the bottom):

$(function(){
         $.fn.supersized.options = {  
            startwidth: 640,  
            startheight: 480,
            vertical_center: 1,
            slideshow: 1,
            navigation: 1,
            thumbnail_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,
            slide_captions: 1,
            slide_interval: 3000,
            slides : [
               {image : 'slides/tower.jpg', title : 'City Clock Tower', url : 'http://www.flickr.com/photos/wumbus/4582735030/in/set-72157623876357531/'},

Viewing 15 lines of 21 lines. View entire code block.

 
$(function(){
         $.fn.supersized.options = {  
            startwidth: 640,  
            startheight: 480,
            vertical_center: 1,
            slideshow: 1,
            navigation: 1,
            thumbnail_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,
            slide_captions: 1,
            slide_interval: 3000,
            slides : [
               {image : 'slides/tower.jpg', title : 'City Clock Tower', url : 'http://www.flickr.com/photos/wumbus/4582735030/in/set-72157623876357531/'},
               {image : 'slides/fence.jpg', title : 'Canal Park Fence', url : 'http://www.flickr.com/photos/wumbus/4582735030/sizes/l/in/set-72157623876357531/'},  
               {image : 'slides/tracks.jpg', title : 'Old Train Tracks', url : 'http://www.flickr.com/photos/wumbus/4582733542/in/set-72157623876357531/'}
            ]
         };
           $('#supersized').supersized(); 
       });

So I am unsure how to call the images straight in the HTML. I have tried to place the images in the HTML

<div id="supersized">
<img src="slides/tower.jpg" />
<img src="slides/fence.jpg" />
<img src="slides/tracks.jpg" />
</div>

But that does not work...

Any wicked wild ideas with your beaming lightbulb :)

12345j replied on Feb 17, 2011 at 1:18 pm Permalink Reply

jordan was integrating it into c5- if this is your site you can just hard code the scripts in your theme- look athttp://buildinternet.com/project/supersized/... source and the docs in supersized. no need to load jq, it is already done by c5.

dancer replied on Feb 17, 2011 at 1:25 pm Permalink Reply

I should explain a little more really:
This is for my own portfolio website as I will be updating it with new projects every now and again. The main project images will be using supersize.

What I wanted to do was follow Jordan's post so I can:
1) Have the script ready in the template for the projects page (fine)
Then:
2) Create a new project selecting the above template and simply add the images via the image block and then Supersize takes over, creating the slideshow.

The image block can not add the images straight into the Jquery in the head of the document... Unless I am being silly and missing something completely?

Hence why I wanted the images in the actual HTML in the #supersized div

Thanks for your attention and speedy response BTW :)

wagdi replied on Mar 22, 2011 at 5:20 am Permalink Reply

I dont know how to code so this solution wont be ideal for you... but flickr has a fullscreen slideshow that you can embed into your site. I think you may even be able to customize the size so it shows as fullscreen at all times.

Ale replied on Mar 22, 2011 at 7:43 am Permalink Reply

This is a bit off-topic, but some time ago I created a package that was designed to work as a full screen slideshow that would be ran in full screen browser on an external monitor. There were spesific pages in sitemap that were used as slideshow content and they were "rotated" through with jQuery as aslideshow. The pages could have any content added to them. The page that displays the slideshow makes AJAX calls periodically to check if there has been any changes to content and it reloads itself, if needed.

The package already works but it still has some incomplete features. I haven't had much time to develop it any further, but if I manage to finish it, I may submit it to marketplace.

Please tell if there would be need for such package.

wagdi replied on Apr 3, 2011 at 6:00 pm Permalink Reply

Sounds great. Will keep an eye on the marketplace for it.

Forums

Chit-Chat

Fullscreen slideshow Portfolio

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?