We Keep Coding

How to dynamically populate bootstrap carousel's slides as well as the indicators?

I'm in the process of building an image gallery. There is a set of images in a grid layout and the idea is that when one of those images is clicked, it launches a bootstrap carousel pop-up. The main (active) slide and list indicator should be the image that was clicked, the rest of the slides and indicators should be populated with pre-existing set of images that is within the grid. Is it possible to achieve this without using a separate set of images for the carousel?
Here's the code...
<div class="container">
<div class="image-wrapper">
<img class="image" src="image-1.jpg" />
</div>
<div class="image-wrapper">
<img class="image" src="image-2.jpg" />
</div>
<div class="image-wrapper">
<img class="image" src="image-3.jpg" />
</div>
<div class="image-wrapper">
<img class="image" src="image-4.jpg" />
</div>
</div>
Bootstrap carousel (currently uses a separate set of images)
<div id="custCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="active-img" src="image-1.jpg">
</div>
<div class="carousel-item">
<img src="image-2.jpg">
</div>
<div class="carousel-item">
<img src="image-3.jpg">
</div>
<div class="carousel-item">
<img src="image-4.jpg">
</div>
</div> <!-- Left right -->
<a class="carousel-control-prev" href="#custCarousel" data-slide="prev">
<span class="carousel-control-prev-icon">
←
</span>
</a>
<a class="carousel-control-next" href="#custCarousel" data-slide="next">
<span class="carousel-control-next-icon">
→
</span>
</a>
<!-- Thumbnails -->
<ol class="carousel-indicators list-inline">
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0"
data-target="#custCarousel">
<img src="image-1.jpg">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#custCarousel">
<img src="image-2.jpg">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-2" data-slide-to="2" data-target="#custCarousel">
<img src="image-3.jpg">
</a>
</li>
<li class="list-inline-item">
<a id="carousel-selector-3" data-slide-to="3" data-target="#custCarousel">
<img src="image-4.jpg">
</a>
</li>
</ol>
</div>

How can I tracking link clicks dynamically with google analytics?

My html code like this :
<ul id="sticky-tab" class="hide-on-med-and-down">
#foreach (Sitecore.Data.Items.Item item in _stickyMenu.Children)
{
<li class="content accent-4 z-depth-2 #item.Fields[Templates.Navigable.Fields.CustomClass]" data-color="#item.Fields[Templates.Navigable.Fields.CustomClass]">
<a class="#classTriger" href="#(popupID==string.Empty?item.LinkFieldUrl(Templates.Link.Fields.Link).ToString():popupID)">
<div class="text">#item.Fields[Templates.Navigable.Fields.NavigationTitle]</div>
</a>
</li>
}
</ul>
If it generated, the result like this :
<ul id="sticky-tab" class="hide-on-med-and-down">
<li class="content accent-4 z-depth-2 red" data-color="red">
<a class="" href="/Specialties/menu1">
<div class="icon"><img src="" /></div>
<div class="text">menu 1</div>
</a>
</li>
<li class="content accent-4 z-depth-2 " data-color="">
<a class="" href="/Contents/menu2">
<div class="icon"><img src="" /></div>
<div class="text">menu 2</div>
</a>
</li>
<li class="content accent-4 z-depth-2 " data-color="">
<a class="" href="/Contents/menu3">
<div class="icon"><img src=""/> </div>
<div class="text">menu 3</div>
</a>
</li>
</ul>
I want to tracking link click with google analytics. I try like this :
<a class="#classTriger" href="#(popupID==string.Empty?item.LinkFieldUrl(Templates.Link.Fields.Link).ToString():popupID)" onclick="ga('send', 'event', 'a', 'click');">
<div class="text">#item.Fields[Templates.Navigable.Fields.NavigationTitle]</div>
</a>
But, it does not work. How can I solve this problem?

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>

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>`