Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Using ISOTOPE V1.5.25 Category and pagination filter for a portfolio

Hi ,

I bought a Thalasse theme and I try to do a portfolio this theme using your isotope js script. My case is the following:

I do a portfolio and I would like to only print 21 element per page (7 lines 3 cols) But the portfolio can also be filtering vy category.

The code are the follwing to create the category filter :

                       <ul id='filters'>
                        <li class="active"><a href="#" data-filter="*">All</a></li>
                        <li><a href="#" data-filter=".Design">Design</a></li>
                        <li><a href="#" data-filter=".Photography">Photography</a></li>
                        <li><a href="#" data-filter=".Graphics">Graphics</a></li>
                         </ul>

To create the pagination filter:

                   <ul class="pagination" id='filters'>-->
                        <li><a href="#"  data-filter=".Page1">1</a></li>
                        <li><a href="#" data-filter=".Page2">2</a></li>
                      </ul><!-- pagination end -->   

To create an isotope item: ITEM PICTURE AND TXT

I would like to hide the pagination filter if I select a category (i.e only keep it active if the category choice is 'ALL') How I can do it ? Secondly I would like to keep active the 'ALL' category txt when i do a click on pagination 'Page1' or 'Page2' Choice. Are you thinking it's possible?

User Gravatar

GeorgetAlain

Posted Jan 14 2014 5:54 UTC

$50


  • Assigned To NBoychev
  • Solved
  • isotope
  • 6155 Views

15 Replies


can you provide a link for as an exmaple?

User Gravatar

guyisra

Posted Jan 14 2014 6:23 UTC

Hello Georget,

I'd changed the markup a little, because you the IDs should be unique per page:

<ul id="category-filters" class="filters">
    <li class="active"><a href="#" data-filter="*">All</a></li>
    <li><a href="#" data-filter=".Design">Design</a></li>
    <li><a href="#" data-filter=".Photography">Photography</a></li>
    <li><a href="#" data-filter=".Graphics">Graphics</a></li>
</ul>

<ul id="page-filters" class="filters">
    <li><a href="#" data-filter=".Page1">1</a></li>
    <li><a href="#" data-filter=".Page2">2</a></li>
</ul><!-- pagination end --> 

And the JS:

$('.filters').on('click', 'a', function(){
    var $parent = $(this).closest('li');
    var $filters = $('.filters').find('li');
    var $filterSiblings = $parent.siblings();

    var isPageFilter = $parent.closest('.filters').is('#page-filters');

    // Get clicked filters
    var filter = this.getAttribute('data-filter');


    // Set filter to isotope
    $('.isotope').isotope({filter: filter});

    // Set active state
    if(!isPageFilter){
        $filters.removeClass('active');
    }else{
        $filterSiblings.removeClass('active');
    };

    $parent.addClass('active');


    // Hide page filters if not all and set the first page as active
    if(filter === '*'){
        $('#page-filters').show().find('li').first().addClass('active');
    }else{
        $('#page-filters').hide();
    };

});

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jan 14 2014 10:43 UTC

Dear Nikola,

You're welcome your post will be very helpfull. Now I just need to adapt the css sheet.

I just doing two modification to keep 'All' button active and else if i do a clik on the page 2 but by the way I need to know the number of page to add it in the condition perhaps you can provide a tips to do it more clean :

>  if (filter === '.Page1' || filter === '.Page2')
>       {
>       $('#page-filters').show().find('li').first().addClass('active');
>       $('#category-filters').show().find('li').first().addClass('active');
>       }else{
>         $('#page-filters').hide();
>       };

I hope I can apply my css style without broken this feature.

Thanks a lot for your help Regards

User Gravatar

GeorgetAlain

Posted Jan 15 2014 1:43 UTC

Hi Georget,

My code should do that, but if not, can you provide me a link where I can see the issue?

Your CSS shouldn't break this feature, but if you need help with it - just ask and provide the code.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jan 15 2014 5:42 UTC

Hi Nikola,

I try by myself and I provide to you the feedback. So I think I give to you the result later this afternoon or tomorrow. If I've still some problem i provide to you more element. Soon it's ok I clause this case and make my donate :-)

Regards Alain

User Gravatar

GeorgetAlain

Posted Jan 15 2014 5:53 UTC

Hi Nikola,

Your modification help me to understand more how it works ! So after Learning a little the syntax, few method and trying a lot to adapt it, I do by myself a solution and she's works well now.

I can send it to you to see if you can optimize it are you ok to have a look?

Soon I've got your answer I can close this case.

User Gravatar

GeorgetAlain

Posted Jan 20 2014 1:47 UTC

Hi Alain,

Sure, you can post the code here, and I will optimize it for you. If you don't want it to be public, please contact CodersClan support.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jan 20 2014 1:56 UTC

