SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help implementing gallery filter

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Hi girlnoir. Welcome to SitePoint.

    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. 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. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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>:
    Code HTML4Strict:
    <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:
    Code HTML4Strict:
      <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:
    Code HTML4Strict:
     <!-- 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:
    Code HTML4Strict:
     <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:

    Code HTML4Strict:
    <!-- 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:
    • 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): http://isotope.metafizzy.co/
    • Be sure to remove the magiczoom style and script in between the <html> and <head>
    Hopefully this will fix the problem you're currently having
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I obviously took my time making tea and typing this because Ralph beat me to it :P
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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. #7
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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

    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
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  8. #8
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Glad you got things working better.

    Quote Originally Posted by girlnoir View Post
    the Accordion copyright statement won't let me move all the scripts to the bottom of the page.
    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. #10
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •