Gallery

Are there written instruction on how to implement the gallery as show in the demo? Some documentation would be nice.

Thanks.

Hi,

We are still working on the documentation (3 styles are available for the Quark theme, so it's a lot of work), regarding the gallery, please use the default syntax:

Code: Select all

<div class="site">
<div class="gk-cols gk-gallery" data-cols="3">
<div>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image1.jpg" data-size="1280x1280" data-title="Modern clock" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb1.jpg" height="334" width="334" alt="Thumbnail I" /></a>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image2.jpg" data-size="1280x853" data-title="Painting love" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb2.jpg" height="224" width="335" alt="Thumbnail II" /></a>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image3.jpg" data-size="1164x872" data-title="Green Barrel" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb3.jpg" height="251" width="335" alt="Thumbnail III" /></a>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image4.jpg" data-size="1280x853" data-title="Wooden doors" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb4.jpg" height="224" width="335" alt="Thumbnail IV" /></a>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image5.jpg" data-size="852x1280" data-title="Japanese dinner" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb5.jpg" height="504" width="335" alt="Thumbnail V" /></a>
</div>
<div>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image6.jpg" data-size="853x1280" data-title="Quarkgraphy art" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb6.jpg" height="457" width="305" alt="Thumbnail VI" /></a>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image7.jpg" data-size="1280x853" data-title="Sailing in the fog" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb7.jpg" height="203" width="305" alt="Thumbnail VII" /></a>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image8.jpg" data-size="1280x853" data-title="Travel time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb8.jpg" height="204" width="305" alt="Thumbnail VIII" /></a>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image9.jpg" data-size="960x1280" data-title="For ged" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb9.jpg" height="406" width="305" alt="Thumbnail IX" /></a>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image10.jpg" data-size="1280x853" data-title="Summer time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb10.jpg" height="203" width="305" alt="Thumbnail X" /></a>
</div>
<div>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image11.jpg" data-size="1280x853" data-title="Mobile music" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb11.jpg" height="198" width="297" alt="Thumbnail XI" /></a>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image12.jpg" data-size="1155x1280" data-title="Guitar artist" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb12.jpg" height="329" width="297" alt="Thumbnail XII" /></a>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image13.jpg" data-size="873x1280" data-title="Typewriter" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb13.jpg" height="436" width="297" alt="Thumbnail XIII" /></a>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image14.jpg" data-size="1280x853" data-title="Morning coffee" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb14.jpg" height="199" width="297" alt="Thumbnail XIV" /></a>
<a href="http://localhost/quark/wp-content/themes/Quark/images/gallery/image15.jpg" data-size="1280x848" data-title="Fitness time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="http://localhost/quark/wp-content/themes/Quark/images/gallery/thumb15.jpg" height="196" width="297" alt="Thumbnail XV" /></a>
</div>
</div>
</div>


The full code for a single image in the gallery looks like this:

Code: Select all

<a href="Image URL Here" data-size="Zoomed Image Size Here" data-title="Zoomed Image Title Here" data-desc="Zoom Image Description Here"><img src="Image URL Here" height="Height on Gallery Page here" width="Width on Gallery Page here" alt="Alt Image Title Here" /></a>

it's enough to replace image paths and texts.