Go Back   Serif Software Forums > Design and Publishing > WebPlus

Notices

WebPlus Questions about using WebPlus for website design

 
 
Thread Tools Display Modes
Old 25th January 2013, 05:11 PM   #1
Patchs
Regular Member
 
Join Date: May 2010
Location: Central Texas
Posts: 145
Patchs is on a distinguished road
Default Fluid (Full Width) Slider

This probably has been covered somewhere in the forum but I haven't found it.

What I am wanting is a Fluid Slider for a heading - exp. http://www.v-sharp.com/

Any assistance is greatly appreciated.

Thanks
__________________
Joe P.
Patchs


WebPlus X2, X4, X5, X6 & X7 - PagePlus X4, X5, X6 & X7 - DrawPlus X4, X5 - PhotoPlus X3 X5
Patchs is offline  
Old 25th January 2013, 05:14 PM   #2
mjh
The one and only mjh
 
mjh's Avatar
 
Join Date: Feb 2009
Location: Michigan USA
Posts: 74,639
mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)mjh has nothing more to prove (nirvana)
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Patchs View Post
This probably has been covered somewhere in the forum but I haven't found it.

What I am wanting is a Fluid Slider for a heading - exp. http://www.v-sharp.com/

Any assistance is greatly appreciated.

Thanks
Clitheroe Kid (Joe) has tutorials on just this issue in his signature.
__________________
---------------
T9900, 8 GB RAM, 512 vidram, WIN 7 Ult 64-bit - Chrome
mjh is offline  
Old 25th January 2013, 05:32 PM   #3
Patchs
Regular Member
 
Join Date: May 2010
Location: Central Texas
Posts: 145
Patchs is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by mjh View Post
Clitheroe Kid (Joe) has tutorials on just this issue in his signature.
Hi mjh -

I looked at the Supersize for the background slider but when I changed the height from 100% to a fixed height the image does not display correctly. He stated in one of his post that if the height is changed from 100% to a fixed height it may not work as intended.

But - I may not be doing something right also.
__________________
Joe P.
Patchs


WebPlus X2, X4, X5, X6 & X7 - PagePlus X4, X5, X6 & X7 - DrawPlus X4, X5 - PhotoPlus X3 X5
Patchs is offline  
Old 25th January 2013, 05:36 PM   #4
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Patchs View Post
This probably has been covered somewhere in the forum but I haven't found it.

What I am wanting is a Fluid Slider for a heading - exp. http://www.v-sharp.com/

Any assistance is greatly appreciated.

Thanks
This is a fluid slider which I have working as a header in X6. Have a look at the source of the files and demo from the link below. If its what you require, download the files, post back on here, and I will talk you through the installation.

http://www.pixedelic.com/plugins/camera/

Joe
Clitheroe Kid is offline  
Old 25th January 2013, 05:40 PM   #5
Patchs
Regular Member
 
Join Date: May 2010
Location: Central Texas
Posts: 145
Patchs is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Clitheroe Kid View Post
This is a fluid slider which I have working as a header in X6. Have a look at the source of the files and demo from the link below. If its what you require, download the files, post back on here, and I will talk you through the installation.

http://www.pixedelic.com/plugins/camera/

Joe
Yes - That is what I am looking for.
__________________
Joe P.
Patchs


WebPlus X2, X4, X5, X6 & X7 - PagePlus X4, X5, X6 & X7 - DrawPlus X4, X5 - PhotoPlus X3 X5
Patchs is offline  
Old 25th January 2013, 06:54 PM   #6
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Patchs View Post
Yes - That is what I am looking for.
From the top menu bar Tools>Site Manager>File Manager,
1. Click on root and click New Folder. Create Folder css
2. Click on root and click New Folder. Create Folder images
3.
Click on images and click New Folder. Create Folder patterns
4.
Click on images and click New Folder. Create Folder slides
5. Click on slides and click New Folder. Create Folder thumbs
6. Click on root and click New Folder. Create Folder scripts

This will mirror the folder tree in the download.

Highlight each folder in turn and click Add File. Browse to the corresponding folder in the download, highlight all the files and click Open.

Copy the following script. Click on your Master Page in the right side bar and from the top menu bar Insert>HTML Fragment, click on the page and click Paste to Head. Change the height of the header were marked in red.

Code:
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
    <script src="scripts/html5.js"></script>
    <![endif]--> 
<link rel='stylesheet' id='camera-css'  href='css/camera.css' type='text/css' media='all'> 
    <style>
    
        
        .fluid_container {
        /*    position:fixed;  added */
            margin: 0 auto;
            max-width: 100%;
            width: 100%;
            z-index:1; /*added */
        }
    </style>


    <script type='text/javascript' src='scripts/jquery.min.js'></script>
    <script type='text/javascript' src='scripts/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script> 
    <script type='text/javascript' src='scripts/camera.js'></script> 
    
    <script>
        jQuery(function(){
            
            jQuery('#camera_index').camera({
                height: '200px',
                
                pagination: true,
                thumbnails: true,
                imagePath: 'images/'
            });

        });
    </script>
