Help implementing gallery filter

JavaScript
1

I have no java experience yet I’ve followed instructions and managed to get two scripts to work (Magic Zoom Plus and an accordion menu). I’m pretty proud of myself, although I’m sure my code is a huge mess. Now I’m trying to implement a 3rd script, a portfolio filter, and I can’t get it to work. I have a feeling I’m missing something major, but I have no clue. I would love some help to get the filter to work. Also, any feedback on the code is welcome… (Don’t worry about the design or Skeleton- the finished product won’t look like this.) http://tinyurl.com/c55z29t

Thank you!

2

Hi girlnoir. Welcome to SitePoint. :slight_smile:

Unless you are really confident with JS, I find it’s better not to combine two or more scripts on one block of code. You have an accordion script applying to your menu and the filtering script, which makes things more complicated. I would suggest choosing one or the other.

Just a few other things I notice: you have used id=“portfolio-list” twice on your page—once on a div and once on a UL. You should perhaps put all items insode the UL. But also be aware that you can only use and ID once per page, so using it twice or more will completely befuddle JS.

Also, you more than one jQuery script on your page, but for each one you have a link to the jQuery library. You only need to link to the library once. :slight_smile: So put that at the top of your list of scripts and let any jQuery plugins all feed off that. You also have some scripts in the head of your document and some just before the closing body tag. Ideally, put all your scripts in the same place (I’d suggest at the bottom of the page).

3

Hi there,

I think one of the problems you might be having is that you are currently including several copies of the jQuery library (3, in fact).

Our first step would be to remove those duplicates and make sure that all your javascript is correctly referenced in the header of the site.

The following areas are where you are including the library:

Right near the top of the <head>:

<head>
  <script src="javascripts/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="javascripts/filterable.pack.js" type="text/javascript" charset="utf-8"></script>

Further down in the <head> section:

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="javascripts/ddaccordion.js">

And once again near the bottom of the page:

 <!-- JS
    ================================================== -->
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="javascripts/tabs.js"></script>

We can remove all of the library references and use the latest one:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Then make sure that this reference occurs before all other code that requires jQuery.

This means that the JS section in your <head> may look like this:

<!-- JS
  ================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript" src="javascripts/filterable.pack.js" charset="utf-8"></script>
<script type="text/javascript" src="javascripts/ddaccordion.js">
<script type="text/javascript" src="javascripts/tabs.js">
<link rel="stylesheet" href="magiczoomplus/magiczoomplus.css" type="text/css" />
<script type="text/javascript" src="magiczoomplus/magiczoomplus.js"></script>

Additionally:

[LIST]
[*]I would remark that the “Filterable” plugin is quite old and you might be better served using the jQuery Isotope plugin (which has filtering and a bunch of other great features): [URL=“http://isotope.metafizzy.co/”]http://isotope.metafizzy.co/

[*]Be sure to remove the magiczoom style and script in between the <html> and <head>
[/LIST]Hopefully this will fix the problem you’re currently having :slight_smile:

4

I obviously took my time making tea and typing this because Ralph beat me to it :stuck_out_tongue:

5

AussieJohn & ralph.m,
Thank you so much for your insights and for taking the time decipher my crazy/essy code… and for not making fun of it. You responses are very helpful & now I understand what I’m working with a little better. I will make those changes tomorrow and see how it works out. I would like to try the Isotope plugin, but it looks a little complex for me because it seems I would have to do some work within the script http://isotope.metafizzy.co/docs/filtering.html, which is a little intimidating. Do you think it is doable for a novice?

Thanks!

6

I’m not much good at JS either, but the instructions on that page look pretty straightforward, so I’d say go for it. Looks like a nicely designed plugin. I’ve been hearing a lot about it lately.

Again, I would suggest not trying to mix this plugin with the accordion, though. I think it would be better to have the list of links across the top of the portfolio, as in the filtering demo page.

So, have your list of filters over the top, and your container for the portfolio items under that.

7

I’ve used the Isotope plugin a few times as it provided a nice quick way to do some really cool things (that would take a relatively long time to do if you had to write it yourself). It’s worth giving it a try :slight_smile:

I’ll put my 2c. with Ralph as well and say that a list of filters at the top of the items that you are filtering with clear active states would be the way to go :slight_smile:

8

Thank you both so much. I followed your advice and was able to get it to work. It is a little wonky, so I will give Isotope a try next.

You helped me learn a ton. I may take your advice and change the position of the filter menu, but it was good practice to get it working as is. For some reason the Accordion copyright statement won’t let me move all the scripts to the bottom of the page.

Thanks again!

9

Glad you got things working better. :slight_smile:

It’s a few years old, and only recently has it become the favored practice to place scripts at the bottom of the page. But if it only says that in a copyright notice, don’t worry about that. What they really want is for you to leave the credit to them in the script.

10

Thanks! If I move it, the copyright notation actually appears as text on the page. I’ll make sure it is in the script & delete it from the html.

I realized an issue that I need to resolve with the filter. The filter works for the thumbnails, but there is an issue when you click on a thumbnail to enlarge it and it opens the Magic Zoom Plus gallery. When you click on the arrows to go forward & back, it is taking you through all of the images, where it should just be the ones that in that category. I know that the Magic Zoom Plus gallery works on all the images on a page. I assume that in order to get the gallery feature to apply to a category & not the whole page, there would have to be some changes to that script. Any thoughts?