custom before and after label

francesco14 commented 8 years ago

Customize before and after label by adding a title attribute to the img tags

bcole808 commented 7 years ago

I would love to see this feature merged.

I looked at the code and think that it makes great use of the images title attribute, as well as content: attr(data-content); to actually display the custom text.

Do we need to set the labels to "Before" and "After" in case no title is specified? By doing something like this perhaps: var beforeImgTitle = beforeImg.attr("title") || "Before";

raphaeleidus commented 7 years ago

This was implemented a slightly different way

$(".twentytwenty-container").twentytwenty({
  before_label: 'January 2017', // Set a custom before label
  after_label: 'March 2017' // Set a custom after label
});

amfie commented 2 years ago

I would love to see this feature merged.

I looked at the code and think that it makes great use of the images title attribute, as well as content: attr(data-content); to actually display the custom text.

Do we need to set the labels to "Before" and "After" in case no title is specified? By doing something like this perhaps: var beforeImgTitle = beforeImg.attr("title") || "Before";

This would be ideal for use with multiple slides. I have tried inserting this in the js and then using the variable, but getting the error (cannot read properties of undefined (reading 'attr'). I am a bit green with scripting in general. Could you give any advice on how to get it working? Thanks.

zurb / twentytwenty

custom before and after label #59