Copy the following script and Right click on your page>Attach HTML. Scroll down until you see <!--Master Page Body Start--> Place your cursor at the end of the right arrow and hit enter a couple of times. Paste the script in the space you have made.

Code:
<div class="fluid_container">
        <div class="camera_wrap camera_petroleum_skin" id="camera_index">
                <div data-thumb="images/slides/thumbs/bridge.jpg" data-src="images/slides/bridge.jpg">
                    <div class="camera_caption fadeFromBottom">
                        Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
                    </div>
                </div>
                <div data-thumb="images/slides/thumbs/leaf.jpg" data-src="images/slides/leaf.jpg">
                    <div class="camera_caption fadeFromBottom">
                        It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
                    </div>
                </div>
                <div data-thumb="images/slides/thumbs/road.jpg" data-src="images/slides/road.jpg">
                    <div class="camera_caption fadeFromBottom">
                        <em>It's completely free</em> (even if a donation is appreciated)
                    </div>
                </div>
                <div data-thumb="images/slides/thumbs/sea.jpg" data-src="images/slides/sea.jpg">
                    <div class="camera_caption fadeFromBottom">
                        Camera slideshow provides many options <em>to customize your project</em> as more as possible
                    </div>
                </div>
                <div data-thumb="images/slides/thumbs/shelter.jpg" data-src="images/slides/shelter.jpg">
                    <div class="camera_caption fadeFromBottom">
                        It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
                    </div>
                </div>
                <div data-thumb="images/slides/thumbs/tree.jpg" data-src="images/slides/tree.jpg">
                    <div class="camera_caption fadeFromBottom">
                        Different color skins and layouts available, <em>fullscreen ready too</em>
                    </div>
                </div>
            </div><!-- .camera_wrap -->

</div><!-- .fluid_container -->
Preview in a browser. Once you have it working change the thumbs and images for yours. Make sure you load them into the correct folders and delete the others.

Joe
Clitheroe Kid is offline  
Old 25th January 2013, 07:01 PM   #7
Patchs
Regular Member
 
Join Date: May 2010
Location: Central Texas
Posts: 145
Patchs is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Clitheroe Kid View Post
From the top menu bar Tools>Site Manager>File Manager,
1. Click on root and click New Folder. Create Folder css
2. Click on root and click New Folder. Create Folder images
3.
Click on images and click New Folder. Create Folder patterns
4.
Click on images and click New Folder. Create Folder slides
5. Click on slides and click New Folder. Create Folder thumbs
6. Click on root and click New Folder. Create Folder scripts

This will mirror the folder tree in the download.

Highlight each folder in turn and click Add File. Browse to the corresponding folder in the download, highlight all the files and click Open.

Copy the following script. Click on your Master Page in the right side bar and from the top menu bar Insert>HTML Fragment, click on the page and click Paste to Head. Change the height of the header were marked in red.

Code:
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]>
    <script src="scripts/html5.js"></script>
    <![endif]--> 
<link rel='stylesheet' id='camera-css'  href='css/camera.css' type='text/css' media='all'> 
    <style>
    
        
        .fluid_container {
        /*    position:fixed;  added */
            margin: 0 auto;
            max-width: 100%;
            width: 100%;
            z-index:1; /*added */
        }
    </style>


    <script type='text/javascript' src='scripts/jquery.min.js'></script>
    <script type='text/javascript' src='scripts/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script> 
    <script type='text/javascript' src='scripts/camera.js'></script> 
    
    <script>
        jQuery(function(){
            
            jQuery('#camera_index').camera({
                height: '200px',
                
                pagination: true,
                thumbnails: true,
                imagePath: 'images/'
            });

        });
    </script>
Copy the following script and Right click on your page>Attach HTML. Scroll down until you see <!--Master Page Body Start--> Place your cursor at the end of the right arrow and hit enter a couple of times. Paste the script in the space you have made.