here the full php page. I do a script to adapt automatically the pagination to the real number of page (linking to a database)

You're welcome for your suggestion.

Regards Alain

requete($req); $Rref = mysql_fetch_object($Q); ?>

Nomdusite;?> - Nos réalisations Phrase;?>"> Nomdusite;?>">

    <!-- stylesheets -->
    <link rel="stylesheet" href="css/grid.css" />
    <link rel="stylesheet" href="css/style.css" />   
    <link rel="stylesheet" href="css/darkgreen.css" />
    <link rel="stylesheet" href="css/prettyPhoto.css" media="screen" />
    <link rel="stylesheet" href="css/responsive.css"/>

    <!-- google web fonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&amp;subset=latin,latin-ext,cyrillic-ext' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700&amp;subset=latin,latin-ext' rel='stylesheet' type='text/css'>

    <!-- Icons -->
    <link rel="stylesheet" href="pixons/style.css" />
    <link rel="stylesheet" href="iconsfont/iconsfont.css" />

    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
    <![endif]-->

    <!--[if lt IE 9]>
        <script src="js/selectivizr-min.js"></script>
    <![endif]-->

    <!--[if IE 8]>
        <link rel="stylesheet" href="css/ie8.css" media="screen" />
    <![endif]-->

</head>

<body>

        <!-- .container start -->
        <div class="container">

            <!-- .row start -->
            <div class="row">
                <!-- ..grid_12 start -->
                <div class="grid_12">

                    <div class="title">
                        <h1><?=$Rref->Nomdusite;?> Nos r&eacute;alisations</h1>
                      <?php include("menu.php"); ?>
                    </div>

                    <div class="subtitle">
                        <span class="subtitle">Consultez un panel de nos cr&eacute;ations</span>
                    </div>
                </div><!-- ..grid_12 end -->
            </div><!-- .row end -->   

        </div><!-- .container end -->         
    </section><!-- #page-title end -->

    <!-- .page-content start -->
    <section class="page-content">
        <!-- .container start -->
        <section class="container">


               <!-- .row start -->
            <div class="row portfolio-filters">
                <section class="grid_12">
               <ul id="category-filters" class="filters">
                        <li <? if ($_GET['data-filter']=='none' or $_GET['data-filter']=='') { ?>class="active"<? } ?>><a href="#" data-filter=".Page1">Tous</a></li>
                        <!--<li><a href="#" data-filter=".Design">Design</a></li>
                        <li><a href="#" data-filter=".Photography">Photography</a></li>
                        <li><a href="#" data-filter=".Graphics">Graphics</a></li>-->
                        <li <? if ($_GET['data-filter']=='.Artisanats') { ?>class="active"<? } ?>><a href="#" data-filter=".Artisanats">Artisanats | B&acirc;timent</a></li>
                        <li <? if ($_GET['data-filter']=='.Automobile') { ?>class="active"<? } ?>><a href="#" data-filter=".Automobile">Automobile</a></li>
                        <li <? if ($_GET['data-filter']=='.Agriculture') { ?>class="active"<? } ?>><a href="#" data-filter=".Agriculture">Agriculture | Viticulture</a></li>
                        <li <? if ($_GET['data-filter']=='.Communication') { ?>class="active"<? } ?>><a href="#" data-filter=".Communication">Communication</a></li>
                        <li <? if ($_GET['data-filter']=='.Distribution') { ?>class="active"<? } ?>><a href="#" data-filter=".Distribution">Distribution</a></li>
                        <li <? if ($_GET['data-filter']=='.Informatique') { ?>class="active"<? } ?>><a href="#" data-filter=".Informatique">Informatique | NTIC</a></li>
                        <li <? if ($_GET['data-filter']=='.Industriel') { ?>class="active"<? } ?>><a href="#" data-filter=".Industriel">Industriel | BTP</a></li>
                        <li <? if ($_GET['data-filter']=='.Administrations') { ?>class="active"<? } ?>><a href="#" data-filter=".Administrations">Administrations | Mairies</a></li>
                        <li <? if ($_GET['data-filter']=='.Mode') { ?>class="active"<? } ?>><a href="#" data-filter=".Mode">Mode, Beaut&eacute;,Sant&eacute;</a></li>
                        <li <? if ($_GET['data-filter']=='.Finance') { ?>class="active"<? } ?>><a href="#" data-filter=".Finance">Finance | Conseil | Immobilier</a></li>
                        <li <? if ($_GET['data-filter']=='.Tourisme') { ?>class="active"<? } ?>><a href="#" data-filter=".Tourisme">Tourisme | Loisirs</a></li>
                        <li <? if ($_GET['data-filter']=='.Franchise') { ?>class="active"<? } ?>><a href="#" data-filter=".Franchise">Franchise | Syndicat</a></li>
                    </ul><!-- #filers end -->
                </section><!-- .grid_12 end -->
            </div><!-- .row end -->
