My lightbox gallery is working perfectly offline but i've just uploaded it online at it's not working at all, clicking on images just takes you to a new page.
Here is the page ... www.jevonz.co.uk/portfolio.html
The file paths seem to be fine and I've even switched from locally hosting jquery to using the google hosted one but all to no avail. Any help would be much appreciated. Cheers!
Here's the code for the page if that gives any more info.
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="Jevonz.css" rel="stylesheet" type="text/css">
<link href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"> </script>
</head>
<body>
<div class="gridContainer clearfix">
<div id="LayoutDiv1" align="center">
<img src="images/JevonzHeader.jpg"/>
</div><!-- end LayoutDiv1 -->
<div id="Navigation" align="center">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
<!-- end Navigation -->
<div id="galleria" align="center">
<img src="images/gallery/Thumbnails/bio_thumb.jpg" width="200" height="200" alt="Bioluminescence" />
<img src="images/gallery/Thumbnails/blueRobot_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/DeepSea_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/DiD_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/EscapeLife_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/GorillaLarge_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/LifeRobot_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/LureDeep_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/TangledFamily_thumb.jpg" width="200" height="200" alt="" />
<img src="images/gallery/Thumbnails/WorldBelow_thumb.jpg" width="200" height="200" alt="" />
<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[#rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
});
</script>
</div>
</div>
<!-- end gridContainer -->
</body>
</html>
You are getting 403 Forbidden errors on the lightbox files, I have posted a screenshot of the Net panel in firebug:
http://cl.ly/image/2m461v012M1i
Check the permissions on that folder and make sure that the webserver can read that folder and its contents.
Related
I've tried to use a number of pre-written javascript photo galleries for our website, but while they work on the source site, I'm failing to get them to work on mine. It's obviously something basic, but I'm just not seeing it. The latest pre-written script I've tried is at https://codepen.io/maulikdarji/pen/WwqdMO/ , I've copied the html into my web page as below, modified only by taking out extraneous text and changing the images:
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class=""><!-- InstanceBegin template="/Templates/newpage.dwt" codeOutsideHTMLIsLocked="false" -->
<!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="Head" -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="Dunlaw.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<script src="slide.js"></script>
<!-- InstanceEndEditable -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="gridContainer clearfix">
<table width="100%" border="0">
<tr>
<td width="8%" align="center" valign="bottom"> </td>
<td width="84%" align="center"><span class="Head1"> </span>
<p>The Trust | Applying | Awards | Trustees | Links | Contacts | Home </p>
</p>
<p><img src="windfarm.jpg" alt="Dun Law windfarm"> </p>
<p class="Head1"> DUN LAW TRUST </p>
<!-- InstanceBeginEditable name="Titleregion" -->
<div id="Titlediv">Image Gallery</div>
<!-- InstanceEndEditable -->
<td width="8%" align="right" valign="baseline">
</tr>
</table>
<div id="LayoutDiv2"><!-- InstanceBeginEditable name="Main_region" -->
<hr>
<div id="gallery" class="container-fluid">
<img src="images/1.JPG" class="card img-responsive">
<img src="images/2.JPG" class="card img-responsive">
<img src="images/3.JPG" class="card img-responsive">
<img src="images/1.jpg" class="card img-responsive">
<img src="images/2.jpg" class="card img-responsive">
<img src="images/3.JPG" class="card img-responsive">
<img src="images/1.JPG" class="card img-responsive">
<img src="images/2.JPG" class="card img-responsive">
<img src="images/3.JPG" class="card img-responsive">
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
</div>
</div>
</div>
I've added the css text to a css file, and made up a file with the js script which I've named 'slide.js' and called from the html page (at other's suggestions, I've tried calling it in the header, body, and at the end, with no joy).
The script works fine on the source site, showing a large image when you click on the gallery, but doesn't do a thing on my site at http://s752783569.websitehome.co.uk/slideshow.html
I'd be grateful for any pointers as to my newbie failings...
I used to have an hyperlink that is anchored to an image.
But I now when I click the image it needs to zoom in first so I used Fancy box, then the zoom in image must have the link.
Is it possible? Here is my code below
<html>
<head>
<meta charset="utf-8">
<title>My page</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>
<a href="image.jpg" data-fancybox data-caption="www.google.com" data-width="2048" data-height="1365">
<img class="fancybox" src="thumbnail.jpg" alt="" />
</a>
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.fancybox.min.js"></script>
</body>
</html>
For future reference, it is possible but you need to create a form for your fancy box and not a direct image.
<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.0.5"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.5" media="screen" />
</head>
<body>
<img class="fancybox" src="thumbnail.jpg" alt="" />
<div id="divForm" style="display:none">
<img class="fancybox" src="thumbnail.jpg" alt="" />
</div>
<script type="text/javascript">
$("#btnForm").fancybox();
</script>
</body>
</html>
I have an <input> with type Search and class as SearchBox. I want this input to toggle when I click an img of class Search. I've connected my html page to jQuery 1.11.1 available from ajax.googleapis.com and this is my .js file:
$(document).ready(function () {
$(".Search").click(function () {
$("input.SearchBox").toggle();
});
});
I've hidden the SearchBox using CSS, like this:
.SearchBox {
display: none;
}
But it does not work. Can anyone help? Thanks in advance.
the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="Connet, connect, consultation online">
<meta name="description" content="Website of Connet.">
<meta name="author" content="Connet Developement Team">
<meta http-equiv="content-language" content="en-US">
<title> Connet. Connect. Through the internet. </title>
<link rel="favicon" href="favicon.ico" />
<link rel="stylesheet" href="/page_files/css/Main.style.css" type="text/css"/>
<script src="/page_files/js/Default.interactivity.js"></script>
<script src="/page_files/js/Default.proccessing.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--<script src="/page_files/js/jQuery3.0.0.js"></script>-->
<script src="/page_files/data/Default.data.js" ></script>
<script id="roughScript">
</script>
<noscript>
We're sorry, but looks like we can't
access our scripts. Refreshing might fix it.
Check yor internet connection. If it's our
fault we'll usually have something about it
in our blogs. Contact us if problem persists.
</noscript>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="Wrapper">
<nav>
<img src="bf" alt="tbf"/>
<ul class="NavClass">
<li>
<a class="NavLink" onclick="location.reload();">
<img class="NavImg" src="/page_files/media/home-icon.png" alt="Home" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Contact.html');">
<img class="NavImg" src="/page_files/media/contact-icon.png" alt="Contact" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Careers.html');">
<img class="NavImg" src="/page_files/media/careers-icon.png" alt="Careers" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Conroot.html');">
<img class="NavImg" src="/page_files/media/consult-icon.png" alt="Enter Consulation" />
</a>
</li>
<li>
<a class="NavLink" onclick="open('Loginpage.html');">
<img class="NavImg" src="/page_files/media/myspace-icon.png" alt="Login" />
</a>
</li>
<li>
<img class="Search" src="/page_files/media/search-icon.png" alt="Search" />
</li>
<li>
<input class="SearchBox" type="search" />
</li>
</ul>
</nav>
<header>
</header>
<div class="Sections">
<section class="TopSec">
</section>
<section class="MidSec">
</section>
<section class="LowSec">
</section>
<section class="SignIn">
</section>
</div>
<footer>
</footer>
</div>
</body>
</html>
I am using PanZoom.js with jQuery Mobile 1.4.
So I have 2 html pages. 1st one index.html & 2nd one is instruction.html. I have placed two jQuery page on my second html. 1st jQuery page works fine, but the second one doesnt. If I hit refresh, it works find. That means, it's not loading the external script.
What shall I do?
My codes at below:
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<html manifest="app.manifest">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PTM 2013</title>
<link href="resources/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="resources/css/ptm.css" rel="stylesheet" type="text/css">
<link href="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="resources/js/respond.min.js"></script>
<script src="jquery.mobile-1.4.0/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
<!-- JQuery Mobile Theme -->
<link rel="stylesheet" href="resources/css/themes/ryco.css" />
<link rel="stylesheet" href="resources/css/themes/jquery.mobile.icons.min.css" />
<!-- /JQuery Mobile Theme -->
<!-- apple stuffs -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="resources/icon/icon-144.png">
<link rel="apple-touch-icon" sizes="76x76" href="resources/icon/icon-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="resources/icon/icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="resources/icon/icon-152.png">
<!-- /apple stuffs -->
<!-- pinch zoom -->
<link rel="stylesheet" href="resources/pinchzoom/pinch-zoom-style.css" />
<style type="text/css">
div.pinch-zoom, div.pinch-zoom img {
width: 100%;
-webkit-user-drag: none;
}
</style>
<script src="resources/pinchzoom/pinchzoom.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('div.pinch-zoom').each(function () {
new RTP.PinchZoom($(this), {});
});
})
</script>
<!-- /pinch zoom -->
</head>
<body>
<div class="gridContainer clearfix">
<div id="full-wide">
<div data-role="page" id="instruction-page" class="slide">
<!-- Slide Page -->
<script>
$(document).on("pageinit","#instruction-page",function(){
$("test").on("swiperight",function(){ //put 'div' in 'test'
/* $("span").text("Swipe detected!");*/
$.mobile.changePage( "index.html", { transition: "none", changeHash: false });
});
});
</script>
<!-- /Slide Page -->
<div data-role="header" data-position="fixed">
<a class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext" href="index.html">Home</a>
<h1>INTRODUCTION</h1>
Menu </div>
<div data-role="content" >
<span> </span>
<div class="pinch-zoom">
<img src="resources/images/introduction/p-1.jpg"> </div>
<div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="header"> Icon only
Icon only
<h1> </h1>
</div>
</div>
<!-- Popup menu -->
<div class="ui-popup-container ui-popup-hidden" id="popupMenu-popup">
<div data-role="popup" id="popupMenu" class="ui-popup ui-overlay-shadow ui-corner-all" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="none" data-position-to="origin" data-dismissible="true">
<ul data-role="listview">
<li><img class="ui-li-icon" src="resources/images/thumblins/intro-cover.gif">Introduction</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/hoses-cover.gif">Hoses</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/couplings-cover.gif">Couplings</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/adaptors-cover.gif">Adaptors</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/accessories-cover.gif">Accessories</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/filters-cover.gif">Filters</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/technical-cover.gif">Technical</li>
<li><a class="ui-icon-info ui-btn ui-btn-icon-left" href="instruction-app.html">Instruction</a></li>
<li><a class="ui-icon-refresh ui-btn ui-btn-icon-left" href="javascript:refreshPage()">Refresh Page</a></li>
</ul>
</div>
</div>
<!-- /popup menu -->
</div>
<!-- /Page1 -->
<!-- /Page2================================================================= -->
<div data-role="page" id="page2" class="slide">
<div data-role="header" data-position="">
<a class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext" href="index.html">Home</a>
<h1>INTRODUCTION</h1>
Menu </div>
<div data-role="content" >
<span> </span>
<!-- pinch zoom -->
<link rel="stylesheet" href="resources/pinchzoom/pinch-zoom-style.css" />
<style type="text/css">
div.pinch-zoom, div.pinch-zoom img {
width: 100%;
-webkit-user-drag: none;
}
</style>
<script src="resources/pinchzoom/pinchzoom.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('div.pinch-zoom').each(function () {
new RTP.PinchZoom($(this), {});
});
})
</script>
<!-- /pinch zoom -->
<div class="pinch-zoom">
<img src="resources/images/introduction/p-2.jpg"> </div>
</div>
<div data-role="footer" data-position="" data-theme="b">
<div data-role="header"> Icon only
Icon only
<h1> </h1>
</div>
</div>
<!-- Popup menu -->
<div class="ui-popup-container ui-popup-hidden" id="popupMenu-popup">
<div data-role="popup" id="popupMenu" class="ui-popup ui-overlay-shadow ui-corner-all" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="none" data-position-to="origin" data-dismissible="true">
<ul data-role="listview">
<li><img class="ui-li-icon" src="resources/images/thumblins/intro-cover.gif">Introduction</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/hoses-cover.gif">Hoses</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/couplings-cover.gif">Couplings</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/adaptors-cover.gif">Adaptors</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/accessories-cover.gif">Accessories</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/filters-cover.gif">Filters</li>
<li><img class="ui-li-icon" src="resources/images/thumblins/technical-cover.gif">Technical</li>
<li><a class="ui-icon-info ui-btn ui-btn-icon-left" href="instruction-app.html">Instruction</a></li>
<li><a class="ui-icon-refresh ui-btn ui-btn-icon-left" href="javascript:refreshPage()">Refresh Page</a></li>
</ul>
</div>
</div>
<!-- /popup menu -->
</div>
<!-- /Page1 -->
</div>
</div>
</body>
</html>
I'm trying to get a jquery slider called wmu slider to work. I've downloaded the files and demo from https://github.com/pastawoua/wmuSlider and when I open up the demo.html locally everything works as it should, but when I upload it to my site nothing loads, here is the url http://www.klossal.com/wmuSlider/demo/demo.html
I've looked over everything multiple times, urls are all correct, I've been trying to fix this for hours now with no luck, any help would be really appreciated.
sorry if links didn't work for you, here is the code:
HTML:
<!DOCTYPE html>
<!-- BEGIN html -->
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<!-- BEGIN head-->
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0">
<!-- Title -->
<title>wmuSlider Demo</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<script type="text/javascript" src="modernizr.custom.min.js"></script>
<script src="http://www.klossal.com/jquery-1.7.2.min.js"></script>
<script src="../jquery.wmuSlider.js"></script>
<script src="../jquery.wmuGallery.js"></script>
<script>
$('.example1').wmuSlider();
$('.example2').wmuSlider({
touch: true,
animation: 'slide'
});
$('.example3').wmuSlider({
touch: Modernizr.touch,
animation: 'slide',
items: 2
});
$('.example4').wmuGallery();
</script>
<!-- END head -->
</head>
<!-- BEGIN body -->
<body>
<!-- BEGIN .wmuSlider -->
<div class="wmuSlider example1">
<div class="wmuSliderWrapper">
<article>
<img src="http://www.klossal.com/media/boundarywaters/boundry-1.jpg" />
</article>
<article>
<img src="http://www.klossal.com/media/boundarywaters/boundry-2.jpg" />
</article>
<article>
<img src="http://www.klossal.com/media/boundarywaters/boundry-3.jpg" />
</article>
<article>
<img src="http://www.klossal.com/media/boundarywaters/boundry-4.jpg" />
</article>
<article>
<img src="http://www.klossal.com/media/boundarywaters/boundry-5.jpg" />
</article>
<article>
<img src="http://www.klossal.com/media/boundarywaters/boundry-6.jpg" />
</article>
</div>
<!-- END .wmuSlider -->
</div>
<!-- BEGIN .wmuSlider -->
<div class="wmuSlider example2">
<div class="wmuSliderWrapper">
<article>
<img src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6104/6271856202_1e3ccb3deb.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6053/6268322528_818ab33f7f.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6232/6239597762_15491d4c97.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6057/6224753006_9fb962d890.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6036/6213397745_1d8f223e93.jpg" />
</article>
</div>
<!-- END .wmuSlider -->
</div>
<!-- BEGIN .wmuSlider -->
<div class="wmuSlider example3">
<div class="wmuSliderWrapper">
<article>
<img src="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6104/6271856202_1e3ccb3deb.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6053/6268322528_818ab33f7f.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6232/6239597762_15491d4c97.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6057/6224753006_9fb962d890.jpg" />
</article>
<article>
<img src="http://farm7.static.flickr.com/6036/6213397745_1d8f223e93.jpg" />
</article>
</div>
<!-- END .wmuSlider -->
</div>
<!-- BEGIN .wmuGallery -->
<div class="wmuGallery example4">
<div class="wmuSlider">
<div class="wmuSliderWrapper">
<article>
<img width="75" height="75"
src="http://farm7.static.flickr.com/6052/6279000273_218313c876_s.jpg" data-src-
full="http://farm7.static.flickr.com/6052/6279000273_218313c876.jpg" />
</article>
<article>
<img width="75" height="75"
src="http://farm7.static.flickr.com/6104/6271856202_1e3ccb3deb_s.jpg" data-src-
full="http://farm7.static.flickr.com/6104/6271856202_1e3ccb3deb.jpg" />
</article>
<article>
<img width="75" height="75"
src="http://farm7.static.flickr.com/6053/6268322528_818ab33f7f_s.jpg" data-src-
full="http://farm7.static.flickr.com/6053/6268322528_818ab33f7f.jpg" />
</article>
<article>
<img width="75" height="75"
src="http://farm7.static.flickr.com/6232/6239597762_15491d4c97_s.jpg" data-src-
full="http://farm7.static.flickr.com/6232/6239597762_15491d4c97.jpg" />
</article>
<article>
<img width="75" height="75"
src="http://farm7.static.flickr.com/6057/6224753006_9fb962d890_s.jpg" data-src-
full="http://farm7.static.flickr.com/6057/6224753006_9fb962d890.jpg" />
</article>
<article>
<img width="75" height="75"
src="http://farm7.static.flickr.com/6036/6213397745_1d8f223e93_s.jpg" data-src-
full="http://farm7.static.flickr.com/6036/6213397745_1d8f223e93.jpg" />
</article>
</div>
</div>
<!-- END .wmuGallery -->
</div>
<!-- Scripts -->
<script type="text/javascript" src="modernizr.custom.min.js"></script>
<script src="http://www.klossal.com/jquery-1.7.2.min.js"></script>
<script src="../jquery.wmuSlider.js"></script>
<script src="../jquery.wmuGallery.js"></script>
<script>
$('.example1').wmuSlider();
$('.example2').wmuSlider({
touch: true,
animation: 'slide'
});
$('.example3').wmuSlider({
touch: Modernizr.touch,
animation: 'slide',
items: 2
});
$('.example4').wmuGallery();
</script>
<!-- END body -->
</body>
<!-- END html -->
</html>
There are muliple JS files, so I will link to the github of them:
https://github.com/pastawoua/wmuSlider/blob/master/jquery.wmuGallery.js
https://github.com/pastawoua/wmuSlider/blob/master/jquery.wmuslider.js
https://github.com/pastawoua/wmuSlider/blob/master/demo/modernizr.custom.min.js
here is the CSS:
https://github.com/pastawoua/wmuSlider/blob/master/demo/css/demo.css
In case this hasn't been resolved yet (or for future searchers), check each file downloaded from github. Looks like every file, including the sprites.png file, is a copy of the demo.html file when you right click and Save Link As.
Look at the demo files instead and copy/paste.
capslock matters!
change <script src="../jquery.wmuSlider.js"></script> to
<script src="../jquery.wmuslider.js"></script>
:)