Code:
<div class="fluid_container">
        <div class="camera_wrap camera_petroleum_skin" id="camera_index">
                <div data-thumb="images/slides/thumbs/bridge.jpg" data-src="images/slides/bridge.jpg">
                    <div class="camera_caption fadeFromBottom">
                        Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
                    </div>
                </div>
                <div data-thumb="images/slides/thumbs/leaf.jpg" data-src="images/slides/leaf.jpg">
                    <div class="camera_caption fadeFromBottom">
                        It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
                    </div>
                </div>
                <div data-thumb="images/slides/thumbs/road.jpg" data-src="images/slides/road.jpg">
                    <div class="camera_caption fadeFromBottom">
                        <em>It's completely free</em> (even if a donation is appreciated)
                    </div>
                </div>
                <div data-thumb="images/slides/thumbs/sea.jpg" data-src="images/slides/sea.jpg">
                    <div class="camera_caption fadeFromBottom">
                        Camera slideshow provides many options <em>to customize your project</em> as more as possible
                    </div>
                </div>
                <div data-thumb="images/slides/thumbs/shelter.jpg" data-src="images/slides/shelter.jpg">
                    <div class="camera_caption fadeFromBottom">
                        It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
                    </div>
                </div>
                <div data-thumb="images/slides/thumbs/tree.jpg" data-src="images/slides/tree.jpg">
                    <div class="camera_caption fadeFromBottom">
                        Different color skins and layouts available, <em>fullscreen ready too</em>
                    </div>
                </div>
            </div><!-- .camera_wrap -->

</div><!-- .fluid_container -->
Preview in a browser. Once you have it working change the thumbs and images for yours. Make sure you load them into the correct folders and delete the others.

Joe
Wow - Thanks - As soon as I get this done I will post back here.
__________________
Joe P.
Patchs


WebPlus X2, X4, X5, X6 & X7 - PagePlus X4, X5, X6 & X7 - DrawPlus X4, X5 - PhotoPlus X3 X5
Patchs is offline  
Old 25th January 2013, 07:15 PM   #8
Patchs
Regular Member
 
Join Date: May 2010
Location: Central Texas
Posts: 145
Patchs is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Clitheroe Kid View Post
This will mirror the folder tree in the download.

Joe
I guess I downloaded the wrong file(s) - I went down the site to Download, support, contacts, changelog and downloaded the Camera slideshow (with Demo inside)
__________________
Joe P.
Patchs


WebPlus X2, X4, X5, X6 & X7 - PagePlus X4, X5, X6 & X7 - DrawPlus X4, X5 - PhotoPlus X3 X5
Patchs is offline  
Old 25th January 2013, 07:25 PM   #9
Patchs
Regular Member
 
Join Date: May 2010
Location: Central Texas
Posts: 145
Patchs is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Patchs View Post
I guess I downloaded the wrong file(s) - I went down the site to Download, support, contacts, changelog and downloaded the Camera slideshow (with Demo inside)
Never mind - Sorry - I can't read.

Thanks
__________________
Joe P.
Patchs


WebPlus X2, X4, X5, X6 & X7 - PagePlus X4, X5, X6 & X7 - DrawPlus X4, X5 - PhotoPlus X3 X5
Patchs is offline  
Old 25th January 2013, 07:55 PM   #10
Patchs
Regular Member
 
Join Date: May 2010
Location: Central Texas
Posts: 145
Patchs is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Clitheroe Kid View Post
Preview in a browser. Once you have it working change the thumbs and images for yours. Make sure you load them into the correct folders and delete the others.

Joe
Great - Everything worked the same as your demo.

Thanks
__________________
Joe P.
Patchs


WebPlus X2, X4, X5, X6 & X7 - PagePlus X4, X5, X6 & X7 - DrawPlus X4, X5 - PhotoPlus X3 X5
Patchs is offline  
Old 25th January 2013, 09:05 PM   #11
Patchs
Regular Member
 
Join Date: May 2010
Location: Central Texas
Posts: 145
Patchs is on a distinguished road
Default Re: Fluid (Full Width) Slider

Joe - I had another question but I found the answer - Just to document -

I wanted to change the transition from slide to slide - I found it in the camera.js module.

Thanks Again
__________________
Joe P.
Patchs


WebPlus X2, X4, X5, X6 & X7 - PagePlus X4, X5, X6 & X7 - DrawPlus X4, X5 - PhotoPlus X3 X5
Patchs is offline  
Old 25th January 2013, 11:10 PM   #12
TheOldFart
Advanced Member
 
Join Date: May 2010
Location: Michigan
Posts: 636
TheOldFart is well on the road to greatness
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Clitheroe Kid View Post
This is a fluid slider which I have working as a header in X6. Have a look at the source of the files and demo from the link below. If its what you require, download the files, post back on here, and I will talk you through the installation.

http://www.pixedelic.com/plugins/camera/

Joe
Great find! I love it! Got a couple of them loaded and running in X6 ready to add to a site! Thanks for sharing the link!
TheOldFart is offline  
Old 26th January 2013, 06:59 AM   #13
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Patchs View Post
Joe - I had another question but I found the answer - Just to document -

I wanted to change the transition from slide to slide - I found it in the camera.js module.

Thanks Again
Have you looked at the 'Options' page on the website link. These are added into the script under height: '200px', Each line in this block has a comma at the end EXCEPT for the last line.

