|
JavaScript - Help Implementing Nivo Slideshow
Hi All,
Hoping somebody can help me with my implementation of the Nivo Slideshow on my website... I've been at it for a couple of days now and I'm just about ready to give up ( Here's my markup: Code: <div id="slider">
<img src="/images/Slide1.png" alt="" title="Dead Kool"/>
<a href="http://dev7studios.com"><img src="/images/Slide2.png" alt="" title="Alex Kidd" /></a>
<img src="/images/Slide3.png" alt="" title="Asteroids" />
</div>
My CSS: Code: #slider {
position:relative;
width:620px;
height:350px;
background-image:url(../images/title.gif);
background-position:-10px 30px;
background-repeat:no-repeat;
background-attachment:fixed;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
font-family:"Lucida Sans Unicode", "Lucida Grande";
}
.nivo-caption a {
color:#f71cac;
text-decoration:underline;
}
Slider CSS: Code: /*
* jQuery Nivo Slider v2.3
* http://nivo.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
The test site is here http://www.koolkiddclothing.com/Test I feel like I'm being dumb, but for some reason I just can't get it to work, so any help is good help... Similar TutorialsOkay, so I'm a noob when it comes to JavaScript. I can write the most basic codes but even then it really doesn't make sense. On my website I am trying to implement a JavaScript slideshow from this website: http://nivo.dev7studios.com/ I do everything as it says, but the images don't even show up. Here is a link to my website where the problem is, you can view the source to see my xhtml code (please note my site isn't even close to being done.): http://thegraphicfaction.host56.com/ The slideshow should be showing up in a right next to where it says "Design is our Passion." Here is the code for the slideshow which the site I got the script said to do: Code: <div id="slider"> <img src="Assets/slideshow_assets/stereosound.jpg" alt="" title="Business Card design for StereoSound." /> <img src="Assets/slideshow_assets/triflex.jpg" alt="" title="Logo design for TriFlex Labs." /> </div> Here are both of the CSS files that the slideshow uses: nivo-slider.css: Code: /*
* jQuery Nivo Slider v2.0
* http://nivo.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-controlNav {
position:absolute;
left:47%;
bottom:-30px;
}
.nivo-controlNav a {
display:block;
width:10px;
height:10px;
background:url(bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:-10px 0;
}
.nivo-directionNav a {
display:block;
width:32px;
height:34px;
background:url(arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-32px 0;
right:10px;
}
a.nivo-prevNav {
left:10px;
}
custom-nivo-slider.css Code: /*
* Note: Include the nivo-slider.css file that comes
* with the main download before including this file.
*/
#slider {
position:relative;
margin:30px 30px 60px 30px;
background:#202834 url(loading.gif) no-repeat 50% 50%;
-moz-box-shadow:0px 0px 10px #333;
-webkit-box-shadow:0px 0px 10px #333;
box-shadow:0px 0px 10px #333;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
}
.nivo-controlNav {
position:absolute;
left:47%;
bottom:-30px;
}
.nivo-controlNav a {
display:block;
width:10px;
height:10px;
background:url(bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:-10px 0;
}
.nivo-directionNav a {
display:block;
width:32px;
height:34px;
background:url(arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-32px 0;
right:10px;
}
a.nivo-prevNav {
left:10px;
}
my page's xhtml: 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"><!-- InstanceBegin template="/Templates/template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>The Graphic Faction - Home</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" href="css/nivo-slider.css" />
<link rel="stylesheet" href="css/custom-nivo-slider.css" />
<!-- InstanceEndEditable -->
<link rel="shortcut icon" href="Assets/favico_16x16.ico" />
<link rel="stylesheet" href="css/main_css.css" />
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body style="margin: 0; padding: 0; background-color: #c4c4c4;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="background-color: #373737; height: 20px;">
</td>
</tr>
<tr>
<td style="background-color:#606060; height:1px;">
</td>
</tr>
<tr>
<td style="background-color: #181818; height: 175px;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr style="height:175px;">
<td style="width:25px">
</td>
<td align="center" style="width: 200px;">
<a href="index.html">
<img src="Assets/GF_main_logo.png" width="164" height="139" alt="GF" style="border: none;" />
</a>
</td>
<td>
<table cellpadding="0" cellspacing="20" style="float:right">
<tr>
<!-- InstanceBeginEditable name="menu_links" -->
<td style="height:35px; width:75px; text-align:center; background-image:url(Assets/menu_bg_small.png); background-repeat:no-repeat;cursor:pointer;cursor:hand" onclick="document.location.href='index.html';"><a href="index.html" style="color:#CCC; font-family:Arial, Helvetica, sans-serif; font-size:20px; text-decoration:none">Home</a></td>
<td style="height:35px; width:75px; text-align:center; background-repeat:no-repeat;cursor:pointer;cursor:hand" onmouseover="this.style.background='url(Assets/menu_bg_small.png)'" onmouseout="this.style.background='none'" onclick="document.location.href='about.html';"><a href="about.html" style="color:#CCC; font-family:Arial, Helvetica, sans-serif; font-size:20px; text-decoration:none">About</a></td>
<td style="height:35px; width:87px; text-align:center; background-repeat:no-repeat;cursor:pointer;cursor:hand" onmouseover="this.style.background='url(Assets/menu_bg_large.png)'" onmouseout="this.style.background='none'" onclick="document.location.href='services.html';"><a href="services.html" style="color:#CCC; font-family:Arial, Helvetica, sans-serif; font-size:20px; text-decoration:none">Services</a></td>
<td style="height:35px; width:87px; text-align:center; background-repeat:no-repeat;cursor:pointer;cursor:hand" onmouseover="this.style.background='url(Assets/menu_bg_large.png)'" onmouseout="this.style.background='none'" onclick="document.location.href='portfolio.html';"><a href="portfolio.html" style="color:#CCC; font-family:Arial, Helvetica, sans-serif; font-size:20px; text-decoration:none">Portfolio</a></td>
<td style="height:35px; width:87px; text-align:center; background-repeat:no-repeat;cursor:pointer;cursor:hand" onmouseover="this.style.background='url(Assets/menu_bg_large.png)'" onmouseout="this.style.background='none'" onclick="document.location.href='contact.html';"><a href="index.html" style="color:#CCC; font-family:Arial, Helvetica, sans-serif; font-size:20px; text-decoration:none">Contact</a></td>
<td style="width:100px"></td>
<!-- InstanceEndEditable -->
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- InstanceBeginEditable name="header" -->
<tr>
<td style="background-color: #be1c1c; height:1px;">
</td>
</tr>
<tr>
<td style="background-color: #921a1c; height:7px;">
</td>
</tr>
<tr>
<td style="background-color: #6b1a1c; height:1px;">
</td>
</tr>
<tr>
<td style="background-image:url(Assets/header_gradient.png); height: 300px; background-repeat:repeat-x; vertical-align:top">
<table>
<tr>
<td>
<table width="470px" cellpadding="0" cellspacing="0" style="text-align:left;">
<tr>
<td style="width:20px">
</td>
<td style="width:450px;">
<img src="Assets/index_header_dpcl.png" alt="Design is our Passion, Creativity is our Life." height="112" width="448" style="vertical-align:top; text-align:center" />
</td>
</tr>
<tr>
<td>
</td>
<td style="width:450px;">
<p style="text-align:justify; color: #340000;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet interdum rutrum. Ut pellentesque, justo in egestas rhoncus, diam magna semper odio, eu iaculis lacus ipsum cursus odio. Aenean sed lorem velit. Ut felis sapien, fringilla sed fermentum et, placerat non elit. Nam ante est, accumsan elementum viverra tincidunt, sodales ac metus. Suspendisse sed turpis felis. Suspendisse porta. <a href="#">Read More...</a>
</p>
</td>
</tr>
</table>
</td>
<td>
<table width="100%">
<tr>
<td style="width:50px">
</td>
<td valign="top" style="width:112px">
<img src="Assets/vertical_divider.png" alt="vertical divider" height="250" width="112" style="vertical-align:top; text-align:left;" />
</td>
<td>
<div id="slider">
<img src="Assets/slideshow_assets/stereosound.jpg" alt="" title="Business Card design for StereoSound." />
<img src="Assets/slideshow_assets/triflex.jpg" alt="" title="Logo design for TriFlex Labs." />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color: #990000; height:1px;">
</td>
</tr>
<!-- InstanceEndEditable -->
<tr>
<td style="background-image:url(Assets/shadow.png); background-repeat:repeat-x; vertical-align:top;">
</td>
</tr>
</table>
<!-- InstanceBeginEditable name="Body1" -->
<p>BODY</p>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>
and finally the javascript for the nivo slider (jquery.nivo.slider.pack.js): Code: /*
* jQuery Nivo Slider v2.0
* http://nivo.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* May 2010 - Pick random effect from specified set of effects by toronegro
* May 2010 - controlNavThumbsFromRel option added by nerd-sh
* May 2010 - Do not start nivoRun timer if there is only 1 slide by msielski
* April 2010 - controlNavThumbs option added by Jamie Thompson (http://jamiethompson.co.uk)
* March 2010 - manualAdvance option added by HelloPablo (http://hellopablo.co.uk)
*/
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(9($){$.1f.1q=9(1X){b 3=$.2i({},$.1f.1q.2c,1X);I g.E(9(){b 4={f:0,t:\'\',U:0,o:\'\',N:m,1k:m,1N:m};b 5=$(g);5.1S(\'7:4\',4);5.e(\'2h\',\'2g\');5.1n(\'1q\');b d=5.2j();d.E(9(){b j=$(g);b 1p=\'\';6(!j.K(\'B\')){6(j.K(\'a\')){j.1n(\'7-2k\');1p=j}j=j.1g(\'B:1s\')}b 1c=j.w();6(1c==0)1c=j.s(\'w\');b 1d=j.x();6(1d==0)1d=j.s(\'x\');6(1c>5.w()){5.w(1c)}6(1d>5.x()){5.x(1d)}6(1p!=\'\'){1p.e(\'P\',\'1h\')}j.e(\'P\',\'1h\');4.U++});6(3.1a>0){6(3.1a>=4.U)3.1a=4.U-1;4.f=3.1a}6($(d[4.f]).K(\'B\')){4.t=$(d[4.f])}n{4.t=$(d[4.f]).1g(\'B:1s\')}6($(d[4.f]).K(\'a\')){$(d[4.f]).e(\'P\',\'1w\')}5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\');2b(b i=0;i<3.h;i++){b G=X.27(5.w()/3.h);6(i==3.h-1){5.J($(\'<C z="7-c"></C>\').e({21:(G*i)+\'13\',w:(5.w()-(G*i))+\'13\'}))}n{5.J($(\'<C z="7-c"></C>\').e({21:(G*i)+\'13\',w:G+\'13\'}))}}5.J($(\'<C z="7-H"><p></p></C>\').e({P:\'1h\',y:3.1Y}));6(4.t.s(\'16\')!=\'\'){$(\'.7-H p\',5).1y(4.t.s(\'16\'));$(\'.7-H\',5).1x(3.q)}b l=0;6(!3.1i&&d.1j>1){l=1v(9(){F(5,d,3,m)},3.1m)}6(3.T){5.J(\'<C z="7-T"><a z="7-2a">2f</a><a z="7-29">2m</a></C>\');6(3.2d){$(\'.7-T\',5).24();5.25(9(){$(\'.7-T\',5).2l()},9(){$(\'.7-T\',5).24()})}$(\'a.7-2a\',5).1J(\'1I\',9(){6(4.N)I m;S(l);l=\'\';4.f-=2;F(5,d,3,\'1C\')});$(\'a.7-29\',5).1J(\'1I\',9(){6(4.N)I m;S(l);l=\'\';F(5,d,3,\'1A\')})}6(3.M){b 1b=$(\'<C z="7-M"></C>\');5.J(1b);2b(b i=0;i<d.1j;i++){6(3.20){b j=d.1B(i);6(!j.K(\'B\')){j=j.1g(\'B:1s\')}6(3.1Q){1b.J(\'<a z="7-1l" 11="\'+i+\'"><B D="\'+j.s(\'11\')+\'" 28="" /></a>\')}n{1b.J(\'<a z="7-1l" 11="\'+i+\'"><B D="\'+j.s(\'D\').2n(3.1R,3.1P)+\'" 28="" /></a>\')}}n{1b.J(\'<a z="7-1l" 11="\'+i+\'">\'+i+\'</a>\')}}$(\'.7-M a:1B(\'+4.f+\')\',5).1n(\'1o\');$(\'.7-M a\',5).1J(\'1I\',9(){6(4.N)I m;6($(g).2e(\'1o\'))I m;S(l);l=\'\';5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\');4.f=$(g).s(\'11\')-1;F(5,d,3,\'1l\')})}6(3.1M){$(2q).2A(9(1L){6(1L.1Z==\'2C\'){6(4.N)I m;S(l);l=\'\';4.f-=2;F(5,d,3,\'1C\')}6(1L.1Z==\'2D\'){6(4.N)I m;S(l);l=\'\';F(5,d,3,\'1A\')}})}6(3.1T){5.25(9(){4.1k=Q;S(l);l=\'\'},9(){4.1k=m;6(l==\'\'&&!3.1i){l=1v(9(){F(5,d,3,m)},3.1m)}})}5.2E(\'7:Z\',9(){4.N=m;$(d).E(9(){6($(g).K(\'a\')){$(g).e(\'P\',\'1h\')}});6($(d[4.f]).K(\'a\')){$(d[4.f]).e(\'P\',\'1w\')}6(l==\'\'&&!4.1k&&!3.1i){l=1v(9(){F(5,d,3,m)},3.1m)}3.1U.1z(g)})});9 F(5,d,3,19){b 4=5.1S(\'7:4\');6((!4||4.1N)&&!19)I m;3.1W.1z(g);6(!19){5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\')}n{6(19==\'1C\'){5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\')}6(19==\'1A\'){5.e(\'W\',\'V(\'+4.t.s(\'D\')+\') R-Y\')}}4.f++;6(4.f==4.U){4.f=0;3.1V.1z(g)}6(4.f<0)4.f=(4.U-1);6($(d[4.f]).K(\'B\')){4.t=$(d[4.f])}n{4.t=$(d[4.f]).1g(\'B:1s\')}6(3.M){$(\'.7-M a\',5).2F(\'1o\');$(\'.7-M a:1B(\'+4.f+\')\',5).1n(\'1o\')}6(4.t.s(\'16\')!=\'\'){6($(\'.7-H\',5).e(\'P\')==\'1w\'){$(\'.7-H p\',5).22(3.q,9(){$(g).1y(4.t.s(\'16\'));$(g).1x(3.q)})}n{$(\'.7-H p\',5).1y(4.t.s(\'16\'))}$(\'.7-H\',5).1x(3.q)}n{$(\'.7-H\',5).22(3.q)}b i=0;$(\'.7-c\',5).E(9(){b G=X.27(5.w()/3.h);$(g).e({x:\'O\',y:\'0\',W:\'V(\'+4.t.s(\'D\')+\') R-Y -\'+((G+(i*G))-G)+\'13 0%\'});i++});6(3.k==\'1t\'){b 10=2G 2B("1K","14","1F","17","1E","12","1D","1r");4.o=10[X.26(X.1t()*(10.1j+1))];6(4.o==2y)4.o=\'1r\'}6(3.k.2o(\',\')!=-1){b 10=3.k.2r(\',\');4.o=$.2z(10[X.26(X.1t()*10.1j)])}4.N=Q;6(3.k==\'2p\'||3.k==\'1K\'||4.o==\'1K\'||3.k==\'14\'||4.o==\'14\'){b u=0;b i=0;b h=$(\'.7-c\',5);6(3.k==\'14\'||4.o==\'14\')h=$(\'.7-c\',5).1e();h.E(9(){b c=$(g);c.e(\'1G\',\'O\');6(i==3.h-1){L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q)},(r+u))}u+=1u;i++})}n 6(3.k==\'2t\'||3.k==\'1F\'||4.o==\'1F\'||3.k==\'17\'||4.o==\'17\'){b u=0;b i=0;b h=$(\'.7-c\',5);6(3.k==\'17\'||4.o==\'17\')h=$(\'.7-c\',5).1e();h.E(9(){b c=$(g);c.e(\'23\',\'O\');6(i==3.h-1){L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q)},(r+u))}u+=1u;i++})}n 6(3.k==\'1E\'||3.k==\'2u\'||4.o==\'1E\'||3.k==\'12\'||4.o==\'12\'){b u=0;b i=0;b v=0;b h=$(\'.7-c\',5);6(3.k==\'12\'||4.o==\'12\')h=$(\'.7-c\',5).1e();h.E(9(){b c=$(g);6(i==0){c.e(\'1G\',\'O\');i++}n{c.e(\'23\',\'O\');i=0}6(v==3.h-1){L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({x:\'r%\',y:\'1.0\'},3.q)},(r+u))}u+=1u;v++})}n 6(3.k==\'1D\'||4.o==\'1D\'){b u=0;b i=0;$(\'.7-c\',5).E(9(){b c=$(g);b 1H=c.w();c.e({1G:\'O\',x:\'r%\',w:\'O\'});6(i==3.h-1){L(9(){c.A({w:1H,y:\'1.0\'},3.q,\'\',9(){5.18(\'7:Z\')})},(r+u))}n{L(9(){c.A({w:1H,y:\'1.0\'},3.q)},(r+u))}u+=1u;i++})}n 6(3.k==\'1r\'||4.o==\'1r\'){b i=0;$(\'.7-c\',5).E(9(){$(g).e(\'x\',\'r%\');6(i==3.h-1){$(g).A({y:\'1.0\'},(3.q*2),\'\',9(){5.18(\'7:Z\')})}n{$(g).A({y:\'1.0\'},(3.q*2))}i++})}}};$.1f.1q.2c={k:\'1t\',h:15,q:2x,1m:2w,1a:0,T:Q,2d:Q,M:Q,20:m,1Q:m,1R:\'.1O\',1P:\'2v.1O\',1M:Q,1T:Q,1i:m,1Y:0.8,1W:9(){},1U:9(){},1V:9(){}};$.1f.1e=[].1e})(2s);',62,167,'|||settings|vars|slider|if|nivo||function||var|slice|kids|css|currentSlide|this|slices||child|effect|timer|false|else|randAnim||animSpeed|100|attr|currentImage|timeBuff||width|height|opacity|class|animate|img|div|src|each|nivoRun|sliceWidth|caption|return|append|is|setTimeout|controlNav|running|0px|display|true|no|clearInterval|directionNav|totalSlides|url|background|Math|repeat|animFinished|anims|rel|sliceUpDownLeft|px|sliceDownLeft||title|sliceUpLeft|trigger|nudge|startSlide|nivoControl|childWidth|childHeight|reverse|fn|find|none|manualAdvance|length|paused|control|pauseTime|addClass|active|link|nivoSlider|fade|first|random|50|setInterval|block|fadeIn|html|call|next|eq|prev|fold|sliceUpDown|sliceUpRight|top|origWidth|click|live|sliceDownRight|event|keyboardNav|stop|jpg|controlNavThumbsReplace|controlNavThumbsFromRel|controlNavThumbsSearch|data|pauseOnHover|afterChange|slideshowEnd|beforeChange|options|captionOpacity|keyCode|controlNavThumbs|left|fadeOut|bottom|hide|hover|floor|round|alt|nextNav|prevNav|for|defaults|directionNavHide|hasClass|Prev|relative|position|extend|children|imageLink|show|Next|replace|indexOf|sliceDown|window|split|jQuery|sliceUp|sliceUpDownRight|_thumb|3000|500|undefined|trim|keypress|Array|37|39|bind|removeClass|new'.split('|'),0,{}))
Can anyone please help me figure this out? Any help is appreciated. If you need any more info just ask. Hi Guys, I'm developing a site (thenativedrum.com/charisbel) with the Nivo Slider. It works fine on Chrome and Firefox - but for some reason, when opened in IE7, the images fail to load. I'm sure this is a quick fix. I'm just stumped though! Does anyone know why this is happening? Thanks in advance Hey everyone im using nivo slider and I want to have 5 images instead of the general 4 it uses. However I have added my 5th image as the last on to be display. Once it has shown this image it doesn't loop back to the first image again. It loops to the 2nd one. Has anyone got any idea what I need to change so that it loops to the first slide again? Ive tried adding HTML captions to see if this is what it uses to see how many slides there is, ive tried editing the total slides from 0 to 4 & 5. But still no luck Heres the link to the slider : http://cp2.chunkychips.net/~arcsyste/index.php Thanks everyone Megan Following is my code on Nivo Slider plugin. Code: <script type="text/javascript" language="javascript">
var jQuery = $.noConflict();
jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
effect:'<?php if (($effect) <> "" ) { echo (($effect)); } else { echo 'random'; } ?>', //Specify sets like: 'random,fold,fade,sliceDown'
slices:<?php if (($slices) <> "" ) { echo (($slices)); } else { echo '15'; } ?>,
animSpeed:<?php if (($animspeed) <> "" ) { echo (($animspeed)); } else { echo '700'; } ?>,
pauseTime:<?php if (($pauseTime) <> "" ) { echo (($pauseTime)); } else { echo '3000'; } ?>,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next and Prev
directionNavHide:<?php if (($directionNavHide) <> "" ) { echo stripslashes(($fadin)); } else { echo 'false'; } ?>, //Only show on hover
controlNav:true, //1,2,3...
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: '.jpg', //Replace this with...
controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
keyboardNav:true, //Use left and right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>
What i want to add is now text for each image dynamically. The problem is that everything is yet controlled from wordpress dashboard. So i cant just change and apply any other plugin as a lot effort has already been put into the plugin to apply all the css/js/php changes/implementations. The text would look like any normal jquery slider has: a black or white translucent overlay with text for each image. Any help? I'm using the Nivo slider (http://nivo.dev7studios.com/) for a banner with different thumbnails for the controls. After several hours of wrestling with the CSS, I was able to make it so each thumbnail could have its own style and hover. Now the JS doesn't work - meaning, the banner doesn't slide when I click any of the thumbnails. Can anyone help me out with this? I'm very much a beginner with JS. Here's my HTML: Code: <div id="slider" class="nivoSlider">
<img src="images/banner-1.jpg" alt="" />
<img src="images/banner-2.jpg" alt="" />
<img src="images/banner-3.jpg" alt="" />
<img src="images/banner-2.jpg" alt="" />
<span class="nivo-controlNav">
<a class="nivo-control smerch"> </a>
<a class="nivo-control gervais"> </a>
<a class="nivo-control karl"> </a>
<a class="nivo-control insects"> </a>
</span>
</div>
Here's my CSS: Code: /*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#slider {
position:relative;
width:984px;
height:501px;
background:url(images/loading.gif) no-repeat 50% 50%;}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;}
#slider a {
border:0;
display:block;}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;}
.nivo-controlNav a {
display:block;
width:99px;
height:67px;
border:0;
margin-right:3px;
float:left;}
.nivo-controlNav a.active {
background-position:0 -22px;}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;}
a.nivo-prevNav {
left:15px;}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {clear:both;}
#slider .nivo-controlNav {
position:absolute;
bottom:0; /* Put the nav below the slider */
left: 0;
width: 984px;}
#slider .nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
height: 67px;
width: 99px;
position: relative;}
.nivo-control {
cursor:pointer;}
.nivo-controlNav a {position: absolute; bottom: -122px;}
.smerch {right: 38px; background: url(images/mn-thumb-1.png) top left no-repeat;}
.smerch:hover{background: url(images/mn-thumb-1-over.png) top left no-repeat;}
.gervais {right: 134px; background: url(images/mn-thumb-2.png) top left no-repeat;}
.gervais:hover{background: url(images/mn-thumb-2-over.png) top left no-repeat;}
.karl {right: 238px; background: url(images/mn-thumb-3.png) top left no-repeat;}
.karl:hover{background: url(images/mn-thumb-3-over.png) top left no-repeat;}
.insects {right: 342px; background: url(images/mn-thumb-4.png) top left no-repeat;}
.insects:hover{background: url(images/mn-thumb-4-over.png) top left no-repeat;}
Not sure if this is needed, but here's the section of the JS for the controls: Code: //Add Control nav
if(settings.controlNav){
var nivoControl = $('<div class="nivo-controlNav"></div>');
slider.append(nivoControl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if (settings.controlNavThumbsFromRel) {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>');
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>');
}
} else {
nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
I'm at a loss. Any help would be great. Thanks. Here's a quick visual of the parts of the slider: http://i.imgur.com/tkE2Y.png Hey guys, I am trying to put this code on a test website (below). How do I get it so that when I preview in browser, the javascript activates because at the moment it just shows a blank page. I have tried putting it in the <javascript> / <script> tags but nothing. Any advice appreciated var input = prompt("Insert Number"); for (i=1; i<=input; i++) { if (i % 3 === 0 && i % 5 === 0) { console.log("FizzBuzz"); } else if (i % 3 === 0) { console.log("Fizz"); } else if (i % 5 === 0) { console.log("Buzz"); } else { console.log(i); } Just trying to get a feel working with javascript, HTML and CSS. I'm trying to do what they are saying at this link: http://blogs.sitepoint.com/perfect-pop-up/ First, they tell me to do what is listed under the "Scripting Disabled" section: <a href="file.htm" onclick="window.open('file.htm'); <br> return false;" rel="nofollow" target="newWin"> Then, down in the page in the "The Perfect Pop-Up Script" section it has a large script for me to use. I'm wanting to use it at my page http://www.best-stock-trading-system...ng-system.html I want to make each of my images pop up windows like at this site: http://www.polyvore.com/cgi/shop?query=shoes So, are they telling me to use the html in both sections? Where would I put the html in the top section vs. the script in the lower section? Do I have to make another webpage and just paste the script in there and then call it, like they say below: "To call the function you would use the following code:" <a href="my-pop-up-window.htm" <br> onclick="popUp(this.href,'console',400,200);return false;" <br> rel="nofollow" target="_blank">This is my link</a> I'm a bit confused where I am supposed to inserting the page name for the popup that I want to pop up vs inserting the pagename for the script page that I guess I have to make. So what are the steps that I would take to do all of this?! Thank you for your help! I’ve recently bought a Javascript/xml map of the USA. After payment a zip archive could be downloaded that includes a .html file, a .js file and a css stylesheet. Instructions on how to set it up in wordpress were not included though. Basically it comes down to this: every state of the US is clickable. In the .html file the settings can be configured for each state, such as whether the state is active (clickable) or not, and where it should link to. This part i understand and i know how to configure the .html file. The problem is that i can’t implement it on a wordpress page due to my limited programming skills. I tried uploading the .js file in my wp-content folder, and copying the code from index.html to a new page (note that i didn't use the WYSIWYG editor but the HTML option) but it seems like the Javascript file doesn't load. Any help would be greatly appreciated Screenshot of how the map looks like when i open the .html file in my browser (the map is working, i just can't get it to work in Wordpress) Screenshot of the files included in the zip file Thanks in advance Hi, can someone please help me out with this? I've tried it a few time but couldn't get the image scroller into the infoWindow! I want to sort of MERGE this code Code: <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
#container { text-align: center; }
#imageBox{ margin: auto; width: 360px; border: 1px #000 solid; overflow: hidden; }
#imageBoxInside { width: 10000px; } #imageBox img { float: left; padding: 0px; margin: 0px; }
#imageBox br { clear: both; }
#controls img { border: 0; }
</style>
<script>
function moveToPrevious(){
new Effect.Move('imageBoxInside', { x: 180, y: 0, transition: Effect.Transitions.sinoidal });
}
function moveToNext(){
new Effect.Move('imageBoxInside', { x: -180, y: 0, transition: Effect.Transitions.sinoidal });
}
</script>
</head>
<body>
<div id="container">
<div id="imageBox">
<div id="imageBoxInside">
<img src="C:/Users/L33508/Desktop/Images/sauce.jpg" />
<img src="C:/Users/L33508/Desktop/Images/fish.jpg" />
<img src="C:/Users/L33508/Desktop/Images/pizza.jpg" />
<img src="C:/Users/L33508/Desktop/Images/noodles.jpg" />
<img src="C:/Users/L33508/Desktop/Images/cover.jpg" />
<img src="C:/Users/L33508/Desktop/Images/hotdog.jpg" />
<br/>
</div>
</div>
<div id="controls">
<a href="javascript:void(0);" onclick="moveToPrevious(); return true;"><img src="C:/Users/L33508/Pictures/left_arrow.jpg"/></a>
<a href="javascript:void(0);" onclick="moveToNext(); return true;"><img src="C:/Users/L33508/Pictures/right_arrow.jpg"/></a>
</div>
<div>
</body>
</html>
into this one shown he Code: <%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.Master" CodeBehind="PeranakanMain.aspx.vb" Inherits="Peranakan_SG.PeranakanMain"
title="" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
function addSymbol(){
var map=OneMap.map;
if(map.getLayer("symbolLayer")==null){
map.addLayer(gLayer);
//dojo.connect(omap.map.infoWindow, "onShow", setInfoContent);
map.infoWindow.resize(525,252);
map.infoWindow.setFixedAnchor(esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);
}
gLayer.clear();
alert("Do you know where Peranakan food can be found?? Take a look here!!!!");
var stX = "23319.3347409758";
var stY = "28825.7191286444";
var pt= new esri.geometry.Point(stX,stY,map.spatialReference);
//var strImage = "http://www.rw-designer.com/i/download48b.png";
var strImage = "images/museum.png";
var symbol = new esri.symbol.PictureMarkerSymbol(strImage, 25,25);
var attr = {"PlaceName":"Peranakan musem of Singapore","PlaceAddr":"addr"};
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setTitle("Building Name:");
infoTemplate.setContent(getInfoContent);
var graphic = new esri.Graphic(pt,symbol,attr,infoTemplate);
gLayer.add(graphic);
}
function setInfoContent(){
infoWindow.setContent(getInfoContent());
}
function getInfoContent(graphic){
var bc = new dijit.layout.BorderContainer({style: "font-size: 11pt; height: 520px; width:493px; background: #CCFFFF;"});
var c1 = new dijit.layout.ContentPane({
region: "top",
style: "height: 20px width: 100%",
content: "hello Peranakan!! Here is a brief description"
});
bc.addChild(c1);
//make a tab container
var tc = new dijit.layout.TabContainer({
region: "center",
style: "height: 65%; width: 100%; "
}, dojo.create("div"));
//display attribute information
var cp1 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1900 - 1930</font> ",
content: "<table><tr><td>Images <u>(add image)</u></td></tr></table><table><tr><td><img src='images/left_arrow.jpg'/></td><td><img src='images/batik_heritage1.jpg'/></td><td><img src='images/batik_heritage2.jpg'/></td><td><img src='images/batik_heritage3.jpg'/></td><td><img src='images/right_arrow.jpg'/></td></tr></table>"
});
tc.addChild(cp1);
var cp2 = new dijit.layout.ContentPane({
title: "<font color= #E4287C><b>1931 - 1960</b></font>",
content: "<table><tr><td>Events <u>(add event)</u></td></tr></table><table width= 400 height = 120 ><tr><td width=150><a href='childpage1.htm' rel="nofollow" target='foo'>1970</a><br/><a href='childpage2.htm' rel="nofollow" target='foo'>1980</a></td><td><img src='images/timelineImg.jpg'/><td><iframe src='childpage1.htm' width='350' height='150' font-size='10pt' name='foo'></iframe></td></tr></table>"
});
tc.addChild(cp2);
var cp3 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1961 - 1990</b></font> ",
content: "<table><tr><td>Links <u>(add link)</u></td></tr><tr><td><a href = 'http://peranakan.org.sg/'>Peranakan Association</a></td></tr><tr><td><a href='http://www.google.com.sg'>Google</a></td></tr></table>"
});
tc.addChild(cp3);
var cp4 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1990 - 2011</b></font> ",
content: "<table><tr><td>Images <u>(add image)</u></td></tr></table><table><tr><td><img src='images/left_arrow.jpg'/></td><td><img src='images/batik_heritage1.jpg'/></td><td><img src='images/batik_heritage2.jpg'/></td><td><img src='images/batik_heritage3.jpg'/></td><td><img src='images/right_arrow.jpg'/></td></tr></table><br/><table><tr><td>Events <u>(add event)</u></td></tr></table><table width= 400 height = 120 ><tr><td width=150><a href='childpage1.htm' rel="nofollow" target='foo'>1970</a><br/><a href='childpage2.htm' rel="nofollow" target='foo'>1980</a></td><td><img src='images/timelineImg.jpg'/><td><iframe src='childpage1.htm' width='350' height='150' font-size='10pt' name='foo'></iframe></td></tr></table><br/><table><tr><td>Links <u>(add link)</u></td></tr><tr><td><a href = 'http://peranakan.org.sg/'>Peranakan Association</a></td></tr><tr><td><a href='http://www.google.com.sg'>Google</a></td></tr></table>"
});
tc.addChild(cp4);
bc.addChild(tc);
return bc.domNode;
}
dojo.addOnLoad(addSymbol);
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="NavigationContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width: 955px; height: 490px; margin: 0 0 0 0px;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center" position=""
style="height: 498px; width: 1004px; margin-left: 63px;" ></div>
</div>
</div>
</asp:Content>
I'm still new & learning, any kind souls willing to help me out? P.S. When I insert the 2 script sources from the first sample into the second, my icon on the map disappears! Any idea why too? I am trying to implement a credit card check function in the validation script. But whenever i enable the function it bypasses all previous validation checks and just inputs the data, where am i going wrong with this function? Code: function CheckCreditCard(cardtype, cardnumber)
{
var frm = document.forms["OrderForm"];
if (cardtype == "Visa") {
var re = /^4\d{3}-?\d{4}-?\d{4}-?\d{4}$/;
} else if (cardtype == "Master Card") {
var re = /^5[1-5]\d{2}-?\d{4}-?\d{4}-?\d{4}$/;
} else if (cardtype == "American Express") {
var re = /^3[4,7]\d{13}$/;
}
if (!re.test(cardnumber)) return false;
cardnumber = cardnumber.split("-").join("");
var checksum = 0;
for (var i=(2-(cardnumber.length % 2)); i<=cardnumber.length; i+=2) {
checksum += parseInt(cardnumber.charAt(i-1));
}
for (var i=(cardnumber.length % 2) + 1; i<cardnumber.length; i+=2) {
var digit = parseInt(cardnumber.charAt(i-1)) * 2;
if (digit < 10) { checksum += digit; } else { checksum += (digit-9); }
}
if ((checksum % 10) == 0)
return true;
else
sfm_show_error_msg('error message goes here');
return false;
}
HTML Code is: Code: <script language="JavaScript" type="text/javascript">
var frmvalidator = new Validator("OrderForm");
frmvalidator.EnableOnPageErrorDisplaySingleBox();
frmvalidator.EnableMsgsTogether();
frmvalidator.EnableFocusOnError(false);
// other attributes went here but were removed
frmvalidator.setAddnlValidationFunction("CheckCreditCard");
</script>
FULL Javascript: Attached at a txt file, was too large to post here. Every time I try to use the notEmpty function with an onClick event, the validation stops working. I also need to implement a pop-up that gives me this information - alert("Your name is"+firstname +lastname", your G.P.A. is "+gpa "your phone number is "+phone); anytime I try to use it as a function with onClick, it interrupts the validation as well. Please help! I'm completely lost. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
Date: 11/12/2014
Filename: validator.html
Supporting files: None
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validator</title>
<script type='text/javascript'>
function formValidator(){
// Make quick references to our fields
var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var gpa = document.getElementById('gpa');
var phone = document.getElementById('phone');
// Check each input in the order that it appears in the form!
if(isAlphabet(firstname, "Please enter only letters for your first name")){
if(isAlphabet(lastname, "Please enter only letters for your last name")){
if(gpaValidator(gpa, "Please enter a valid G.P.A.")){
if(phoneValidator(phone, "Please put a valid phone number")){
return true;
}
}
}
}
return false;
}
// Functions that check values in input fields!
function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function gpaValidator(elem, helperMsg){
var alphaExp = /^([0-3](\.\d\d?)?|4(.00?)?)$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function phoneValidator(elem, helperMsg){
var alphaExp = /\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
</head>
<body>
<form onsubmit='return formValidator()'>
<fieldset>
<legend>Personal information:</legend><br />
First Name: <input type='text' id='firstname' /><br />
Last Name: <input type='text' id='lastname' /><br />
G.P.A.: <input type='text' id='gpa' /><br />
Phone Number: <input type='text' id='phone' /><br />
<input type='submit' value='Submit' />
</form>
</body>
</html>
I am having trouble implementing this script. I am not a coder so please give exact, idiot proof advise. :-) Thank You. <script> (function() { var cx = 'user_id:field_id1'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); // This basically takes the value of the radio button (requires jQuery) $("input:radio[name='GCSField']").change(function() { cx = $(this).val(); }); })(); </script> <label for="user1"> <input name=GCSField id="user1" type="radio" value="user_id:field_id1" checked >User Field 1 </label> <label for="user2"> <input name=GCSField id="user2" type="radio" value="user_id:field_id2">User Field 2 </label> <gcse:search></gcse:search> Here is my html. <!DOCTYPE html> <html> <head><meta charset="UTF-8"> <!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <title>TEST</title> <meta name="robots" content="noindex, nofollow"> <meta name="viewport" content=" width=device-width, initial-scale=1"><meta name="HandheldFriendly" content="true"><meta name="MobileOptimized" content="320"> <style>body{width:100%;max-width:25em;margin-left:auto;margin-right:auto;font-family:Verdana,'Palatino Linotype',Palatino,'Book Antiqua',Arial,Helvetica,sans-serif;text-align:justify;font-size:105%;background-color:#000;background:#000;}p{margin-bottom:1%;}strong{font-size:115%;font-weight:bold;}a{line-height:200%;text-decoration:underline;color:#0007C6;}article{margin: 0 0 1% 0; color:#000;background:#FEE800;background-color:#FEE800; text-align: center;}</style> </head><body> <article> <div><script> (function() { var cx = 'user_id:field_id1'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); // This basically takes the value of the radio button (requires jQuery) $("input:radio[name='GCSField']").change(function() { cx = $(this).val(); }); })(); </script> <label for="user1"> <input name=GCSField id="user1" type="radio" value="011565775292567206849:xkh-s7ljiug" checked >User Field 1 </label> <label for="user2"> <input name=GCSField id="user2" type="radio" value="partner-pub-4173665486685435:n2tml3-z5vf">User Field 2 </label> <gcse:search></gcse:search></div> <div><gcse:searchresults></gcse:searchresults></div> </article> </body></html> Here is the above page off a server TEST Thanks again. Code: var mySlideShow = document.getElementById("slideShow");
var imageArray=new Array();
imageArray[0]="url(images/Slide1.JPG)";
imageArray[1]="url(images/Slide2.JPG)";
imageArray[2]="url(images/Slide3.JPG)";
var imageIndex = 0;
var leftArrow = document.getElementById("left");
var rightArrow = document.getElementById("right");
mySlideShow.style.backgroundImage = "url(images/Slide1.JPG";
function changeRight () {
mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 1;
}
console.log(imageIndex);
}
function changeLeft () {
mySlideShow.style.backgroundImage = imageArray[imageIndex];
imageIndex--;
console.log(imageIndex);
}
rightArrow.onclick = function() {
changeRight();
}
leftArrow.onclick = function() {
changeLeft();
}
So what I am trying to do here is basically a slideshow. When I click on the left button it goes backwards and when I click the right button it goes forward. The problem arises when I click on the left arrow. It doesn't act as I want it to and I need some help. I want to remove one from the image index but imageindex--; doesn't seem to work. Any help would be awesome. Hi, I desperately need a javascript slideshow that does the following: 1--shows still images with thumbnails 2--can be played manually or automatically 3--can embed youtube videos 4--audio can accompany slideshows 5--powered by javascript, not Flash so it shows up on iPad Does anyone know where I can get such a slideshow? Thanks I am having a problem with my homework assignment and can not figure out the problem. Debug comes back clean and I am stumped on this project for several hours. I hate asking for help and like to figure it out on my own, but I can not seem to know what the problem is. I have done alerts in my blocks of code and everything is coming back. Here is the book and the case problem I am on: http://books.google.com/books?id=BeE...page&q&f=false Basically the images is not loading up, or anything is happening. //EDIT : I have the function setup() onLoad in the body ( body onload="setup()" ) Here is my code: FileName: flibrary.js Code: function getStyle(object, styleName) {
if (window.getComputedStyle) {
return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
} else if (object.currentStyle) {
return object.currentStyle[styleName]
}
}
// step 3
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
//step 4
function addEvent(object, evName, fnName, cap) {
if (object.detachEvent)
object.detachEvent("on" + evName, fnName);
else if (object.removeEventListener)
object.removeEventListener(evName, fnName, cap);
}
FileName: slideshows.js Code: /*
New Perspectives on JavaScript, 2nd Edition
Tutorial 6
Case Problem 2
Author:
Date:
Filename: slideshow.js
Global Variables:
scrollButton
References the scrolling button in the slide show
diffX
Stores the horizontal distance in pixels between the
mouse pointer when the scrolling button is clicked
and the left edge of the scrolling button.
Functions List:
setup()
Initializes the contents of the Web page. Creates
event handlers for the mouse and keyboard events
grabIt(e)
"Grabs" the scrolling button to set up the
horizontal scrolling of the slide show
moveIt(e)
Moves the scrolling button horizontally through
the scrollbar
showSlide(x)
Shows the image corresponding the to the x coordinate
on the scrollbar
dropIt(e)
Drops the scrolling button after the user releases the
mouse button
keyShow(e)
Uses the left and right arrow keys to move the scrolling
button through the scrollbar
*/
var scrollButton;
var diffX;
// step 7
function setup(){
scrollButton = document.getElementById("button");
scrollButton.style.top = getStyle(scrollButton,"top");
scrollButton.style.left = getStyle(scrollButton,"left");
scrollButton.style.cursor = "pointer";
addEvent(scrollButton, "mousedown", grabIt, false);
addEvent(document, "keydown", keyShow, false);
}
// step 8
function grabIt(e){
var evt = e || window.event;
var mouseX = evt.clientX;
diffX = parseInt(scrollButton.style.left)- mouseX;
addEvent(scrollButton, "mousemove", moveIt, false);
addEvent(scrollButton, "mouseup", dropIt, false);
}
// step 9
function moveIt(e){
var evt = e || window.event;
var mouseX = evt.clientX;
var buttonPosX = mouseX - diffX;
showSlide();
}
// step 10
function showSlide(x){
if(x<20){
x = 20;
}
if(x>299){
x = 299;
}
scrollButton.style.left = x;
var i = Math.floor((x-20)/31);
document.getElementById("photo").src = image[i];
}
// step 11
function dropIt(e){
removeEvent(scrollButton, "mousemove", moveIt, false);
}
// step 12
function keyShow(e){
var evt = e || window.event;
var key = event.keyCode;
var buttonPosX = scrollButton.style.left;
if(key == 37) buttonPosX -= 31;
if(key == 39) buttonPosX += 31;
showSlide(buttonPosX);
}
I worked a lot with a friend to change the code, and it's almost there. The next and last buttons still work. The Start buttons is titled 'wri' and the latest button is titled 'end'. The end button does not work. Before I added the end button, the start button worked, but now it sends you to the image alt. Any ideas on what went wrong? Code: window.onload = initLinks;
var myPix = new Array("comic/Issue1_Page00.gif","comic/Issue1_Page01.gif","comic/Issue1_Page02.gif");
var thisPic = 0;
function initLinks() {
document.getElementById("prevLink").onclick = processPrevious;
document.getElementById("nextLink").onclick = processNext;
}
function processPrevious() {
if (thisPic == 0) {
thisPic = myPix.length;
}
thisPic--;
document.getElementById("myPicture").src = myPix[thisPic];
return false;
}
function processNext() {
thisPic++;
if (thisPic == myPix.length) {
thisPic = 0;
}
document.getElementById("myPicture").src = myPix[thisPic];
return false;
}
// Load Images
if (document.images) {
writeImg = new Image();
writeImg.src = (comic/Issue1_Page03.gif);
}
function imgOn(imgName) {
if (imgName == 'end') { document.strip.src=eval("writeImg.src"); document.txtwriteImg.src=eval("txtwriteOnImg.src"); return true;}
return false;
}
// Load Images
if (document.images) {
writeImg = new Image();
writeImg.src = (comic/Issue1_Page00.gif);
}
function imgOn(imgName) {
if (imgName == 'wri') { document.strip.src=eval("writeImg.src"); document.txtwriteImg.src=eval("txtwriteOnImg.src"); return true;}
return false;
}
Solved
This slideshow has a drop down menu that lets you go from one picture to another. Can someone help me modify it so that instead of a dropdown menu i have a list of numbers (horizontally,not vertically)? I know absolutley nothing about javascript. sorry. Thanks programmers! <!-- configurable script --> <script type="text/javascript"> theimage = new Array(); theimage[0]=["url", "", "1"]; theimage[1]=["url", "", "2"]; theimage[2]=["url", "", "3"]; //########################################### window.onload=function(){ //preload images into browser preloadSlide(); //"jump to" box for (y=0;y<theimage.length;y++) { document.slideshow.imgComboBox[y]=new Option(theimage[y][2]); } //set the first slide SetSlide(0); } //########################################### function SetSlide(num) { //too big i=num%theimage.length; //too small if(i<0)i=theimage.length-1; //switch the image document.images.imgslide.src=theimage[i][0]; //if drop down box if(document.slideshow.imgComboBox){ document.slideshow.imgComboBox.selectedIndex = i; } //if they want name of current slide document.getElementById('slidebox').innerHTML=theimage[i][2]; } //########################################### function PlaySlide() { if (!window.playing) { PlayingSlide(i+1); if(document.slideshow.play){ document.slideshow.play.value=" Stop "; } } else { playing=clearTimeout(playing); if(document.slideshow.play){ document.slideshow.play.value=" Play "; } } // if you have to change the image for the "playing" slide if(document.images.imgPlay){ setTimeout('document.images.imgPlay.src="'+imgStop+'"',1); imgStop=document.images.imgPlay.src } } //########################################### function PlayingSlide(num) { playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed); } //########################################### function preloadSlide() { for(k=0;k<theimage.length;k++) { theimage[k][0]=new Image().src=theimage[k][0]; } } </script> <!-- slide show HTML --> <form name="slideshow"> <table border="1" cellpadding="2" cellspacing="0"> <tr> <td align="center"> <a href="#" onmouseover="this.href=theimage[i][1];return false"> <script type="text/javascript"> document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">') </script> </a> </td> </tr> <tr> <td align="center"><div id="slidebox"></div></td> </tr> <tr> <td align="center"> <select name="imgComboBox" onchange="SetSlide(document.slideshow.imgComboBox.selectedIndex);"></select> </td> </tr> </table> </form> <!-- end of slide show HTML --> Hello everybody! first of all I must specify that I don't know almost anything about javascript... I'm trying to introduce a javascript slideshow (I found a free one) on our website and I have a problem: As you can see here on the bottom of the page (http://www.comelity.com/en/pages/about-us.php), when the slideshow changes image, it puts a link over the image without any reason and if you click on the image it reloads the page... I would like to remove this link, but I'm not able... Does anyone know how to solve the problem? I can send the javascript slideshow if you want... Thank you very much! S.P. |
|||||||