galleria image gallery - using categories

Posted on 2012-09-17
Last Modified: 2012-10-24

Im using the galleria jquery image gallry

I want to create a menu so that i can load in a seperate set of images dependant on which menu item clicked. (similar to this -

But i dont want to use flikr - any ideas how i can do this?

Question by:coolispaul
    1 Comment
    LVL 81

    Accepted Solution

    You can found one here :

    For example :

    You can change the categorie using jQuery.ajax (especially jQuery.load) or using and jQuery.hide();

    example :
    HTML :
    <div id="menu">
      <ul class="menu">
           <li class="menuitem"><a href="slider1.html">SLIDER1</a></li>
           <li class="menuitem"><a href="slider2.html">SLIDER2</a></li>
           <li class="menuitem"><a href="slider3.html">SLIDER3</a></li>

    Open in new window

    jQuery :
    $(document).ready(function() {
       $(".menuitem a").click(function(evt) {
            evt.preventDefault(); // we don't want to go the slider page realoding the page
            var url = $(this).attr("href"); // get url of the link
            $("#pikachoose").load(url); // load the content inside the pikachoose UL

    Open in new window

    slider1.html, slider2.html, slider3.html contain only the LI (the thumbnails), :

    <li class=""><div class="clip"><img src="/wp-content/uploads/main-demo/1.jpg" alt="" style="display: inline; height: 100%; opacity: 0.4; " class=""></div></li>

    Open in new window


    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now