Image Compare Particle Documentation

Image Compare Particle helps storytellers compare two pieces of similar media, including photos, and GIFs See how Image Compare can be designed beautifully on Demo Page.

# Image Compare Package contents

Files Description
jlimagecompare.yaml Contains the Image Compare particle settings.

jlimagecompare.html.twig The Twig file to pull information, settings.
juxtapose.min.css Contains the Image Compare CSS.
juxtapose.min.js Contains the Image Compare JavaScript

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Go to Template/Theme Settings > select the Layout to add Image Compare particle (i.e: Home) -> Layout tab -> Drag and drop the Image Compare Particle from Particles panel (left corner) to the section you want to display the Image Compare.

Settings

Settings Description
Content Before Common settings for Image Content Before
Title Customize the label for first image (Optional).
Image Select the first image.
Content After Common settings for Image Content After
Title Customize the label for second image (Optional).
Image Select the second image.
Mode Create horizontal or vertical before/after image sliders.
CSS Classes CSS class name for the particle.

Style Tab

Settings Description
Control Background Customize the background color.
Label Background Customize the label background color.
Label Color Customize the label color.

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

JoomLead Gantry 5 Particles 2.1.3 released See what's new
Sale 30% OFF Cyber Monday. Use the discount code CM2019 during checkout Buy Now