WordPress.org

Forums

Aesop Story Engine
[resolved] Fullscreen Parallax (13 posts)

  1. sallycinnamon
    Member
    Posted 11 months ago #

    Hello,

    is it possible set a parallax to fullscreen with aesop (meaning not only 100% width but also height)? I can't seem to work that out!

    https://wordpress.org/plugins/aesop-story-engine/

  2. simple_mama
    Member
    Posted 11 months ago #

    Hi there!

    Pretty much anything is possible, and this is also dependent upon your theme. If your theme behaves nicely and can display images at full width, then you'd have to write a little jQuery to get this done. Something like (code untested):

    jQuery('.targeted-thing').css({'height':(jQuery(window).height())+'px', 'width':(jQuery(window).width())+'px'});

    This would set the image to the width and height of the browser.

    I'm sure there are probably WordPress plugins out there that can do this as well (and much easier!).

  3. sallycinnamon
    Member
    Posted 11 months ago #

    Hey, thanks for the quick reply!

    I haven't quite figured it out though - should putting this in my head section do the trick?

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        /* here comes the jquery code */
    jQuery('.aesop-parallax-sc').css({'height':(jQuery(window).height())+'px', 'width':(jQuery(window).width())+'px'});
    </script>
  4. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Depends if you're using a bespoke theme. If you're not then you don't want to be editing your theme's files. Try using a plugin to add your JavaScript: http://wordpress.org/plugins/custom-javascript-editor/

    And you do not want to be adding in the jQuery library again, loading 2 versions of jQuery will likely break jQuery all together.

  5. sallycinnamon
    Member
    Posted 11 months ago #

    Hello, thanks for the hint at loading jQuery twice!

    I just installed the plugin even though I'm using an already heavily tweaked version of Book Lite, tried to put that snippet of code there - doesn't work either.

    Is referring to ".aesop-parallax-sc" correct?

    Thanks for all the help again, you're superb.

  6. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Sorry I'm not familiar with this plugin, but just noticed your code isn't using a no-conflict wrapper,
    Try this:

    jQuery(document).ready(function($) {
    
        $('.aesop-parallax-sc').css({
            'height': $(window).height() + 'px',
            'width': $(window).width() + 'px'
        });
    
    });
  7. sallycinnamon
    Member
    Posted 11 months ago #

    I'm just really tired, maybe stupid - and made a typo.

    IT WORKS! YAY! YIPPIE! YES YES OH YEAH!

    Thank you so so so much.

  8. simple_mama
    Member
    Posted 11 months ago #

    Glad you got it working, and thanks for the help Andrew!

  9. Nick Haskins
    Member
    Plugin Author

    Posted 11 months ago #

    :)

  10. sallycinnamon
    Member
    Posted 11 months ago #

    Hello again!

    Since you helped me so nicely I thought I'd ask again if anyone of you wonderful people has a quick solution: Is there a really, really simple way to make my parallax-based entries readable on mobile devices? I dont' want to use any of the usual plugins because the site looks quite alright on my tablet and phone, including popup bubbles - except for those cut off parallax images and captions. Any way to make those zoomable/appear as normal images fitted to the screen, maybe?

  11. simple_mama
    Member
    Posted 11 months ago #

    You'd have to write some browser specific CSS (targeting mobile devices), then you can have it display on each device however you'd like. :) If you don't already use a plugin to save your custom CSS code, I recommend using one called Simple Custom CSS (http://wordpress.org/plugins/simple-custom-css/).

  12. sallycinnamon
    Member
    Posted 11 months ago #

    Thanks!!!

    The expression "targeting mobile devices" was just what I needed to google my way through tutorials!

  13. simple_mama
    Member
    Posted 11 months ago #

    You're very welcome! :)

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.