[Charles_Ryder]

Hello,

I’m setting up the Photographer template and I need to set up a “photo editing” category for my portfolio where I could show before and afters. I found a jQuery plugin called TwentyTwenty (http://zurb.com/playground/twentytwenty) that would be great, but I wasn’t sure if I would create problems adding another script. I’m also not sure which html pages of the ones you provided that I would use. I think simpler would be better.

Would there be a problem with nesting scripts? I’m not that versed with jQuery. Any advice on how I can make it work would be appreciated. Let me know if you need more information.

[ahmetsali]

Hi, you can try it by followwing the instrucitons under Basic Usage in the Github page and see how it works with the theme;

https://github.com/zurb/twentytwenty

[motti_b]

I installed TwentyTwenty on my site.

1. First download the folders.
2. I put the folders in the root level of the site (the same level as CSS, Images etc.)
3. I use the template layout.dwt to make all the changes so I put this code at the top of the layout.dwt:

NOTE: I put it right after the line so it is the first two CSS files on the page.

At the bottom bottom of the layout.dwt (after the line:

like this:

$(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'});
});

The code to put on any page you want the “Before and After” presentation is:

NOTE: Make sure the path to your images is correct. Make sure you write the width and height of each image.

I hope that helps.

Motti

[motti_b]

Why isn’t the code showing? I used to show it... :-(

[ahmetsali]

Hi motti_b

you need to encode your html code before posting it here.

http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx

[motti_b]

OK, Here is goes again (and why we need to encode?? Would be so much easier just adding the tag..Just saying)

I installed TwentyTwenty on my site.

1. First download the folders.
2. Put the folders in the root level of the site (the same level as CSS, Images etc.)
3. I use the template layout.dwt to make all the changes so I put this code at the top of the layout.dwt:

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

NOTE: I put it right after the line so it is the first two CSS files on the page.

Now...
At the bottom bottom of the layout.dwt (after the line:
<script src="../js/main.js"></script>

you put thid code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="twenty/js/jquery.event.move.js"></script>
<script src="twenty/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>

Now you put the code below on any page you want the “Before and After” presentation box:

<div class="twentytwenty-container">
<img class="twentytwenty-before" src="your-image.jpg" width="xxxx" height="xxxx" >
<img class="twentytwenty-after" src="your-images.jpg" width="xxxx" height="xxx" >
</div>

NOTE: Make sure the path to your images is correct. Make sure you write the width and height of each image.

I hope that helps.

Motti

[ahmetsali]

@motti_b

we are redesigning our site and support forums now and planning to launch the new design in a month, hopefully, we will also make some improvements to our forums system, auto-encoding of html codes wrapped by code or pre is on our to-do list. Thanks for the feedback and your answer.

Cheers.

[motti_b]

Great! That would be really good.