• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 268
  • Last Modified:

galleria image gallery - using categories

Hi

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 - http://log.galleria.io/post/14172673278/tutorial-create-a-flickr-gallery-with-categories-using)

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

Thanks
0
coolispaul
Asked:
coolispaul
1 Solution
 
leakim971PluritechnicianCommented:
You can found one here : http://www.tripwiremagazine.com/2012/08/jquery-slider.html

For example : http://www.pikachoose.com/

You can change the categorie using jQuery.ajax (especially jQuery.load) or using jQuery.show() 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>
  </ul>
</div>

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

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now