|
JavaScript - Stop And Play Slideshow..
Been given a task to edit a simple javascript slide show to have form buttons
This what i have so far.. I have the next and back buttons working but i have no idea where to begin with play and stop. It should basically repeatedtly cycle. Quote: <script type="text/javascript"> var hol_pics = new Array(); // Create Array Object for (var i=0;i<9;i=i+1) { hol_pics[i]=new Image(); // Make 0 -> 8 array elements into Image Objects hol_pics[i].src="harbour"+i+".jpg"; // Preload Images } i=0; // 'Remember' original image displayed by img tag function next_photo() { i=i+1; if(i>8) i=0; // Increment image index but keep in range 0 - 8 // above 2 lines can be replaced by alternative code: i=(i+1)%9; document.images[0].src = hol_pics[i].src; // Display next image } function back_photo() { i=i-1; if(i<0) i=8; // Decrement image index but keep in range 0 - 8 // above 2 lines can be replaced by alternative code: i=(i-1+9)%9; document.images[0].src = hol_pics[i].src; // Display next image } //]]> </script> </head> <body> <h1>Basic Slide Show</h1> <p> <img src="harbour0.jpg" width="324" height="432" alt=></a> <form action=""> <input type="button" value="Previous" name="button" onclick="back_photo()" /> <input type="button" value="Next" name="button" onclick="next_photo()" /> </form> Similar TutorialsI am not sure if I am in the right section. I tried to search this but couldn't find what I needed. I am very limited on my javascript knowledge. I need a video player that functions almost exactly like the one in this example: http://www.popcap.com/games/bookworm...L_1_8_19_08_en {the links that toggle between the video and flash slideshow depending on which is clicked. The player showing the videos and screenshots for the game}. I tried looking at the source to understand the functions, but my code is not working. I know the player is calling some javascript, but I'm not sure I understand it all. Can someone explain to me the basic functioning of this player as shown? I would very much appreciate it. I am very new to Javascript - as in this is the first day I'm using it. I am using a code I got offline to fade three pictures together, but when it gets to the last image, it loops back to the first. How do I code it so that when it gets to the last image, it stops? Here is the code - sorry if its messy. Javascript: /***** Image Cross Fade Redux Version 1.0 Last revision: 02.15.2006 steve@slayeroffice.com Please leave this notice intact. Rewrite of old code found he http://slayeroffice.com/code/imageCrossFade/index.html *****/ window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so _init); var d=document, imgs = new Array(), zInterval = null, current=0, pause=false; function so_init() { if(!d.getElementById || !d.createElement)return; // DON'T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT! // http://slayeroffice.com/code/imageCrossFade/xfade2.css css = d.createElement("link"); css.setAttribute("href","xfade2.css"); css.setAttribute("rel","stylesheet"); css.setAttribute("type","text/css"); d.getElementsByTagName("head")[0].appendChild(css); imgs = d.getElementById("imageContainer").getElementsByTagName("img"); for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0; imgs[0].style.display = "block"; imgs[0].xOpacity = .99; setTimeout(so_xfade,3000); } function so_xfade() { cOpacity = imgs[current].xOpacity; nIndex = imgs[current+1]?current+1:0; nOpacity = imgs[nIndex].xOpacity; cOpacity-=.05; nOpacity+=.05; imgs[nIndex].style.display = "block"; imgs[current].xOpacity = cOpacity; imgs[nIndex].xOpacity = nOpacity; setOpacity(imgs[current]); setOpacity(imgs[nIndex]); if(cOpacity<=0) { imgs[current].style.display = "none"; current = nIndex; setTimeout(so_xfade,3000); } else { setTimeout(so_xfade,50); } function setOpacity(obj) { if(obj.xOpacity>.99) { obj.xOpacity = .99; return; } obj.style.opacity = obj.xOpacity; obj.style.MozOpacity = obj.xOpacity; obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")"; } } 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" xml:lang="en"> <head> <div class="container"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="imagetoolbar" content="false" /> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="slideshow.js"></script> <title>Diamonds in the Rough</title> </head> <body> <div id="container"> <img src="images/top2.jpg" usemap="#Map2"/> <map name="Map2" id="Map2"> <area shape="rect" coords="69,56,145,84" href="invite.html" rel="nofollow" target="_self" alt="The Gala" /> <area shape="rect" coords="171,53,356,87" href="diamonds.html" rel="nofollow" target="_self" alt="Diamonds in the Rough" /> <area shape="rect" coords="377,52,498,87" href="mariama.html" rel="nofollow" target="_self" alt="Speaker Mariama Elliot" /> <area shape="rect" coords="525,52,636,86" href="contact.html" rel="nofollow" target="_self" alt="Get Involved" /> </map> <div id="imageContainer"> <img src="images/index.jpg"/> <img src="images/index2.jpg"/> <img src="images/invite.jpg"/> </div> <div id="container2"> <img src="images/BOTTOM.jpg"/> </div> </body> </html> Thanks for your help! Thanks to Old Pedant , in this forum, I am using this basic code for a slideshow he posted: Code: var slides = [
[ "abc.jpg", 3000 ],
[ "xyz.png", 5000 ],
[ "foo.gif", 1500 ]
];
var curSlide = 0;
function nextSlide( )
{
document.getElementById("thePicture").src = slides[curSlide][0].src;
setTimeout( nextSlide, slides[curSlide][1] );
curSlide = ( curSlide + 1 ) % slides.length;
}
function setUp( )
{
for ( var s = 0; s < slides.length; ++s )
{
var image = new Image();
image.src = slides[s];
slides[s] = image;
}
nextSlide( );
}
window.onload = setUp;
which works just fine. But I can't find a way for it to play one round of the slides then stop. Could someone please help me with the right bit of code to stop the show? I know the code is a bit basic (no fades etc) but I have been unable to find a similar slideshow product that gives variable time delays for each slide. I've googled endlessly but nothing could i find.... TIA Richard ========= See slideshow at URL: http://backstageweb.net/1012Locust/ I want these slides to advance manually (on click only), not advance automatically. There are only two sample slides here. Click the play button to advance to Slide 2 (end of show). On Slide 2, it does not advance automatically. However, click the play button again (back to Slide 1, beginning of show). At this point, it automatically advances to Slide 2. Can someone please tell me how to get the slides to advance OnClick only? Thanks, John Hi, I was wondering if there is anyone who could help me! I'm creating a Javascript slideshow, I have 'back' & 'next' functions which work. However, I'm not sure how to create a 'start' and 'stop' function (have to be separate functions), here is my current code below? IS there a genius out there who can help?! ------------------------------------------- <div id="slideshow"> <div class="mainimage"> <img height="300px" src="images/homemainimage.jpg" width="300px" height="300px" name="photoslider"/> <script language="JavaScript1.1"> var photos=new Array() var which=0 photos[0]="images/css3.svg" photos[1]="images/cloudcomputing.png" photos[2]="images/Rss.jpg" photos[3]="images/html5.png" photos[4]="images/jQuery.png" photos[5]="images/firewall.png" function swapImage(){ if (which<photos.length-1){ which++ document.images.photoslider.src=photos[which] } setTimeout("swapImage()",10000); } window.onload=swapImage; function backward(){ if (which>0){ window.status='' which-- document.images.photoslider.src=photos[which] } } function forward(){ if (which<photos.length-1){ which++ document.images.photoslider.src=photos[which] } } </script> <input type="button" value="<<Back" name="B2" onClick="backward()"> <input type="button" value="Next>>" name="B1" onClick="forward()"><br> --------------------------------------------------------- Thanks in advance!! Reply With Quote 01-20-2015, 09:56 PM #2 felgall View Profile View Forum Posts Visit Homepage Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts It would be easier if you used setInterval rather than setTimeout as then you just need to use clearInterval to stop and setInterval to restart. Note also that both setTimeout and setInterval expect a function as their first parameter and not a string (except for IE3) and so the way you have it coded it has to eval() the string to convert it to a function. Also the language attribute on the script tag was replaced by a type attribute about 15 years ago. Also most browsers don't allow JavaScript to access window.status any more for security reasons. Please help, I have a page with 3 images. I want my visitors to hear an mp3 audio once they hover their mouse on each image. image1 = audio1.mp3 image2 = audio2.mp3 image3 = audio3.mp3 But here are the challenges. 1- I want the audio files to play on the same page where the images are, without opening a new page. 2- I don't want the users to be asked to accept any kind of plugins (such as Windows Media Player). Which means everything needed to run the script should already exist on that page. 3- I want it to be played on the 3 major browsers (IE, Firefox, Chrome) Is this possible? I'm not good at Javascript, but I will understand to do my best to understand your instructions. I spent a long time looking online, but most of what I found is only compatible in one browser or the other. Any help would be appreciated. Hello Friends, I have an <img> Tab to play a video(of type .wmv). The image tag is as follows: <img border="0" dynsrc="Test1.wmv" start="fileopen" loop="1" width=1081 height=838> Everything works fine, but now I need to play a video list (up to 5 videos). As soon as one video stops another video should start playing (at the same position automatically, without any user input) and as soon as the last video is stopped, it should start the first video again. So it will be like a loop. How can I achieve the above requirement? Thanks. Hi, I'm having a problem with 2 scripts in the same page. One's a rollover function and the other is for a dynamic image gallery. Either one separately works fine, but when together, the rollover is preventing the gallery from functioning. My javascript skills are limited. Any help is appreciated. Page can be seen he test site Code for page: Code: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Script-Content-Type" content="text/javascript" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
font-family: Arial, sans-serif;
background: url(images/bg.gif) #FFF;
}
* {
margin: 0;
padding: 0;
}
#wrapper {
width:950px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px;
background:#fff;
border-left:1px solid #036;
border-right:1px solid #036;
}
#footer, #push {
clear:both;
width:950px;
height: 30px;
margin:0 auto;
background:#036;
font-size:11px;
text-align:center;
color:#FFF;
}
#push {
background:none;
}
/* Navigation */
#nav ul, #nav li {
display:inline;
list-style-type:none;
}
#nav li {
height:55px;
width:119px;
background:url(button.jpg);
display:block;
}
#nav a {
height:32px;
width:119px;
display:block;
text-decoration:none;
background:url(button.jpg);
}
#nav a:hover {
background:url(button.jpg);
background-position:0px 55px;
}
#nav span {
display:block;
padding-top:10px;
color:#000;
font-weight:bold;
text-align:center;
}
/* Picture Gallery */
#right {
width:400px;
height:100%;
position: absolute;
top: 0px;
left:500px;
}
#filler {
background:url(fish9.jpg) top center no-repeat;
border-bottom:1px solid #333;
display:inline;
width:400px;
height:300px;
text-align:center;
position: absolute;
top:0;
left:0;
}
#thumbs {
width:400px;
position: absolute;
top: 330px;
left:0;
}
#thumbs ul {
display:inline;
list-style-type:none;
}
#thumbs ul li {
width:92px;
height:69px;
float:left;
display:inline;
padding-left:6px;
padding-bottom:6px;
}
#thumbs ul li a {
text-decoration:none;
}
#thumbs a img {
border: none;
}
#thumbs ul li.extrapixels {
padding-left:7px;
}
#message {
width:400px;
float:left;
height:70px;
text-align:center;
position: absolute;
top: 300px;
left:0;
color:#333;
}
#bigDynPic {
width:400px;
height:300px;
text-align:center;
position: absolute;
top: 0px;
left:0;
}
#bigDynPic img {
border-bottom:1px solid #333;
display:block;
}
#bigDynPic p {
font-family:Verdana, Sans-serif;
font-weight:bold;
font-size:80%;
background:#fff;
color:#333;
margin:0;
padding:2px 2px;
}
</style>
<script type="text/javascript">
<!--
function dyngallery()
{
var picId='bigDynPic';
var loadingId='loadingmessage';
var d=document.getElementById('thumbs');
if(!d){return;}
if(!document.getElementById(loadingId))
{
var lo=document.createElement('div');
d.parentNode.insertBefore(lo,d);
lo.id=loadingId;
lo.style.display='none';
}
var piclinks=d.getElementsByTagName('a');
for(var i=0;i<piclinks.length;i++)
{
piclinks[i].onclick=function()
{
document.getElementById(loadingId).style.display='block';
var oldp=document.getElementById(picId);
if(oldp)
{
oldp.parentNode.removeChild(oldp);
}
var nc=document.createElement('div');
d.parentNode.insertBefore(nc,d);
nc.style.display='none';
nc.id=picId;
var newpic=document.createElement('img');
newpic.src=this.href;
newpic.alt=this.getElementsByTagName('img')[0].alt;
newpic.title='Click to return to images';
newpic.onload=function()
{
document.getElementById(loadingId).style.display='none';
}
newpic.onclick=function()
{
this.parentNode.parentNode.removeChild(this.parentNode);
}
nc.appendChild(newpic);
np=document.createElement('p');
np.appendChild(document.createTextNode(this.getElementsByTagName('img')[0].alt))
nc.appendChild(np);
nc.style.display='block';
return false;
}
}
}
window.onload=function()
{
if(document.getElementById && document.createTextNode)
{
document.body.onmouseover=function()
{
dyngallery();
}
}
}
// -->
</script>
<script type="text/javascript">
<!--
window.onload = initMenu;
function initMenu() {
var e=document.getElementById('nav');
var links=e.getElementsByTagName('A');
for(i=0; i < links.length; i++) {
var thisLink = links[i];
if(thisLink.parentNode.tagName == "LI"){
setActivity(thisLink);
}
}
}
function setActivity(thisLink){
thisLink.onmouseover = mouseOver;
thisLink.onmouseout = mouseOut;
}
function mouseOver() {
this.parentNode.style.background = 'url(button.jpg) 0px 55px';
return this;
}
function mouseOut() {
this.parentNode.style.background = 'url(button.jpg)';
return this;
}
// -->
</script>
</head>
<body>
<div id="wrapper">
<ul id="nav">
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="index.html"><span>Page1</span></a></li>
<li><a href="index.html"><span>Page2</span></a></li>
<li><a href="index.html"><span>Page3</span></a></li>
<li><a href="index.html"><span>Page4</span></a></li>
</ul>
<div id="right">
<div id="filler"> </div>
<div id="message">Click on thumbnail for larger picture</div>
<div id="thumbs">
<ul>
<li class="extrapixels"><a href="fish1.jpg"><img src="tn_fish1.jpg" alt="Sample 1" /></a></li>
<li><a href="fish2.jpg"><img src="tn_fish2.jpg" alt="Sample 2" /></a></li>
<li><a href="fish3.jpg"><img src="tn_fish3.jpg" alt="Sample 3" /></a></li>
<li><a href="fish4.jpg"><img src="tn_fish4.jpg" alt="Sample 4" /></a></li>
<li class="extrapixels"><a href="fish5.jpg"><img src="tn_fish5.jpg" alt="Sample 5" /></a></li>
<li><a href="fish6.jpg"><img src="tn_fish6.jpg" alt="Sample 6" /></a></li>
<li><a href="fish7.jpg"><img src="tn_fish7.jpg" alt="Sample 7" /></a></li>
<li><a href="fish8.jpg"><img src="tn_fish8.jpg" alt="Sample 8" /></a></li>
</ul>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<p>© 2009</p>
</div>
</body>
</html>
Scripts would normally be external, I just put them in the page for now for simplicity. Thanks. Hello all; I am doing a site for a local business that uses radio advertising and has a jingle that they want to play once per visit only (so it does not play over again of they return to the same page later that day). I have tried to use yahoo player, Google player and the infamous wma player and all work well. I especially like the yahoo player but as will all the players I could not find a way to have it only play once per day per visitor. Is there a way to accomplish this? I was thinking using a tracking cookie but have no idea how to implement it. In the end I would like to accomplish the following: mp3 plays automatically on page load audio only playes once per day per visitor hava small player so if the visitorr wants to hear the jingle again they can do so. the player should be compact and cross browser compatible. Should be compatible with HTML 5.0 Transitional or at the very least 4.01 Any help would be appreciated. this site plays music when you are there. how do they do it? Just so you know: this is not my idea, the person whose site this is wants a short blip sound played whenever you roll over the links in the sidebar. I know it's not advised, but she insists. So can anybody tell me how this is done? I've tried implementing a few scripts but no luck in Firefox or Chrome. Thanks. Which is the best way to play sound using javascript in a controlled manner ? I need a solution which work across all browsers. This is for my bingo game page which is fully based on ajax. Thanks . I have about 40 images on an educational website. When the user clicks each image, a different one second long mp3 should play without opening a new window. Is it possible to do this with javascript? Thanks in advance. I have an HTML document with an <embed> tag in order to play a video. <code> <embed src="someMovie.mpeg" autostart="false"</embed> </code> I want to be able to click on an image that is also in the document, and play the video that is associated with that image with an onclick action. In other words I want to load a different video than "someMovie.mpeg". I tried simply setting the src and autostart attributes of the embed tag to the new movie and true, but this does not play the new video. Is there a way I can do this? Hi I'm looking for solutions to play a movie file (it can be any format) on a keyboard press. I have this 'textsizer' code so far which I have adapted to work with swapimage but wondered if it would be possible to adapt this to play a movie too. function textsizer(e){ var evtobj=window.event? event : e //distinguish between IE's explicit event object (window.event) and Firefox's implicit. var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode var actualkey=String.fromCharCode(unicode) if (actualkey=="a") MM_swapImage('Image1','','marta3.jpg',1) if (actualkey=="z") MM_swapImgRestore('Image1','','marta.jpg',1) } document.onkeypress=textsizer Hope someone can help Thanks I have a self project I am exploring. I would like to play a simple sound file each time a function is run. The function runs every second, so, basically, I am just trying to get an audible click sound file to run every time the function runs. I do not know how to play a sound file thru javascript. Any ideas? Here is the code file thus far... Code: <html>
<head>
<title>Timer</title>
<link href="timer.css" rel="stylesheet" type="text/css" />
<embed src="click.wav" autostart=false hidden=true name="sound1" enablejavascript="true">
<script type="text/javascript">
var seconds = 0;
var clockId;
var running = false;
function runClock() {
seconds++;
document.timer.timerClock.value = seconds;
}
function startClock() {
if (!running) {
clockId = setInterval('runClock()',1000);
running = true;
}
}
function stopClock() {
if (running) {
clearInterval(clockId);
running = false;
}
}
function resetClock() {
document.timer.timerClock.value = 0;
seconds = 0;
}
</script>
</head>
<body>
<form id="timer" name="timer" action="">
<div id="header">
<p>
<span>Timer<br />
</p>
</div>
<div id="intro">
<p>Click to begin timer</p>
<p id="buttons">
<input onclick="startClock()" type="button" value="Begin Seconds Counter" />
<br />
<input name="timerClock" id="timerClock" value="0" />
<br />
<input onclick="stopClock()" type="button" value="Stop Timer" />
<br />
<input onclick="resetClock()" type="button" value="Reset Timer" />
</p>
</div>
</form>
</body>
</html>
I can't seem to play MP3s with jPlayer, only OGG. Any ideas? My custom code is below: Code: <script type="text/javascript">
//<![CDATA[
var audioPlaylist;
var Playlist;
jQuery(document).ready(function(){
Playlist = function(instance, playlist, options) {
var self = this;
this.instance = instance; // String: To associate specific HTML with this playlist
this.playlist = playlist; // Array of Objects: The playlist
this.options = options; // Object: The jPlayer constructor options for this playlist
this.current = 0;
this.cssId = {
jPlayer: "jquery_jplayer_",
interface: "jp_interface_",
playlist: "jp_playlist_"
};
this.cssSelector = {};
jQuery.each(this.cssId, function(entity, id) {
self.cssSelector[entity] = "#" + id + self.instance;
});
if(!this.options.cssSelectorAncestor) {
this.options.cssSelectorAncestor = this.cssSelector.interface;
}
jQuery(this.cssSelector.jPlayer).jPlayer(this.options);
jQuery(this.cssSelector.interface + " .jp-previous").click(function() {
self.playlistPrev();
jQuery(this).blur();
return false;
});
jQuery(this.cssSelector.interface + " .jp-next").click(function() {
self.playlistNext();
jQuery(this).blur();
return false;
});
};
Playlist.prototype = {
displayPlaylist: function() {
var self = this;
jQuery(this.cssSelector.playlist + " ul").empty();
for (i=0; i < this.playlist.length; i++) {
var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";
// Create links to free media
if(this.playlist[i].free) {
var first = true;
listItem += "<div class='jp-free-media'>(";
jQuery.each(this.playlist[i], function(property,value) {
if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
if(first) {
first = false;
} else {
listItem += " | ";
}
listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
}
});
listItem += ")</span>";
}
listItem += "</li>";
// Associate playlist items with their media
jQuery(this.cssSelector.playlist + " ul").append(listItem);
jQuery(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
var index = jQuery(this).data("index");
if(self.current !== index) {
self.playlistChange(index);
} else {
jQuery(self.cssSelector.jPlayer).jPlayer("play");
}
$(this).blur();
return false;
});
// Disable free media links to force access via right click
if(this.playlist[i].free) {
jQuery.each(this.playlist[i], function(property,value) {
if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
jQuery(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
var index = $(this).data("index");
jQuery(self.cssSelector.playlist + "_item_" + index).click();
jQuery(this).blur();
return false;
});
}
});
}
}
},
playlistInit: function(autoplay) {
if(autoplay) {
this.playlistChange(this.current);
} else {
this.playlistConfig(this.current);
}
},
playlistConfig: function(index) {
jQuery(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
jQuery(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
this.current = index;
jQuery(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
},
playlistChange: function(index) {
this.playlistConfig(index);
jQuery(this.cssSelector.jPlayer).jPlayer("play");
},
playlistNext: function() {
var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
this.playlistChange(index);
},
playlistPrev: function() {
var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
this.playlistChange(index);
},
supplied: "mp3",
addMedia: function(media){
this.playlist.push(media);
this.playlistNext();
}
};
});
var last_el='';
jQuery('.track .wrap .play').click(function(){
var cur_img = jQuery(this).css('backgroundImage');
if(cur_img.substring(cur_img.length-10)=='play.png")'){
if(last_el!=''){
last_el.css('background-image','url("img/play.png")');
}
var el = jQuery(this);
last_el = el;
parent.frames[1].addSong(el.attr("title"),el.attr("mp3"),el.attr("ogg"));
el.css('background-image','url("img/pause.png")');
}else{
parent.frames[1].pauseSong();
}
});
jQuery('.jp-interface .jp-pause').click(function(){
last_el.css('background-image','url("img/play.png")');
});
jQuery('body a').click(function(){
var el = jQuery(this);
var href = el.attr('href');
if(href.substring(0,1)=='/'){
parent.location.href = parent.location.href + href.substring(1,href.length);
}
});
//]]>
</script>
I can't seem to play MP3s with jPlayer, only OGG. Any ideas? My custom code is below: Code: <script type="text/javascript">
//<![CDATA[
var audioPlaylist;
var Playlist;
jQuery(document).ready(function(){
Playlist = function(instance, playlist, options) {
var self = this;
this.instance = instance; // String: To associate specific HTML with this playlist
this.playlist = playlist; // Array of Objects: The playlist
this.options = options; // Object: The jPlayer constructor options for this playlist
this.current = 0;
this.cssId = {
jPlayer: "jquery_jplayer_",
interface: "jp_interface_",
playlist: "jp_playlist_"
};
this.cssSelector = {};
jQuery.each(this.cssId, function(entity, id) {
self.cssSelector[entity] = "#" + id + self.instance;
});
if(!this.options.cssSelectorAncestor) {
this.options.cssSelectorAncestor = this.cssSelector.interface;
}
jQuery(this.cssSelector.jPlayer).jPlayer(this.options);
jQuery(this.cssSelector.interface + " .jp-previous").click(function() {
self.playlistPrev();
jQuery(this).blur();
return false;
});
jQuery(this.cssSelector.interface + " .jp-next").click(function() {
self.playlistNext();
jQuery(this).blur();
return false;
});
};
Playlist.prototype = {
displayPlaylist: function() {
var self = this;
jQuery(this.cssSelector.playlist + " ul").empty();
for (i=0; i < this.playlist.length; i++) {
var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";
// Create links to free media
if(this.playlist[i].free) {
var first = true;
listItem += "<div class='jp-free-media'>(";
jQuery.each(this.playlist[i], function(property,value) {
if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
if(first) {
first = false;
} else {
listItem += " | ";
}
listItem += "<a id='" + self.cssId.playlist + self.instance + "_item_" + i + "_" + property + "' href='" + value + "' tabindex='1'>" + property + "</a>";
}
});
listItem += ")</span>";
}
listItem += "</li>";
// Associate playlist items with their media
jQuery(this.cssSelector.playlist + " ul").append(listItem);
jQuery(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
var index = jQuery(this).data("index");
if(self.current !== index) {
self.playlistChange(index);
} else {
jQuery(self.cssSelector.jPlayer).jPlayer("play");
}
$(this).blur();
return false;
});
// Disable free media links to force access via right click
if(this.playlist[i].free) {
jQuery.each(this.playlist[i], function(property,value) {
if(jQuery.jPlayer.prototype.format[property]) { // Check property is a media format.
jQuery(self.cssSelector.playlist + "_item_" + i + "_" + property).data("index", i).click(function() {
var index = $(this).data("index");
jQuery(self.cssSelector.playlist + "_item_" + index).click();
jQuery(this).blur();
return false;
});
}
});
}
}
},
playlistInit: function(autoplay) {
if(autoplay) {
this.playlistChange(this.current);
} else {
this.playlistConfig(this.current);
}
},
playlistConfig: function(index) {
jQuery(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
jQuery(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
this.current = index;
jQuery(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
},
playlistChange: function(index) {
this.playlistConfig(index);
jQuery(this.cssSelector.jPlayer).jPlayer("play");
},
playlistNext: function() {
var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
this.playlistChange(index);
},
playlistPrev: function() {
var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
this.playlistChange(index);
},
supplied: "mp3",
addMedia: function(media){
this.playlist.push(media);
this.playlistNext();
}
};
});
var last_el='';
jQuery('.track .wrap .play').click(function(){
var cur_img = jQuery(this).css('backgroundImage');
if(cur_img.substring(cur_img.length-10)=='play.png")'){
if(last_el!=''){
last_el.css('background-image','url("img/play.png")');
}
var el = jQuery(this);
last_el = el;
parent.frames[1].addSong(el.attr("title"),el.attr("mp3"),el.attr("ogg"));
el.css('background-image','url("img/pause.png")');
}else{
parent.frames[1].pauseSong();
}
});
jQuery('.jp-interface .jp-pause').click(function(){
last_el.css('background-image','url("img/play.png")');
});
jQuery('body a').click(function(){
var el = jQuery(this);
var href = el.attr('href');
if(href.substring(0,1)=='/'){
parent.location.href = parent.location.href + href.substring(1,href.length);
}
});
//]]>
</script>
hey there, i am making a slideshow site, a user can add effects to pictures using a drop down menu and choose a sound to accompany picture when the slideshow runs. i have hit a snag, my function is taking in the choice from the user for both sounds, but playing them over one another, i think its something silly im missing out. here is the function where i think im going wrong: Code: function EvalSound()
{
var sound1 = document.getElementById("sound1");
var choice = sound1.options[sound1.selectedIndex].value;
var sound2 = document.getElementById("sound2");
var choice2 = sound2.options[sound2.selectedIndex].value;
var pic1 = document.getElementById("first_pic");
var pic2 = document.getElementById("second_pic");
soundManager.play(choice);
soundManager.play(choice2);
}
Thanks for any help I have created a webpage using wordpress for a customer, he wants an embedded video to be played every time a visitor comes to the websites. i did it in the beginning with you tube and it was easy but he is hosting his videos in a lame company and no matter what i try, i am not able to make the video play on load, guys can you please help me with this. here is an example of embed code from that website <object id="player" width="550" height="380" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" ><param name="movie" value="http://www.videozer.com/embed/RLyPu" ></param><param name="allowFullScreen" value="true" ></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.videozer.com/embed/RLyPu" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="550" height="380"></embed></object> |
|||||||