requete($req); $nb_result = mysql_num_rows($Q); $nb_page= ceil($nb_result/21); //echo $nb_result; ?>
             <!-- .row start -->
            <div class="row">
                <div class="grid_12">                   
                    <!-- .pagination start -->
                   <ul id="page-filters" class="filters pagination">
                        <li class="active"><a href="#" data-filter=".Page1">1</a></li>
                        <? for ($i=2; $i<=$nb_page; $i++){?>
                        <li><a href="#" data-filter=".Page<?=$i;?>"><?=$i;?></a></li>
                        <? } ?>
                        <!--<li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li class="next"><a href="#">next</a></li>-->
                    </ul><!-- pagination end -->                        
                </div><!-- .grid_12 end -->
            </div><!-- .row end -->



            <!-- .row.portfolioitems-holder start -->
            <div class="row portfolioitems-holder">
                <ul id="portfolioitems" class="isotope">
'.$count .'result modulo : '.$cat_page);
?>
                    <li class="grid_4 isotope-item <?=$R->categorie;?> Page<?=$cat_page;?>">

                        <figure class="portfolio-style-2">

                            <div class="portfolio-img">
                                <a href="site-internet.php?id=<?=$R->id_portfolio;?>">
                                    <img src="img/portfolio/cols/<?=$R->idimg;?>.jpg" alt="portfolio image"/>
                                </a>

                                <div class="portfolio-img-hover">
                                    <div class="mask"></div>

                                    <ul>
                                        <li <? if ($R->url!='') { // si pas d'url alors pas de lien ?> class="portfolio-zoom"<? } else {?>  class="portfolio-zoom2" <? }?> >
                                         <!-- ouverture des images en grandes taille fa├žon diaporama   <a href="img/portfolio/large/<?//=$R->img1;?>" 
                                               data-gal="prettyPhoto[pp_gallery]" class="icon-search"></a> -->
                                           <a href="site-internet.php?id=<?=$R->id_portfolio;?>" class="icon-search"></a>
                                        </li>
url!='') { // si pas d'url alors pas de lien ?>
                                            <a href="http://<?=$R->url;?>" target="_blank" class="icon-link"></a>

                                        </li>  <? } ?>
                                    </ul>
                                </div><!-- .portfolio-img-hover end -->
                            </div><!-- .portfolio-img end -->

                            <figcaption>
                                <a class="title" href="site-internet.php?id=<?=$R->id_portfolio;?>"><?=$R->titre;?></a>
                                <span class="subtitle"><? switch ($R->categorie) {
                                                                                         case 'Artisanats': echo 'Artisanats | B&acirc;timent';
                                                                                         break;
                                                                                         case 'Automobile': echo 'Automobile';
                                                                                         break;
                                                                                         case 'Agriculture': echo 'Agriculture | Viticulture';
                                                                                         break;
                                                                                         case 'Communication': echo 'Communication';
                                                                                         break;
                                                                                          case 'Distribution': echo 'Distribution';
                                                                                         break;
                                                                                          case 'Informatique': echo 'Informatique';
                                                                                         break;
                                                                                          case 'Industriel': echo 'Industriel | BTP';
                                                                                         break;
                                                                                          case 'Administrations': echo 'Administrations | Mairies';
                                                                                         break;
                                                                                          case 'Mode': echo 'Mode | Beaut&eacute; | Sant&eacute;';
                                                                                         break;
                                                                                          case 'Finance': echo 'Finance | Conseil | Immobilie';
                                                                                         break;
                                                                                          case 'Tourisme': echo 'Tourisme | Loisirs';
                                                                                         break;
                                                                                          case 'Franchise': echo 'Franchise | Syndicat';
                                                                                         break;

                                                                                default:    echo 'Divers'  ;
                                                                                        }
                                                                                                 ?></span>
                            </figcaption>

                        </figure><!-- .portfolio-style-1 end -->  

                    </li><!-- .isotope-item.design end -->
            </div><!-- .row.portfolioitems-holder end -->

             <!-- .row start -->
            <div class="row">
                <div class="grid_12">                   
                    <!-- .pagination start -->
                   <ul id="page-filters2" class="filters pagination">
                        <li class="active"><a href="#" data-filter=".Page1">1</a></li>
                        <? for ($i=2; $i<=$cat_page; $i++){?>
                        <li><a href="#" data-filter=".Page<?=$i;?>"><?=$i;?></a></li>
                        <? } ?>
                        <!--<li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li class="next"><a href="#">next</a></li>-->
                    </ul><!-- pagination end -->                        
                </div><!-- .grid_12 end -->
            </div><!-- .row end -->
        </section><!-- .container end -->
    </section><!-- .page-content end -->
