Improve company productivity with a Business Account.Sign Up

x
?
Solved

Jquery cycle to full screen

Posted on 2013-10-25
4
Medium Priority
?
386 Views
Last Modified: 2013-11-17
Hello Experts,

I am using jQuery cycle for my slideshows. I would like to have a full screen mode as an option. The slideshows are in the fixed width and height container so I am trying to add the full screen option.

I saw this demo here: http://blog.aaronvanderzwan.com/2012/07/maximage-2-0/#demo which i think is really cool yet this is a full screen from the beginning :-)

Is there a way to integrate this from a small fix width slideshow to fullscreen?

Thanks guys!
0
Comment
Question by:Refael
  • 2
4 Comments
 
LVL 31

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 1000 total points
ID: 39600101
Basically the "trick" is done with this:
element.style {
    height: 448px;
    width: 1452px;
}
body .mc-cycle {
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    z-index: -1;
}

Open in new window

Just set your slider div dimensions to fill the window and with a position:fixed starting at the top left corner.
Changing view will be as easy as changing the classes applied to the container div.
0
 

Author Comment

by:Refael
ID: 39600111
Hi AlexCode :-)

I am not sure i understand. Can you maybe provide a quick example?

Thank you!
0
 
LVL 58

Accepted Solution

by:
Gary earned 1000 total points
ID: 39601275
This is the theory - without real code to base this on there is no point trying to make a real example

Add a button
<button id="fullscreen">Full Screen</button>

Add CSS class setting the container full screen (make sure it comes after the initial container class)
.fullscreen-class {width:100%;height:100%}

Then some Jquery
$("#fullscreen").click(function(){
     $("#container").toggleClass("fullscreen-class")

})
0
 

Author Closing Comment

by:Refael
ID: 39654613
Thanks guys
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
AngularJS web development a very simple procedure. So, to put it, in short, AngularJS’ stand out features are – Two-way data binding, MVC structure, directives, templates, dependency injections and testing.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

585 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question