We Keep Coding

Issue with getting Justified Gallery working within Bootstrap 4 Tabs

I have a page I'm trying to complete that has a tabbed inner menu system, and within them (the first and last tab) there are justified galleries
http://miromannino.github.io/Justified-Gallery/
The code works well within the first tab, but when I put it within the last tab it turns all the images into thumbnails 80px by 80px. I initially thought that perhaps this was limited to one gallery per page, so I did some testing and I was able to add another one outside of the tabs with no issue.
I did some further testing and figured out that the reason it was working in the first tab and not the last was because the first tab has an active class on it, making the div a block element (display: block) and as soon as I put active on the other tab it made the gallery work but obviously broke the tabs.
At this point I'm stuck as to what I can do to get this to work, so I'm hoping someone here can help me out a little. Below is the code, thanks!
<div class="middleContent">
<div class="container">
<div class="row">
<div class="col-sm-9 leftContent">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#orderOnline" role="tab">Menu</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#reviews" role="tab">Reviews</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#about" role="tab">About</a> </li>
<li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#photos" role="tab">Photos</a> </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="orderOnline" role="tabpanel">
<div class="row">
<h2>MENU</h2>
<div id="mygallery" >
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-10.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-10.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-11.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-11.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-12.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-12.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-13.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-13.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-14.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-14.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-15.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-15.jpg"/>
</a>
</div>
</div>
</div>
<div class="tab-pane" id="reviews" role="tabpanel">
<h2>Reviews</h2>
</div>
<div class="tab-pane" id="about" role="tabpanel">
<h2>About</h2>
</div>
<div class="tab-pane" id="photos" role="tabpanel">
<div>
<div>
<h2>Food</h2>
<div id="foodgallery">
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-10.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-10.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-11.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-11.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-12.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-12.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-13.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-13.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-14.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-14.jpg"/>
</a>
<a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-15.jpg">
<img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-15.jpg"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jQuery:
<script>
$('#mygallery').justifiedGallery({
rowHeight: 300,
lastRow: 'nojustify',
randomize: false,
margins: 10
});
</script>
<script>
$(function(){
$('#foodgallery').justifiedGallery({
rowHeight: 200,
lastRow: 'nojustify',
randomize: false,
margins: 10
});
});
</script>

lightgallery typeError images not loading?

I have a bootstrap page and I downloaded jquery plugin (lightgallery.js) and plugins works very well with theese codes;
<div class="item active" id="lightgallery">
<a href="http://s.fotorama.io/1.jpg">
<img src="http://s.fotorama.io/1.jpg" alt="...">
</a>
<a href="http://s.fotorama.io/2.jpg">
<img src="http://s.fotorama.io/2.jpg" alt="...">
</a>
</div>
and this is my jquery function to work plugin
$('#lightgallery').lightGallery();
it's good but if I change my html structure plugin is not work
my html structure is below;
<div id="lightgallery">
<div class="item active">
<a href="http://s.fotorama.io/1.jpg">
<img src="http://s.fotorama.io/1.jpg" alt="...">
</a>
</div>
<div class="item">
<a href="http://s.fotorama.io/2.jpg">
<img src="http://s.fotorama.io/2.jpg" alt="...">
</a>
</div>
</div>

Use a list like this..
<ul id="lightgallery">
<li class="item active">
<a href="http://s.fotorama.io/1.jpg">
<img src="http://s.fotorama.io/1.jpg">
</a>
</li>
<li class="item">
<a href="http://s.fotorama.io/2.jpg">
<img src="http://s.fotorama.io/2.jpg">
</a>
</li>
</ul>

How to keep one toggle open by default javascript

I was wondering is it possible to keep one toggle open on page load by default, i have been tearing my hair out on this one.
any help will be appreciated.
Its the your account toggle i am trying to keep open!
$(document).ready(function () {
$("#account").show("slow").siblings().hide("slow");
$('a#francc').click(function () {
var divname = this.name;
$("#" + aname).show("slow").siblings().hide("slow");
});
});
<div class="sidebar">
<a id="order" class="header" href="#" onclick="toggleVisibility('Order');"><h3 id="orderr">Orders</h3></a>
<div id="Order" style="display: none;"> </div>
<a id="restt" class ="header"href="#" onclick="toggleVisibility('Rest');"><h3>Your Restaurants</h3></a>
<div id="Rest" style="display: none;"><div>
<!-- your account -->
<a id="francc" name="account" class ="header" href="#" onclick="toggleVisibility('Franc');"><h3>Your Account</h3></a>
<div id="Franc" style="display: none;">
<div>
<ul class="tabs">
<li id="order" class="Red">Franchise Manager</li>
<li id="order" class="Blue" >Pending</li>
</ul>
</div>
</div>
</div>