"> ">
    <!-- scripts -->
    <script  src="js/jquery-1.9.1.js"></script> <!-- jQuery library --> 
    <script  src="js/jquery-migrate-1.2.1.js"></script> <!-- jQuery library --> 
    <script  src="js/jquery.placeholder.min.js"></script><!-- jQuery placeholder fix for old browsers -->
    <script  src="js/jquery.tweetscroll.js"></script> <!-- jQuery tweetscroll plugin -->      
    <script  src="js/jquery.isotope.min.js"></script> <!-- jQuery isotope -->
$('.filters').on('click', 'a', function(){ var $parent = $(this).closest('li'); var $filters = $('.filters').find('li'); var $filterSiblings = $parent.siblings(); var isPageFilter = $parent.closest('.filters').is('#page-filters'); var isPageFilter2 = $parent.closest('.filters').is('#page-filters2'); // Get clicked filters var filter = this.getAttribute('data-filter'); //alert( "get value " + filter); // Set filter to isotope $('.isotope').isotope({filter: filter}); // Set active state if(!isPageFilter){ $filters.removeClass('active'); }else{ $filterSiblings.removeClass('active'); }; if(!isPageFilter2){ $filters.removeClass('active'); }else{ $filterSiblings.removeClass('active'); }; $parent.addClass('active'); var nb_page = $( "#nb-page").attr( "value" ); //alert ("ok" + nb_page); for (var i = 1; i $(document).ready(function() { //ISOTOPE //$('#page-filters').show().find('li').first().addClass('active'); var txtval = $( "input" ).attr( "value" ); if(txtval === 'none' || txtval === '') { $('#page-filters').show().find('li').first().addClass('active'); $('#page-filters2').show().find('li').first().addClass('active'); } else { $('.isotope').isotope({filter: txtval}); $('#page-filters').hide(); $('#page-filters2').hide(); } //var txtval = 'texte'; // this.getAttribute('data-txt'); // alert ("ok" + txtval); });
    <script  src="js/jquery.prettyPhoto.js"></script> <!-- prettyPhoto lightbox -->
    <script  src="js/modernizr.custom.js"></script> <!-- jQuery custom options -->
    <script  src="js/jquery.dlmenu.js"></script><!-- responsive navigation -->
    <script  src="js/include.js"></script> <!-- jQuery custom options -->

    <script>
        /* <![CDATA[ */
        jQuery(document).ready(function($) {
            'use strict';

            // PRETTYPHOTO LIGHTBOX START
            if (jQuery().prettyPhoto) {
                piPrettyphoto();
            }

            function piPrettyphoto() {
                $("a[data-gal^='prettyPhoto']").prettyPhoto({social_tools: false});
            }// PRETTYPHOTO LIGHTBOX END

            // NEWSLETTER FORM AJAX SUBMIT
            $('.newsletter .submit').on('click', function(event) {
                event.preventDefault();
                var email = $('.email').val();
                var form_data = new Array({'Email': email});
                $.ajax({
                    type: 'POST',
                    url: "contact.php",
                    data: ({'action': 'newsletter', 'form_data': form_data})
                }).done(function(data) {
                    alert(data);
                });
            });
        });
        /* ]]> */
    </script>
</body>

User Gravatar

GeorgetAlain

Posted Jan 20 2014 2:02 UTC

Can you please upload the code here: http://pastebin.com/ (it will be easier for me to read).

I will review it in 8 hours.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jan 20 2014 2:04 UTC

http://pastebin.com/rCxXNeuX here online

User Gravatar

GeorgetAlain

Posted Jan 20 2014 2:33 UTC

Hi Alain,

I've optimised your js:

http://pastebin.com/aQByAaYX

It can be optimised little more, but I will need the live site and ftp permissions, to play with the code.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jan 20 2014 9:17 UTC

Solution

This didn't solve your task? Get your own custom solution.

I'm out of the office for the next today so i can only check the 23 january. See you later

Regards Alain

User Gravatar

GeorgetAlain

Posted Jan 20 2014 9:22 UTC

Hi Georget,

Did you have a chance to check if Nikola's answer solved the problem?

User Gravatar

CodersClan

Posted Jan 29 2014 5:09 UTC

Yes I do it, I see the Nikola's improvement i do myself few of them and it will be possible to clause this case now.

User Gravatar

GeorgetAlain

Posted Jan 30 2014 2:59 UTC

Thanks. Using this logic i implemented paging/isotope here: http://ama.ab.ca/knowledge-base/articles/

User Gravatar

drav7

Posted Jun 9 2014 13:04 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions