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>
:)
Related
I have a figure and a figcaption and I would like to have one picture and when I click on it, have more thumbnails/pictures.
My figure :
<!-- Bootstrap CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="col-6 col-lg-3">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<img src="https://picsum.photos/300/100" alt="loupe.svg">
</figcaption>
<br>
<img src="https://picsum.photos/300/101" alt="imagexs.jpg">
</figure>
</div>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Thank you.
One way you could do it would be to set the intital display of images to none and on click display them
$(document).ready(function() {
var MoreImages = document.getElementById("moreImages");
var ShowImages = document.getElementById("showImages");
MoreImages.style.display = "none";
ShowImages.addEventListener("click", function() {
document.getElementById("moreImages").style.display = "";
});
});
img {
height: 150px;
width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<figure>
<figcaption>
<h3>project</h3>
<h4>project test</h4>
<span id="showImages"
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</figcaption>
<div class="row" id="moreImages">
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
<div class="col-4">
<span
><img
src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
alt="loupe.svg"
/></span>
</div>
</div>
</figure>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
I need serious help with my code. I am pretty new to JavaScript so it could be something really simple.
I want to use a Jquery plugin called ElevateZoom.
I downloaded the plugin, linked the jquery and elevatezoom files (jquery is working fine) and copied the demo's code. The demo works fine, so what I do not get is on the exact same browser but on my page it does not work. I have been scratching my head for at least 3 hours over this and tried multiple things such as implementing the scripts internally, trying different versions of jquery, using different images etc. My HTML and JavaScript code is below (note my first block of javascript works):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="Jeff/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="Jeff/script.js"></script>
<script src="Jeff/jquery.elevatezoom.js"></script>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="test"></div>
<div class="logo"></div>
<nav>
<div class="container">
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>Deals</li>
<li>Store</li>
<li>Basket</li>
<li>Coming soon</li>
<li>Support</li>
</ul>
</div>
</nav>
<div class="main-container">
<div class="content">
<br>
<div class="ws_shadow"></div>
<hr>
<div class="contentbox-big2" style="margin-left: 0px;">
<div class="titlebox">
ADS
<div class="titleinfo"></div>
</div>
<div class="newscontent">
<img src="img/brit.png" alt="image" style="width:167px;height:258px;">
<br> <br> <hr> <br> <br>
<img src="img/coke.jpg" alt="image" style="width:167px;height:258px;">
<hr>
</div>
</div>
<div class="contentbox-big3" style="margin-left: 0px;">
<div class="titlebox">
Deals
<div class="titleinfo"></div>
</div>
<div class="newscontent2">
<img id="zoom_01" src="https://cdn.bulbagarden.net/upload/thumb/0/06/Sun_EN_boxart.png/250px-Sun_EN_boxart.png" data-zoom-image="https://cdn.bulbagarden.net/upload/thumb/0/06/Sun_EN_boxart.png/250px-Sun_EN_boxart.png"/>
Pokemon Sun 3DS - £14.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
<img src="https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc3/20171029_pubg_logo.jpg" alt="image" style="width:300px;height:350px;">
Player Unknown's Battlegrounds - £19.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
<img src="http://sm.ign.com/t/ign_in/cover/b/battlefiel/battlefield-1_9ufa.250.jpg" alt="image" style="width:300px;height:350px;">
Battlefield 1 - £24.99. Add to basket: <img src="img/basket.png" alt="image" style="width:50px;height:50px;" onclick = "myFunction()">
<br> <br> <hr> <br> <br>
<hr>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</div>
<div class="soundcloud">
<iframe width="100%" height="80" scrolling="no"
frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/184695140&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
</html>
JavaScript code:
function myFunction() {
if (window.confirm('If you click "ok" you will be taken to your shopping cart')) {
window.location.href='basket.html';
};
}
function myFunction() {
if (window.confirm('If you click "ok" you will be taken to your shopping cart')) {
window.location.href='basket.html';
};
}
$('#zoom_01').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
Here is my HTML page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Demo slider</title>
<link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/1/js-image-slider.js" type="text/javascript"></script>
</head>
<body>
<div id="sliderFrame">
<div id="slider">
<img src="images/image-slider-1.jpg" id="img1" alt="" />
<img src="images/image-slider-2.jpg" id="img2" alt="" />
<img src="images/image-slider-3.jpg" id="img3" alt="" />
<img src="images/image-slider-4.jpg" id="img4" alt="" />
<img src="images/image-slider-5.jpg" id="img5" alt="" />
</div>
</div>
<div id="custom_text">
<h1 style="color: blue;">Image 1 text</h1>
</div>
<div id="custom_text1">
<h1 style="color: blue;">Image 2 text</h1>
</div>
<div id="custom_text2">
<h1 style="color: blue;">Image 3 text</h1>
</div>
<div id="custom_text3">
<h1 style="color: blue;">Image 4 text</h1>
</div>
<div id="custom_text4">
<h1 style="color: blue;">Image 5 text</h1>
</div>
</body>
</html>
Using menucool's Javascript Image Slider library: link to site
I want to display different text on different images i tried it giving absolute and relative positions to div and img tag but unable to acheive the output.
The javascript slider function is the predefined function.Basically i want to achieve this
This is why you always read the documentation:
http://www.menucool.com/javascript-image-slider#view2
Captions are set through each slide image's alt attribute. If the
image is formatted as lazy loaded image, its caption can be defined by
the title or data-alt attribute:
HTML
<img src="//placehold.it/250x250" id="img1" alt="Caption one" />
<img src="//placehold.it/249x249" id="img2" alt="Caption two" />
<img src="//placehold.it/251x251" id="img3" alt="Caption three" />
<img src="//placehold.it/248x248" id="img4" alt="Caption four" />
<img src="//placehold.it/252x252" id="img5" alt="Caption five" />
JSFiddle Demo
I'm trying to get a simple carousel to work from Twitter Bootstrap 3.1.1. I've stripped it down to the simple generic Bootstrap mark-up with no styling but I've still had no luck getting the images to slide. Would appreciate any suggestions. My mark-up is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="test/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
<style type="text/css">
.container{
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<!-- carousel -->
<div id="this-carousel-id" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="images/sample1.svg" alt="" />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/sample2.svg" alt="" />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/sample3.svg" alt="" />
<div class="carousel-caption">
</div>
</div>
</div>
<!-- .carousel-inner -->
<!-- next and previous controls here
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div>
<!-- .carousel -->
<!-- end carousel -->
</div><!-- /container -->
<!-- Javascript-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
<!-- Bootstrap jQuery plugins compiled and minified -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 4000
});
});
</script>
</body>
</html>
It's probably because you're not pointing to a CDN version of bootstrap.min.js.
I say this because you're referencing jquery and the css from CDN locations but you're looking for the bootstrap.min.js to be local to your site. Is this how you have it configured?
Change it to use
http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js
See http://jsfiddle.net/8vvqf/
Maybe you open the html file directly, instead of from a server. Then the CDN url will become
file://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
change
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
and try again?
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.