Sure, just remove that sibling from the selection. There's a lot wrong with your HTML too. I've removed the onclicks, and you had an opening div tag where a closed one should have been.
$(document).ready(function () {
// set up the click event
$('.sidebar > a').on('click', function(){
$(this).next('div').show("slow").siblings('div:not(#Franc)').hide("slow");
});
// trigger orders which has id francc, not orders
$('#francc').trigger('click');
// or perhaps you mean this, but it's slower // $('a[name="account"]').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<a id="order" class="header" href="#"><h3 id="orderr">Orders</h3></a>
<div id="Order" style="display: none;"> orders dropdown </div>
<a id="restt" class ="header" href="#"><h3>Your Restaurants</h3></a>
<div id="Rest" style="display: none;">Your Restaurants dropdown</div>
<!-- your account -->
<a id="francc" name="account" class ="header" href="#"><h3>Your Account</h3></a>
<div id="Franc" style="display: none;">
<div>
<ul class="tabs">
<li id="order" class="Red">Franchise Manager</li>
<li id="order" class="Blue" >Pending</li>
</ul>
</div>
</div>
</div>

this will work, http://fiddle.jshell.net/9oo1jrr9/
<script>
$(document).ready(function () {
$("#Rest").show().siblings('div').hide();
});
function toggleVisibility(ctrlThis){
$("#" + ctrlThis).first('div').show("slow").siblings('div').hide();
}
</script>
<div class="sidebar">
<a id="order" class="header" href="#" onclick="toggleVisibility('Order');"><h3 id="orderr">Orders</h3></a>
<div id="Order" style="display: none;">
<div>
<ul class="tabs">
<li id="order" class="Red">Order 1</li>
<li id="order" class="Blue" >Order 2</li>
</ul>
</div>
</div>
<a id="restt" class ="header" href="#" onclick="toggleVisibility('Rest');"><h3>Your Restaurants</h3></a>
<div id="Rest" style="display: none;">
<div>
<ul class="tabs">
<li id="order" class="Red">Restaurants 1</li>
<li id="order" class="Blue" >Restaurants 2</li>
</ul>
</div>
</div>
<a id="francc" name="account" class ="header" href="#" onclick="toggleVisibility('Franc');"><h3>Your Account</h3></a>
<div id="Franc" style="display: none;">
<div>
<ul class="tabs">
<li id="order" class="Red">Franchise Manager</li>
<li id="order" class="Blue" >Pending</li>
</ul>
</div>
</div>
</div>

Menu items not showing up properly as a mega menu

I need to make a mega menu similar to one as show in image below
So far i have been able to make it work to some extent example on jsFiddle HERE.
So far i have some design issue and one functionality issue.
When i try to hide the default text for each dropdown menu //$(this).find(".nav-info").hide(); then Menu 4 & 5 doesnt show up on right side.
I am actually trying to create a menu similar to one as on this website.
One this website they also show a default text for parent menu which i dont need actually.
I modified script to show the first li of submenu it works find for Parent menu ONE, TWO but creates alighnment problem for MENU FOUR and FIVE.
I would appreciate if some can help me fix this issue...
CODE
<div class="container_16">
<div class="nav-main grid_16">
<div class="wrap-nav-media">
<ul id="nav-top-media">
<!-- ONE -->
<li class="nav-item-1">Parent Menu One
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../directors" rel="sub-1-relative-1">sub-1-relative-1</a>
</li>
<li class=""><a class="current" href="../management-team" rel="sub-1-relative-2">sub-1-relative-2</a>
</li>
<li class="last"><a class="current" href="../tems.html" rel="sub-1-relative-3">sub-1-relative-3</a>
</li>
</ul>
<div style="display: block;" class="menu-page first" id="mega-sub-1-relative-1"> <a href="../board-of-directors" title="Board of Directors" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-1</p>
</div>
</div>
<div style="display: block;" class="menu-page" id="mega-sub-1-relative-2"> <a href="../management-team" title="Management Team" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow; float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-1-relative-3"> <a href="../vision.html" title="Vision" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-1-relative-3</p>
</div>
</div>
</div>
</li>
<!-- TWO -->
<li class="nav-item-2"> Parent Menu TWO
<div style="display: none;" class="inner-nav-media">
<ul>
<li class=""><a class="current" href="../infrastructure" rel="sub-2-relative-1">sub-2-relative-1</a>
</li>
<li class=""><a class="current" href="..capabilities/building" rel="sub-2-relative-2">sub-2-relative-2</a>
</li>
<li class="last"><a class="current" href="..capabilities/rail" rel="sub-2-relative-3">sub-2-relative-3</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-2-relative-1"> <a href="../infrastructure" title="Infrastructure" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-1</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-2"> <a href="../building" title="Building" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-2-relative-3"> <a href="/rail" title="Rail" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-2-relative-3</p>
</div>
</div>
</div>
</li>
<li class="nav-item-3">THREE
</li>
<li class="nav-item-4"> FOUR
<div style="display: none;" class="inner-nav-media">
<div style="display: block; float:right;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title=" Businesses" href="../businesses">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<ul>
<li class=""> <a class="current" href="2.html" rel="sub-4-relative-1">sub-4-relative-1</a>
</li>
<li class=""> <a class="current" href="1.html" rel="sub-4-relative-2">sub-4-relative-2</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-4-relative-1"> <a href="../group.html" title="" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20110602_1-ARG.jpg" alt="">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-4-relative-2"> <a href="../advance-water-and-environmentawe.html" title="Advance Water and Environment (AWE)" rel="nofollow" class="thumb">
<img src="HLG-Mega-Menu_files/20121024_AWG-220x165.jpg" alt="Advance Water and Environment (AWE)">
</a>
<div>
<p>TEXT will be here...</p>
</div>
</div>
</div>
</li>
<li class="last nav-item-5">FIVE
<div style="display: none;" class="inner-nav-media">
<div style="display: block;" class="menu-page nav-info"> <a class="thumb" rel="nofollow" title="" href="">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>This is Default text when i try to hide this then this menu moves to left</p>
</div>
</div>
<ul>
<li class=""><a class="current" href="" rel="sub-5-relative-1">sub-5-relative-1</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-2">sub-5-relative-2</a>
</li>
<li class=""><a class="current" href="" rel="sub-5-relative-3">sub-5-relative-3</a>
</li>
<li class="last"><a class="current" href="" rel="sub-5-relative-4">sub-5-relative-4</a>
</li>
</ul>
<div style="display: none;" class="menu-page first" id="mega-sub-5-relative-1"> <a href="/safety.html" title="" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-2"> <a href="/environment.html" title="Environment" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-2</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-3"> <a href="/community.html" title="Community" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-3</p>
</div>
</div>
<div style="display: none;" class="menu-page" id="mega-sub-5-relative-4"> <a href="/quality.html" title="Quality" rel="nofollow" class="thumb">
<div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
</a>
<div>
<p>Brief Contents will show up here sub-5-relative-4</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

Add the following in the head of the document,
<!--[if lt IE 9]>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
And use the method suggested by Rachel Reveley.
li:hover ul {display: block;}
The code adds support for HTML 5 and CSS3 on older browsers. And it seems to be working perfect for me.

Unless you are supporting IE6 then you don't need JavaScript to make a drop down menu work.
If you change your structure to something more like this
<ul>
<li>Click me
<ul>
<li>This is showed when Click Me! is clicked.</li>
</ul>
</li>
</ul>
you can simply do this with your CSS
li:hover ul {display: block;}

Multiple Java scripts which are applied to different <ul> and <li> tags

I am very very new to JavaScript so sorry if this is really silly.
Basically the issue is I have 2 JavaScripts, both useing ul and li tags but both need it for different thing, so how do I apply it to diffrent ul and li tags?
This is the question in more detail
I have two bits of JavaScript.
(1)
<script src="js/jquery.roundabout2.js"></script>
<script src="js/jquery.roundabout-shapes2.js"></script>
<script src="js/jquery.easing.js"></script>
<script>
$(document).ready(function() {
$('.verb ul li').focus(function() {
$('#hidden-verb').val($(this).text());
});
$('.feeling ul li').focus(function() {
$('#hidden-feeling').val($(this).text());
});
$('.adjective ul li').focus(function() {
$('#hidden-adjective').val($(this).text());
});
$('ul').roundabout({
shape: 'waterWheel',
minOpacity: -1.0,
duration: 300,
easing: 'easeOutCubic'
});
$('li').dblclick(function(e) {
e.preventDefault();
return false;
});
$('form').submit(function(e) {
e.preventDefault();
alert('Thank you for telling me that my art work is ' + $('#hidden-adjective').val() + ' ,and to improve it I should add ' + $('#hidden-verb').val() + ' and the website is ' + $('#hidden-feeling').val() + '.');
return false;
});
});
</script>'
Then (2)
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 15,
preloadAhead: 10,
enableTopPager: true,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '‹ Previous Photo',
nextLinkText: 'Next Photo ›',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>'
Number 1 comes from http://fredhq.com/projects/roundabout/demos/form and number 2 from here http://www.twospy.com/galleriffic/example-2.html
Now you can see that both use ul and li, but (1) needs it for it's purpose and the (2) for it's purpose, but I am unable to get the it to apply different things to both. If you look at the links you will see there different purposes. I have attempted adding id's to the tags and class, but it does not seem to work.
Any help will be much appreciated.
Thank you
This is the two peices of HTML this is being applied to.
(1)
<div id="tellmeform"><form id="form2" action="" method="get">
<div class="part"> My art work is</div>
<div class="part moving adjective">
<ul class="il1" id="ul1">
<li class="li1" id="li1">creative</li>
<li class="li1" id="li1">delicate</li>
<li class="li1" id="li1">lovely</li>
<li class="li1" id="li1">stunning</li>
<li class="li1" id="li1">elegant</li>
</ul>
</div>
<div class="part">, so to imrpove I should add</div>
<div class="part moving verb">
<ul class="il1" id="ul1">
<li class="li1" id="li1">tones</li>
<li class="li1" id="li1">colour</li>
<li class="li1" id="li1">shadows</li>
<li class="li1" id="li1">faces</li>
<li class="li1" id="li1">shadeing</li>
</ul>
</div>
<div class="part">but before you go, I think the website is</div>
<div class="part moving feeling">
<ul class="il1" id="ul1">
<li class="li1" id="li1">clean</li>
<li class="li1" id="li1">stunning</li>
<li class="li1" id="li1">poor</li>
<li class="li1" id="li1"i>smooth</li>
<li class="li1" id="li1">expired</li>
</ul>
</div>
<div class="part">.</div>
<div class="part button">
<input type="hidden" id="hidden-adjective" name="hidden-adjective" value="" />
<input type="hidden" id="hidden-verb" name="hidden-verb" value="" />
<input type="hidden" id="hidden-feeling" name="hidden-feeling" value="" />
<input type="submit" value="Tell Me" name="post" id="post-it" />
</div></form></div>'
and number (2) - This is long, sorry.
<div id="gallery" class="content">
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container"></div>
</div>
<div id="thumbs" class="navigation">
<ul id="ul2" class="thumbs noscript">
<li id="li2">
<a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #0</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" name="bigleaf" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">
<img src="http://farm3.static.flickr.com/2093/2538168854_f75e408156_s.jpg" alt="Title #2" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #2</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" name="lizard" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">
<img src="http://farm4.static.flickr.com/3153/2538167690_c812461b7b_s.jpg" alt="Title #3" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #3</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">
<img src="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18_s.jpg" alt="Title #4" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #4</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">
<img src="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd_s.jpg" alt="Title #5" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #5</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">
<img src="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b_s.jpg" alt="Title #6" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #6</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">
<img src="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23_s.jpg" alt="Title #7" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #7</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">
<img src="http://farm4.static.flickr.com/3211/2538163540_c2026243d2_s.jpg" alt="Title #8" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #8</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">
<img src="http://farm3.static.flickr.com/2315/2537343449_f933be8036_s.jpg" alt="Title #9" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #9</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">
<img src="http://farm3.static.flickr.com/2167/2082738157_436d1eb280_s.jpg" alt="Title #10" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #10</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">
<img src="http://farm3.static.flickr.com/2342/2083508720_fa906f685e_s.jpg" alt="Title #11" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #11</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">
<img src="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba_s.jpg" alt="Title #12" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #12</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">
<img src="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60_s.jpg" alt="Title #13" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #13</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">
<img src="http://farm3.static.flickr.com/2041/2083498578_114e117aab_s.jpg" alt="Title #14" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #14</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg" title="Title #15">
<img src="http://farm3.static.flickr.com/2149/2082705341_afcdda0663_s.jpg" alt="Title #15" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #15</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg" title="Title #16">
<img src="http://farm3.static.flickr.com/2014/2083478274_26775114dc_s.jpg" alt="Title #16" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #16</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg" title="Title #17">
<img src="http://farm3.static.flickr.com/2194/2083464534_122e849241_s.jpg" alt="Title #17" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #17</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg" title="Title #18">
<img src="http://farm4.static.flickr.com/3127/2538173236_b704e7622e_s.jpg" alt="Title #18" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #18</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg" title="Title #19">
<img src="http://farm3.static.flickr.com/2375/2538172432_3343a47341_s.jpg" alt="Title #19" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #19</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg" title="Title #20">
<img src="http://farm3.static.flickr.com/2353/2083476642_d00372b96f_s.jpg" alt="Title #20" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #20</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg" title="Title #21">
<img src="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34_s.jpg" alt="Title #21" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #21</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">
<img src="http://farm2.static.flickr.com/1116/1380178473_fc640e097a_s.jpg" alt="Title #22" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #22</div>
<div class="image-desc">Description</div>
</div>
</li>
<li id="li2">
<a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23">
<img src="http://farm2.static.flickr.com/1260/930424599_e75865c0d6_s.jpg" alt="Title #23" />
</a>
<div class="caption">
<div class="download">
Download Original
</div>
<div class="image-title">Title #23</div>
<div class="image-desc">Description</div>
</div>
</li>
</ul>
</div>
<div style="clear: both;"></div>
</div>'
You can see I have attempted to add class and id, but when I say it does not seem to work, I mean that it only applies the setting to one. For example by leaving it as ul and li on code 1, code 1 works and then code two fails, and appears in the same way as code 1. But if I put code 1 as ul1 and li1 then 1 doesent work and 2 works. Sorry if this is a little confusing. But basically I can not get them to work independently.

Sorry I would add this as a comment but don't have the option. It looks as though you need to add the classes into the script itself to get each script to relate to the correct ul and li or do you want both scripts to work on all ul and li s?
Right, I think I've got it, try changing the following:
$('#ul1, #ul3, #ul4').roundabout({
shape: 'waterWheel',
minOpacity: -1.0,
duration: 300,
easing: 'easeOutCubic'
});
$('#li1, #li3, #li4').dblclick(function(e) {
e.preventDefault();
return false;
});
and change your div structure for the waterWheel bit to:
<ul class="il1" id="ul1">
<li class="li1" id="li1">creative</li>
<li class="li1" id="li1">delicate</li>
<li class="li1" id="li1">lovely</li>
<li class="li1" id="li1">stunning</li>
<li class="li1" id="li1">elegant</li>
</ul>
</div>
<div class="part">, so to imrpove I should add</div>
<div class="part moving verb">
<ul class="il1" id="ul3">
<li class="li1" id="li3">tones</li>
<li class="li1" id="li3">colour</li>
<li class="li1" id="li3">shadows</li>
<li class="li1" id="li3">faces</li>
<li class="li1" id="li3">shadeing</li>
</ul>
</div>
<div class="part">but before you go, I think the website is</div>
<div class="part moving feeling">
<ul class="il1" id="ul4">
<li class="li1" id="li4">clean</li>
<li class="li1" id="li4">stunning</li>
<li class="li1" id="li4">poor</li>
<li class="li1" id="li4"i>smooth</li>
<li class="li1" id="li4">expired</li>
</ul>`