Joe
Clitheroe Kid is offline  
Old 26th January 2013, 07:00 AM   #14
Clitheroe Kid
Senior Member
 
Clitheroe Kid's Avatar
 
Join Date: Nov 2009
Location: Cornwall
Posts: 2,758
Clitheroe Kid has much to be proud ofClitheroe Kid has much to be proud ofClitheroe Kid has much to be proud of
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by TheOldFart View Post
Great find! I love it! Got a couple of them loaded and running in X6 ready to add to a site! Thanks for sharing the link!


Joe
Clitheroe Kid is offline  
Old 26th January 2013, 10:13 AM   #15
Patchs
Regular Member
 
Join Date: May 2010
Location: Central Texas
Posts: 145
Patchs is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Clitheroe Kid View Post
Have you looked at the 'Options' page on the website link. These are added into the script under height: '200px', Each line in this block has a comma at the end EXCEPT for the last line.

Joe
OK - That is easier - I did not notice the Options earlier.


Thanks
__________________
Joe P.
Patchs


WebPlus X2, X4, X5, X6 & X7 - PagePlus X4, X5, X6 & X7 - DrawPlus X4, X5 - PhotoPlus X3 X5
Patchs is offline  
Old 12th March 2013, 10:19 AM   #16
claudio
New Member
 
Join Date: Mar 2013
Posts: 12
claudio is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by Clitheroe Kid View Post
Have you looked at the 'Options' page on the website link. These are added into the script under height: '200px', Each line in this block has a comma at the end EXCEPT for the last line.

Joe
Hello Joe, thanks for the tutorial it works perfectelly. But I don't understand where I can change the various options? Transition effects, etc...
Is there an easy way?
claudio is offline  
Old 13th March 2013, 09:30 AM   #17
claudio
New Member
 
Join Date: Mar 2013
Posts: 12
claudio is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by claudio View Post
Hello Joe, thanks for the tutorial it works perfectelly. But I don't understand where I can change the various options? Transition effects, etc...
Is there an easy way?
Is there someone to help me with this issue? please
claudio is offline  
Old 13th March 2013, 09:35 AM   #18
claudio
New Member
 
Join Date: Mar 2013
Posts: 12
claudio is on a distinguished road
Default Re: Fluid (Full Width) Slider

Hello Joe,
I'm new to webplus and to this forum and I don't know what is the best way to have you notice my message... by replying or quoting....
Hope you can help me with the customization of the slider, I'm a bit lost :-)
claudio is offline  
Old 13th March 2013, 09:59 AM   #19
TheOldFart
Advanced Member
 
Join Date: May 2010
Location: Michigan
Posts: 636
TheOldFart is well on the road to greatness
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by claudio View Post
Hello Joe, thanks for the tutorial it works perfectelly. But I don't understand where I can change the various options? Transition effects, etc...
Is there an easy way?
The options for that slider are at the bottom of the page. http://www.pixedelic.com/plugins/camera/

What exactly are you wanting to change or customize?

Here's a screenshot of the customization section of one I put together. https://dl.dropbox.com/u/47141769/Capture.JPG

Just check the options at the bottom of the page so you know what they call each option your looking for and put them together similar to the picture I sent.

Hope that helps some!
TheOldFart is offline  
Old 13th March 2013, 04:43 PM   #20
claudio
New Member
 
Join Date: Mar 2013
Posts: 12
claudio is on a distinguished road
Default Re: Fluid (Full Width) Slider

Quote:
Originally Posted by TheOldFart View Post
The options for that slider are at the bottom of the page. http://www.pixedelic.com/plugins/camera/

What exactly are you wanting to change or customize?

Here's a screenshot of the customization section of one I put together. https://dl.dropbox.com/u/47141769/Capture.JPG

Just check the options at the bottom of the page so you know what they call each option your looking for and put them together similar to the picture I sent.

Hope that helps some!
Thank you very much, yes it helps!

I have another problem: the navigation icons (prev, next play, pause) appear on rollover but somehow it works only in the zone that is outside the site, the space between the site and the edge of the screen. Same for links in the slide.
Any idea where is the problem? maybe something to do with the z-index?
claudio is offline  
 

Bookmarks

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
WebPlus X6: Full width slider in WPx6 with html code masasa WebPlus 10 16th December 2013 08:53 PM
WebPlus X6: Full width slider load times TheOldFart WebPlus 6 10th January 2013 07:59 PM
WebPlus X6: Full page width thebigman WebPlus 9 31st July 2012 12:27 PM
WebPlus X5: full screen width bar Roberto Muscia WebPlus 4 1st May 2012 11:22 PM
WebPlus X5: presenting as full width ericpope WebPlus 6 24th August 2011 02:57 PM


All times are GMT +1. The time now is 11:45 PM.