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>
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?
Currently have a bootstrap Carousel that loads three images per slide. I want to split this up (eventually on mobile only) to be one image per slide dynamically. So that way desktop has three images per slide, and mobile has one image per slide.
HTML
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-lightbox="1" data-slide-to="0" data-target="#myCarousel"></li>
</ol>
<div class="carousel slide" data-interval="false" data-ride="carousel" id="lightboxImageCarousel">
<ol class="carousel-indicators" style="display: none;">
<li class="active" data-slide-to="0" data-target="#lightboxImageCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank1.jpg"></a>
</div>
<div class="col-xs-4 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank2.jpg"></a>
</div>
<div class="col-xs-4 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank3.jpg"></a>
</div>
</div>
</div><a class="left carousel-control" data-slide="prev" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav prev"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav next"></span> <span class="sr-only">Next</span></a>
</div>
</div>
</div>
</div>
</div>
</section>
jQuery
if ($('.item').has('.active')) {
var $itemActive = $('.item');
var countDivs = $itemActive[0].childElementCount;
console.log(countDivs);
// Remove classes and convert to XS 12, And hide the rest
$('.item').children().removeClass().addClass('col-xs-12').next().hide();
$('.item').each(function() {
console.log($('.item:nth-child(' + countDivs + ')'));
});
// Create a new Item and loop it to total number of col-xs-12 that exist inside of item
$('.carousel-inner').append("<div class='item'></div>")
// Add nth-child 1 of for Loop 1, and nth-child 2 for loop 2
// Where it breaks
$('.item.active').children().next().appendTo(".item").next().show();
}
(function() {
$('#myCarousel').carousel({
interval: 3200
});
}());
Why not use Bootstrap grid options ?
By using col-xs-12, the content should use 100% of the parent container for the xs media query.
Remember that you can also hide certain tags with the Responsive Utilities Classes
Edit I made a CodePen to illustrate my point, regarding the second technique (using two containers targeting mobile and desktop environment). I think it solves the OP original problem.
As a side note, one can also add tags with the target grid size (i.e. visible-xs-*) to the body tag of the document, then make JS functions to check if they are visible, and use these functions in a debounced $(window).resize(fn) event listener to raise specific events depending on the media query currently being used. This would allow the OP to switch between JS behaviors depending on the current media query, using for example the strategy pattern. It is a bit more complicated for this use case though...
HTML (original answer)
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-lightbox="1" data-slide-to="0" data-target="#myCarousel"></li>
</ol>
<div class="carousel slide" data-interval="false" data-ride="carousel" id="lightboxImageCarousel">
<ol class="carousel-indicators" style="display: none;">
<li class="active" data-slide-to="0" data-target="#lightboxImageCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank1.jpg"></a>
</div>
<div class="col-xs-12 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank2.jpg"></a>
</div>
<div class="col-xs-12 col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank3.jpg"></a>
</div>
</div>
</div><a class="left carousel-control" data-slide="prev" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav prev"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav next"></span> <span class="sr-only">Next</span></a>
</div>
</div>
</div>
</div>
</div>
</section>
Edit: second technique
<section>
<div class="container desktop-view hidden-xs">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-lightbox="1" data-slide-to="0" data-target="#myCarousel"></li>
</ol>
<div class="carousel slide" data-interval="false" data-ride="carousel" id="lightboxImageCarousel">
<ol class="carousel-indicators" style="display: none;">
<li class="active" data-slide-to="0" data-target="#lightboxImageCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank1.jpg"></a>
</div>
<div class="col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank2.jpg"></a>
</div>
<div class="col-sm-4">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank3.jpg"></a>
</div>
</div>
</div><a class="left carousel-control" data-slide="prev" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav prev"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav next"></span> <span class="sr-only">Next</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="container mobile-view hidden-sm hidden-md hidden-lg">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-lightbox="1" data-slide-to="0" data-target="#myCarousel"></li>
</ol>
<div class="carousel slide" data-interval="false" data-ride="carousel" id="lightboxImageCarousel">
<ol class="carousel-indicators" style="display: none;">
<li class="active" data-slide-to="0" data-target="#lightboxImageCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-12">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank1.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank2.jpg"></a>
</div>
</div>
<div class="item">
<div class="col-xs-12">
<a class="example-image-link" data-lightbox="example-set-7" data-title="" href="#"><img class="img-responsive example-image" src="blank3.jpg"></a>
</div>
</div>
</div><a class="left carousel-control" data-slide="prev" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav prev"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#lightboxImageCarousel" role="button"><span aria-hidden="true" class="rslides1_nav next"></span> <span class="sr-only">Next</span></a>
</div>
</div>
</div>
</div>
</div>
</section>
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>
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>`