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
coolispaulAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.