HW-Parallax; Responsively serving images?

[wingnutart]

Brendan, Great plugin; I had a tough time getting it setup at first, but now it's working like a champ at The Bay Vodka

My question is - how should I go about making this work responsively? I'd like the large assets only to be downloaded if the users screen is larger then 768px.

Would something like the solution here work?

Thanks for your help, Nick

[ziad-saab]

Hi there, thanks for your feedback. By the way this is not Brendan, my name is Ziad and I am the developer of this plugin. Nice to meet you :)

The issue you are referencing seems to be about deactivating the plugin for certain media queries. The way my plugin is written at the moment is mostly declarative. I think it could easily be augmented to have a destroy method that could be called programmatically.

In order to make the image loading responsive I could see the plugin supporting additional markup that looks like a media query. For this to happen I would need to add a dependency on the enquire library for these cases.

Unfortunately at the moment I have very little time to spend on this plugin, but if you are interested in making a pull request I would gladly take a look at it.

By the way I checked your site and it looks really nice.

[wingnutart]

Thanks Ziad - and thanks for sharing your cool plugin!

My initial plan was to use something like Foundations' Interchange to let the browser grab larger assets when on a large screen device. Maybe that is a better option, since I want to target an asset that is in the HTML.

Let me see if I can make any headway with this, and I'll report back what I find.

[markchitty]

Hi Nick,

Ziad's just merged the pull-request I submitted to address exactly this issue.

My usage example was based on using Modernizr's touch detection:

var touch = Modernizr.touch;
$('.parallax').parallax({
  image_attr: (touch) ? 'image-mobile' : 'image',
  scroll_factor: 0.5
});

but you could easily check the browser window width and switch on that:

$('.parallax').parallax({
  image_attr: ($(window).width() < 768) ? 'image-mobile' : 'image',
  scroll_factor: 0.5
});

In the HTML you need to define an additional data- attribute for the mobile image src:

<div data-image="image_source_relative_to_page" data-image-mobile="mobile_image_source"
data-width="image_width_in_pixels" data-height="image_height_in_pixels">

Ziad, I'm using the plugin on this landing page for Guardian Soulmates, The Guardian's online dating site.

[ziad-saab]

Cool, I'll add it to the list of sites :) Thanks for the PR!

[wingnutart]

Looks great,

I'll update my site, too!

Nick Silva

wingnutart.com

On Aug 14, 2014, at 6:45 AM, Mark Chitty notifications@github.com wrote:

Hi Nick,

Ziad's just merged the pull-request I submitted to address exactly this issue.

My usage example was based on using Modernizr's touch detection:

var touch = Modernizr.touch; $('.parallax').parallax({ image_attr: (touch) ? 'image-mobile' : 'image', scroll_factor: 0.5 }); but you could easily check the browser window width and switch on that:

$('.parallax').parallax({ image_attr: ($(window).width() < 768) ? 'image-mobile' : 'image', scroll_factor: 0.5 }); In the HTML you need to define an additional data- attribute for the mobile image src:

<div data-image="image_source_relative_to_page" data-image-mobile="mobile_image_source" data-width="image_width_in_pixels" data-height="image_height_in_pixels"> Ziad, I'm using the plugin on this landing page for Guardian Soulmates, The Guardian's online dating site.

— Reply to this email directly or view it on GitHub.