I am interested in using this MosaicJS plugin. The instructions seemed straight forward, so I tried to copy the basic implementation.
$('#myMosaic').Mosaic();
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mosaic/0.131/jquery.mosaic.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mosaic/0.131/jquery.mosaic.css" />
</head>
<body>
<div id="myMosaic">
<img src="https://placeimg.com/640/480/all" width="400" height="350" />
<img src="https://placeimg.com/640/480/all" width="320" height="200" />
<img src="https://placeimg.com/640/480/all" width="870" height="420" />
<img src="https://placeimg.com/640/480/all" width="442" height="922" />
</div>
When I did this, I get an error related to the JS script section:
Uncaught ReferenceError: Mosaic is not defined at (index):131
Anyone else had this issue? I made a proper link to the actual jquery mosaic files in the HTML head section. What sort of solutions can be implemented? Thanks!
Try this.
$(document).ready(function(){
$('#myMosaic').Mosaic();
});
Just used the jquery-mosaic CDN.
$('#myMosaic').Mosaic();
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mosaic/0.131/jquery.mosaic.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-mosaic/0.131/jquery.mosaic.css" />
</head>
<body>
<div id="myMosaic">
<img src="https://placeimg.com/640/480/all" width="400" height="350" />
<img src="https://placeimg.com/640/450/all" width="320" height="200" />
<img src="https://placeimg.com/900/800/all" width="870" height="420" />
<img src="https://placeimg.com/1000/1000/all" width="442" height="922" />
</div>
Related
I'm trying to make a song play when I click on an image. everytime I do it using the solutions on the here Either the image doesn't show, the audio doesn't play, or both. I don't understand what my issue is and could use any help.
My HTML
`
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<title>#F7D64B</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css"
href="https://csshake.surge.sh/csshake.min.css">
</head>
<body>
<script>
var audio = new Audio('Music/song.wav');
function myAudioFunction
<script>
<center>
<audio id="audio" src="Music/song.wav"></audio>
<a onclick="document.getElementById("audio").play();">
<img src="assets/a.png" width=550 height=550 class="shake-slow shake-
constant">
</a>
</center>
</body>
<footer>
<!-- art by #woun404-->
<!-- #F7D64B -->
</footer>
</html>`
Here's a working example:
document.getElementById('play').addEventListener('click', function (e) {
e.preventDefault();
document.getElementById('audio').play();
});
<audio id="audio" src="http://www.soundboard.com/handler/DownLoadTrack.ashx?cliptitle=Never+Gonna+Give+You+Up-+Original&filename=mz/Mzg1ODMxNTIzMzg1ODM3_JzthsfvUY24.MP3"></audio>
<a href="#" id="play">
<img src="assets/a.png" width=550 height=550 class="shake-slow shake-
constant">
</a>
Using JavaScript only would look like this:
<body>
<center>
<audio id="audio" src="Music/song.wav"></audio>
<img id="img" src="assets/a.png" width=550 height=550 class="shake-slow shake-
constant">
</center>
<script>
document.getElementById("img").addEventListener("click", function(){
document.getElementById("audio").play();
});
<script>
</body>
It is advised to use JavaScript for big projects since it works way faster.
I'm trying to show a list of images through fancybox. When each image is clicked, the image initially always appears in top right corner of the browser window. On the second click of the object, the image positions itself correctly. But in both cases the popped-up image is not styled with the usual border and close-symbol.
I followed the tutorial from:
http://tutvid.com/webdesign/dreamweaver/how-to-use-fancybox-jquery-tutorial/
And the result just doesn't add up.
How can I make the fancybox command work straight away from the first mouse click?
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox();
});
</script>
<head>
<link rel="stylesheet" href="js/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="type/javascrript" src="js/fancybox/source/jquery.fancybox.pack.js"> </script>
<script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/fancyBox/source/jquery.fancybox.pack.js"> </script>
</head>
<body>
<a class="fancybox" href="images/atnight/image11.jpg">
<img src="images/atnight/image11.jpg" width="620" /></a>
<a class="fancybox" href="images/atnight/image10.jpg">
<img src="images/atnight/image10.jpg" width="620" /></a>
</body>
Hope somebody can help :-)
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="js/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="type/javascrript" src="js/fancybox/source/jquery.fancybox.pack.js"> </script>
<script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
<script type="text/javascript" src="js/fancyBox/source/jquery.fancybox.pack.js"> </script>
</head>
<body>
<a class="fancybox" href="images/atnight/image11.jpg">
<img src="images/atnight/image11.jpg" width="620" /></a>
<a class="fancybox" href="images/atnight/image10.jpg">
<img src="images/atnight/image10.jpg" width="620" /></a>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox();
});
</script>
I cant get the greenbar to slidedown when the page loads. Can anyone tell me what's wrong with my code?
HTML
<html>
<head>
<title>
Live Green Plants
</title>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="home.js"></script>
</head>
<body>
<div class="headerBar">
<img src="headerBar.png" width="657" height="34" alt=""/>
</div>
<script type="text/javascript" src="Script/jquery-1.9.2.min.js"></script>
<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>
</script>
</body>
</html>
Javascript
$(document).ready(function(){
$('.headerBar').slideDown('slow');
});
It needs to start off as invisible, using style="display:none"
See it in action: http://jsfiddle.net/jas6H/5/
For some reason that I can not see, I have two nivo sliders on the same page that do not work. Help much appreciated. Below is the well known Nivo Slider code that I am adapting.
Header
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
Nivo Slider 1
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt=""/>
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt=""/>
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt=""/>
</div>
</div>
</div>
Nivo Slider 2
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider2" class="nivoSlider2">
<em><img src="images/up2.jpg" data-thumb="images/toystory2.jpg" alt="" title="Hello, My name is Daisy and I am a mobile beauty specialist covering the Cambridge area." data-transition="fade" />
<img src="images/walle2.jpg" data-thumb="images/up2.jpg" alt="" title="My clients know that when they come to me, they will get the service and the look that they want. I really can help you be that face that gets noticed in the crowd." data-transition="fade" />
<img src="images/nemo2.jpg" data-thumb="images/walle2.jpg" alt="" title="However I am not just a specialist in applying make-up, I offer luxury manicures and pedicures, Sienna X spray tanning, massages and a lot mot" data-transition="fade" />
<img src="images/toystory2.png" data-thumb="images/nemo2.jpg" alt="" title="This is an example of a caption" data-transition="fade" />
</em></div>
</div>
</div>
JavaScript
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({pauseTime:10000});
$('#slider2').nivoSlider({pauseTime:5000});
effect:'fade'
});
</script>
There are a few issues here.
You have duplicate IDs. I doubt this is the problem but it's bad practice.
You have <em> tags around your images in the 2nd slider.
Finally, you have incorrectly specified your effect parameter - this is most likely the cause of the issue
$(window).load(function() {
$('#slider').nivoSlider({pauseTime:10000});
$('#slider2').nivoSlider({
pauseTime:5000,
effect:'fade'
});
});
Please change <div id="wrapper"> for one of the slider and then check.
Note: you shouldn't have same id's for both div's(not only divs) anytime.
http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/
I'm trying to implement Slicebox into my website and I'm having issues. I always want to offer users the option of Shadowbox within the same page, so I'm initializing both.
<!-- Shadowbox code. -->
<link href="javascript/shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
Shadowbox.init();
</script>
<!-- Slicebox Code -->
<script type="text/javascript">
$('.sb-slider').slicebox();
</script>
But I'm not sure how to get it to work within the actual page. I have this linking, as well as these images.
<script type="text/javascript" src="javascript/scripts.js"></script>
<script type="text/javascript" src="javascript/shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.min.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/modernizr.custom.13303.js"></script>
And
<div class="sb-slider">
<img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" />
<img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" />
<img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" />
</div>
Do I have it in the right directory?
Any help would be appreciated, thanks.
FULL HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<!-- This tag is required to make the page valid XHTML. -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- Give your page a title. -->
<title>Photo Gallery for NBC's Community</title>
<!-- Put your name and a description of the assignment or project here. -->
<meta name="author" content="" />
<meta name="description" content="A collection of photos regarding NBC's Community television show." />
<!-- This links to a sample CSS file. -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- This include a standard jQuery library and a sample JS file for your own code. -->
<script type="text/javascript" src="javascript/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="javascript/scripts.js"></script>
<script type="text/javascript" src="javascript/shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.min.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/jquery.slicebox.js"></script>
<script type="text/javascript" src="javascript/slicebox/js/modernizr.custom.13303.js"></script>
<!-- Shadowbox code. -->
<link href="javascript/shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
Shadowbox.init();
</script>
<!-- Slicebox Code -->
<script type="text/javascript">
$('.sb-slider').slicebox();
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<img src="media/header.png" alt="Community Header" />
</div>
<p>Community is an American television comedy series created by Dan Harmon that airs on NBC. The series is about a group of students at a community college in the fictional locale of Greendale, Colorado. The series heavily uses meta-humor and pop culture references, often parodying film and television clichés and tropes. The series premiered Thursday, September 17, 2009, and airs in the 8:00 pm ET time slot. It previously aired in the 9:30 pm ET time slot, beginning with its premiere, but later relocated with its fourth episode. On March 17, 2011, NBC renewed Community for a third season, which premiered on September 22, 2011.</p>
<div class="sb-slider">
<img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" />
<img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" />
<img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" />
</div>
<div id="gallery">
<table>
<tr><td><img src="media/community/thumbnails/abed_annie_troy.jpg" alt="Abed, Annie and Troy" /></td><td><img src="media/community/thumbnails/annie_paintball.jpg" alt="Annie during the first paintball episode" /></td><td><img src="media/community/thumbnails/annie.jpg" alt="Annie as a skeleton" /></td><td><img src="media/community/thumbnails/britta_dinosaur.jpg" alt="Britta's and Jeff's Halloween costumes" /></td></tr>
<tr><td><img src="media/community/thumbnails/cast_cafeteria.jpg" alt="The cast in the cafeteria" /></td><td><img src="media/community/thumbnails/cast_class.jpg" alt="The cast in a classroom" /></td><td><img src="media/community/thumbnails/cast_cloud.jpg" alt="The cast thinking" /></td><td><img src="media/community/thumbnails/cast_mural.jpg" alt="Cast in front of a chalkboard" /></td></tr>
<tr><td><img src="media/community/thumbnails/cast_study_room.jpg" alt="The cast in their study room" /></td><td><img src="media/community/thumbnails/cast.jpg" alt="The cast" /></td><td><img src="media/community/thumbnails/christmas_episode.jpg" alt="Claymation Christmas episode" /></td><td><img src="media/community/thumbnails/pierce.jpg" alt="Pierce with other students" /></td></tr>
<tr><td><img src="media/community/thumbnails/season_3.jpg" alt="Intro to season three" /></td><td><img src="media/community/thumbnails/show_poster.jpg" alt="Poster for the show" /></td><td><img src="media/community/thumbnails/troy_and_abed.jpg" alt="Troy and Abed In The Morning" /></td><td><img src="media/community/thumbnails/trio_paintball.jpg" alt="Troy, Annie and Abed after paintball" /></td></tr>
</table>
</div>
</div>
</body>
</html>
You trying to use DOM element when DOM is not ready. Please do following changes. It should work like this.
First of all, remove these two script tag. They are unnecessary, we just combine them to only one script tag.
<script type="text/javascript">
Shadowbox.init();
</script>
<!-- Slicebox Code -->
<script type="text/javascript">
$('.sb-slider').slicebox();
</script>
Then just write these lines
<script type="text/javascript">
$(function(){
Shadowbox.init();
<!-- Slicebox Code -->
$('.sb-slider').slicebox();
});
</script>