CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3
Pepelius
Pepelius

Reputation: 1609

Changing image gallery by button

First things first, I'm building my website on Bootstrap 3, which has it's own image gallery element in it. What I basically want to achieve, is that when I have a couple of buttons and the gallery element on the same page, pressing some of the buttons changes the images in the gallery element.

Tried to Google it but couldn't find any solutions that would satisfy my needs. Here are a couple of screenshots. JSFiddle is a bit difficult thing to be offered here, since I can't really include the image gallery element from Bootstrap, and including just the buttons would be a waste.

This is what I got right now: enter image description here

This requires some sort of a knowledge about Bootstrap and JS/jQuery, since I'm not able to provide any demo-site or fiddle for this. All working solutions deserve my thanks!

UPDATE:

Here is the source code for the image-gallery, what it looks like in the firebug inspector. This should be of use for someone, since this still goes unsolved.

enter image description here

Upvotes: 0

Views: 566

Answers (2)

Shail
Shail

Reputation: 873

I think you are looking for this: http://isotope.metafizzy.co/

Upvotes: 3

cirtrus
cirtrus

Reputation: 497

You need to use this markup for your gallery. You need to wrap the images, that each button should show in one div container

<a href="#" id="btn1" class="btn" >Button 1</a>
<a href="#" id="btn2" class="btn" >Button 2</a>
<a href="#" id="btn3" class="btn" >Button 3</a>
<div class="gallery">
<div id="cat1" class="cat">
  <img src="//placehold.it/50x50">
  <img src="//placehold.it/50x50">
  <img src="//placehold.it/50x50">
</div>  
  <div id="cat2" class="cat" style="display:none;">
    <img src="//placehold.it/50x50/ffff00">
  <img src="//placehold.it/50x50/ffff00">
  <img src="//placehold.it/50x50/ffff00">
</div> 
  <div id="cat3" class="cat" style="display:none;">
  <img src="//placehold.it/50x50/00ff00">
    <img src="//placehold.it/50x50/00ff00">
    <img src="//placehold.it/50x50/00ff00">
</div> 
</div>

And add this Jquery code to the end of the page

function show(id)
{

$('.cat').hide();
 $('#cat'+id).css('display','block');  
}

$('#btn1').click(function(){show('1')});
$('#btn2').click(function(){show('2')});
$('#btn3').click(function(){show('3')});

Upvotes: 0

Related Questions