0

I have been through the other answers here as well as a few other sites and I cannot get any of the solutions to work. Any assistance would be MUCH appreciated!

I am creating a portfolio site. I have a "show all" section as well as categories. If I have the items sorted with a 'rels' then "show all" cycles through in categories instead of all. If I do not, vice verse.

Html:

<div id="wrapper">

  <aside class="sidebar clearfix">

<nav class="primary clearfix">
    <ul>
        <li><a href="#" class="selected" data-filter="*">Show All</a></li>
        <li><a href="#" data-filter=".logo">Logos</a></li>
        <li><a href="#" data-filter=".print">Print</a></li>
            <li><a href="#" data-filter=".web">Web</a></li>
    </ul>
</nav> 

   </aside>

<div class="page">

    <section class="main clearfix">

        <div class="portfolio">

            <figure class="entry print"> 
            <a class="fancybox" data-fancybox-group="gallery" a href="images/northstarflyer.jpg" title="<b>Description:</b> Sell Sheet for a Print & Promotions Company<BR /><b>Programs:</b> InDesign and Photoshop">
            <img src="images/northstarflyerthumb.jpg" alt=""> </a>
    </figure>

Isotope:

$(window).load(function(){

var $container = $('.portfolio');
$container.isotope({
    filter: '*',
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false,
    }
});

$('nav.primary ul a').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({
        filter: selector,
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });
  return false;
});

var $optionSets = $('nav.primary ul'),
       $optionLinks = $optionSets.find('a');

       $optionLinks.click(function(){
          var $this = $(this);
      // don't proceed if already selected
      if ( $this.hasClass('selected') ) {
          return false;
      }
   var $optionSet = $this.parents('nav.primary ul');
   $optionSet.find('.selected').removeClass('selected');
   $this.addClass('selected'); 
});

});

Script:

<script type="text/javascript">
$(document).ready(function() {

// Puts Title inside frame
$(".fancybox").fancybox({
  helpers: {
          title : {
              type : 'inside'
}
}
});

// Corrects sorting order????
$('#filters a').on("click", function(){
    var selector = $(this).attr('data-filter'); 
    $('#container').isotope({ filter: selector }, function(){
    if(selector == "*"){
    $(".fancybox").attr("data-fancybox-group", "gallery");
 }  else{ 
    $(selector).find(".fancybox").attr("data-fancybox-group", selector);
 }
 });
    return false;
 });
 });
 </script>
Crystal
  • 1
  • 1
  • You should show a sample of your actual code, so people can see what you've already done. – Thomas Jul 24 '13 at 15:31
  • Check https://groups.google.com/forum/#!topic/fancybox/ncVsViD2v9o – JFK Jul 24 '13 at 16:12
  • Thank you, Thomas. I just pasted the code I think is pertinent. – Crystal Jul 24 '13 at 17:29
  • JFK, I tried that solution and it did not work. I'm not saying I did it correctly, but I tried it :/ – Crystal Jul 24 '13 at 17:30
  • Don't see that code in your sample site – JFK Jul 24 '13 at 17:33
  • I just changed it again [link]http://www.cjonesgraphics.com and it sorts them on the category links, but on the 'show all' page it does as well instead of showing all? – Crystal Jul 24 '13 at 17:36
  • I also noticed that when a button is clicked, although the content changes, the button does not show as being selected. Would that have something to do with it? – Crystal Jul 24 '13 at 20:05
  • I added additional code to hopefully help with the diagnosis. I fixed the issue where the button was not clicking and that was not it. As it is now, it does not sort by data-filter only data-fancybox-group. – Crystal Jul 26 '13 at 15:33

0 Answers0