jQuery Twenty Twenty Code

[Amanda]

Hi,

I'm trying to apply the jQuery twenty twenty code (view code instructions here: http://zurb.com/playground/twentytwenty) to my client's shopify development site. I've read through almost all the documentation for adding jQuery and I'm just lost as to how to add this code into the homepage.

I want to add the HTML to the homepage, where in the template files do I add it? The theme.liquid file? Can you add HTML directly in there without it messing up the site? I tried doing that, but I couldn't get the images to show up or the jQuery function to work.

Below is the code:

<link href="css/foundation.css" rel="stylesheet" type="text/css" />
  <link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />

<div id="container1">
  <img src="sample-before.png">
  <img src="sample-after.png">
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="js/jquery.event.move.js"></script>
    <script src="js/jquery.twentytwenty.js"></script>
    <script>
    $(window).load(function(){
      $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
      $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
    });
    </script>

Someone please help! Thank you!

- Amanda

[Jamie_D_]

This post has been moved to the Shopify Design forum.

[Fab6]

Hi Amanda,

Did you succeed on installing Twentytwenty? If yes, could explain your solution?

I am struggling too...

Thanks for your time.

[Thibault7]

Hi, did you succesfully implemented this before and after container? I would be more than interested to know how.

Thanks

[fishtank]

Hi,

I did a successful integration on this one

<script type="text/javascript">
jQuery( document ).ready( function( $ ) {
$( ".twentytwenty-container" ).each(function() {
$(".twentytwenty-container").twentytwenty({
default_offset_pct: 0.5, // How much of the before image is visible when the page loads
orientation: 'horizontal', // Orientation of the before and after images ('horizontal' or 'vertical')
before_label: 'January 2017', // Set a custom before label
after_label: 'March 2017', // Set a custom after label
no_overlay: true, //Do not show the overlay with before and after
move_slider_on_hover: false, // Move slider on mouse hover?
move_with_handle_only: true, // Allow a user to swipe anywhere on the image to control slider movement.
click_to_move: true // Allow a user to click (or tap) anywhere on the image to move the slider to that location.
});
});
});
</script>

hope this one will help

thanks,

[fishtank]

try to move the jquery.min declaration on top