Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fullscreen image support #27

Open
windhood opened this issue Feb 2, 2012 · 3 comments
Open

fullscreen image support #27

windhood opened this issue Feb 2, 2012 · 3 comments

Comments

@windhood
Copy link

windhood commented Feb 2, 2012

Cool component!
is it possible to support image displayed in full screen and can resize if the browser window resized?

@joelambert
Copy link
Owner

Hi, making the slider responsive is something I'd like to do but given the way that the code works its not trivial & will likely take some time.

@ghost
Copy link

ghost commented Nov 28, 2014

Not perfect, but might work for some:

    <style>
        body, html {
            padding: 0;
            margin: 0;
        }
        #slider {
            -webkit-transform-origin: 0 0;
        }
    </style>

    <script>
        jQuery(function ($) {
            window.f = new flux.slider('#slider', {
                pagination: false,
                autoplay: true
            });
            window.setTimeout(function () {
                var surface = $('#slider .surface');
                var factor = $(window).width() / surface.width();
                $('#slider').css('transform', 'scale(' + factor + ', ' + factor + ')')
            }, 500);
        });
    </script>

@JaweenDeng
Copy link

Not perfect, but might work for some:

    <style>
        body, html {
            padding: 0;
            margin: 0;
        }
        #slider {
            -webkit-transform-origin: 0 0;
        }
    </style>

    <script>
        jQuery(function ($) {
            window.f = new flux.slider('#slider', {
                pagination: false,
                autoplay: true
            });
            window.setTimeout(function () {
                var surface = $('#slider .surface');
                var factor = $(window).width() / surface.width();
                $('#slider').css('transform', 'scale(' + factor + ', ' + factor + ')')
            }, 500);
        });
    </script>

hellow,i also meeted this question,i try to use it but no work, i hope writer can support fullscreen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants