Forum for discussing general topics related to Couch.
2 posts Page 1 of 1
These are my buttons:

Code: Select all
<div class="work_menu text-center">
                                <div id="filters" class="toolbar mb2 mt2">
                                    <button class="btn-md fil-cat filter active" data-filter="all"><h4>ALL</h4></button>/
                                    <button class="btn-md fil-cat filter" data-rel="aim" data-filter=".aim"><h4>AIM PRODUCTS</h4></button>/
                                    <button class="btn-md fil-cat filter" data-rel="beauty" data-filter=".beauty"><h4>BEAUTY TREATMENTS</h4></button>
                                   
                                </div>

                            </div>

This is the images that it filters which i cannot get to work:
Code: Select all
<div id="portfoliowork"> 
                                <div class="single_portfolio tile scale-anm aim photo">
                                    <img src="assets/images/aim1.jpg" style="height:300px; width:480px; border-style:dashed; border-width:0.5px; border-color:mediumorchid;" alt="" />
                                    <a href="assets/images/aim1.jpg" class="portfolio-img">
                                        <div class="grid_item_overlay">
                                            <div class="separator4"></div>
                                            <h3>Aim Products</h3>
                                            <p>Click here to Enlarge</p>
                                        </div>
                                    </a>
                                </div>
                                <div class="single_portfolio tile scale-anm aim photo" >
                                    <img src="assets/images/aim2.jpg" style="height:300px; width:480px; border-style:dashed; border-width:0.5px; border-color:#4AB8D3;" alt="" />
                                    <a href="assets/images/aim2.jpg" class="portfolio-img">
                                        <div class="grid_item_overlay">
                                            <div class="separator4"></div>
                                            <h3>Aim Products</h3>
                                            <p>Click here to Enlarge</p>
                                        </div>
                                    </a>
                                </div>
</div>

I also want to paginate the gallery to 12 images with a see more option

view http://www.yallabinafitness.co.za
If you search the forum, you'll find several posts pertaining to isotope gallery.
Anyway, following is a simplified version that should get you going -

There are two main components to Isotope gallery (or other JS galleries) -
1. The menu items that act as 'filter'
2. The actual image items that are to be filtered.

and what ties the two components together is the CSS class name(s) assigned to the image items.
For example, in the following snippet the class names - 'metal', 'alkali' etc. connect the filter menu with the items.
Code: Select all
<!-- menu -->
<ul id="filters">
    <li><a href="#" data-filter="*">Show all</a></li>
    <li><a href="#" data-filter=".metal">Metal</a></li>
    <li><a href="#" data-filter=".alkali">Alkali</a></li>
</ul>

<!-- actual items -->
<div id="container">
  <div class="isotope-item alkali">...</div>
  <div class="isotope-item metal">...</div>
  <div class="isotope-item alkali">...</div>
  <div class="isotope-item metal">...</div>
  ...
</div>

Using Couch to make the output dynamic, we normally use the 'pages' as items and the 'folders' as the filtering component.
Following is what the couchified code could look like -
Code: Select all
<!-- menu -->
<ul id="filters">
<li><a href="#" data-filter="*">Show all</a></li>
    <cms:folders masterpage='your-template.php' hierarchical='1'>
        <li><a href="#" data-filter=".<cms:show k_folder_name />"><cms:show k_folder_title /></a></li>
    </cms:folders>
</ul>

<!-- actual items -->
<div id="container">
    <cms:pages masterpage='your-template.php'>
        <div class="isotope-item <cms:show k_page_foldername />">...</div>
    </cms:pages>
</div>

You can modify the code to suit your need.

Hope it helps.
2 posts Page 1 of 1