Trying to incorporate a before/after slider

Kirby 2 Solved ✅
1

Very new to website development. I’m trying to incorporate this jquery before/after slider into my website using the tutorial found here: http://emmapan.com/jquery-tutorial/tutorial02.html
For the life of me, I can’t get it to work.

I’ve added all necessary files, changed most of the “obvious” things in the code. What I get is two pictures standing one on top of the other (the before and after pictures), without any sort of slider function offered.

Here are the things I did:

  1. In header.php added
<?= css('assets/css/twentytwenty.css') ?>
  1. In footer.php added
<?php echo js('assets/js/jquery.event.move.js') ?>
<?php echo js('assets/js/jquery.twentytwenty.js') ?>
  1. In article.php (subpage of blog.php), added this
<div class= "twentytwenty-wrapper">
<div id="before_after_images" class = "twentytwenty-container">
 <img class = "twentytwenty-before" src="images/image1.jpg">
<img class = "twentytwenty-after" src="images/image2.jpg">
</div>
</div><!-- end before_after_images -->
  1. In twentytwenty.js added
$(window).load(function() {
$('#before_after_images').twentytwenty();
});

Sorry if this question is inappropriate. Thank you for any and all guidance

2

Well, this might be too obvious, but did you include jquery.js (before any jquery.* plugins)?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
3

Good question - I did that. Thanks for responding.

Any other suggestions, Kirby community?

4

You should not have added the code into twentytwenty.js. If you look at the examples that come with twentyywenty, your page should be set up like this.

    <script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
    <script src="js/jquery.event.move.js"></script>
    <script src="js/jquery.twentytwenty.js"></script>
    <script>
    $(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>

Compare the index.html file with your site, and you should be able to figure out where you have gone wrong.

5

Thank you for your input, jimbobrjames

I applied your suggestion, but it proved unsuccessful…at first.

Then what I did was change the

id = "before_after_images"

to

id = "container1"

I also changed the

$('#before_after_images')

in

$('#before_after_images').twentytwenty();
});

to

$('#container')

and now it works…

6

Glad you got it going. In future, if you wrap your example code in 3 backticks in your posts…

it will be easier for people to read :slight_smile:
1 Like
7

Noted! Thank you :relaxed: