JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://galleria.aino.se/media/galleria/src/galleria.js"></script>
<ul class="sectionlinks">
<li class="active"><a href="#section1">ONE</a></li>
<li><a href="#section2">TWO</a></li>
<li><a href="#section3">THREE</a></li>
</ul>
<div id="section1" class="section">TEST</div>
<div id="section2" class="section"><div id="galleria"></div></div>
<div id="section3" class="section">TEST 3</div>
CSS
.sectionlinks{
float:left;
margin:0;
list-type:none;
padding:0;
}
.section{
float: right;
width:300px;
}
li.active {
font-weight: bold;
}
JavaScript
Galleria.loadTheme('http://galleria.aino.se/media/galleria/src/themes/classic/galleria.classic.js');
Galleria.flickr.search('fddd7bc223fe37295faace93a4f2d8fc', {
text:'toys'
}, function(data) {
$('#galleria').galleria({
data_source:data
});
});
var sections = $('.section').hide();
$('#section1').show();
$('.sectionlinks a').click(function(e){
e.preventDefault();
sections.hide();
$($(this).attr('href')).show();
$(this).closest('ul').find('li').removeClass('active');
$(this).closest('li').addClass('active');
});