AllSeoHelp.com
Search the Entire Site
  • PHP
  • JavaScript
  • CSS
  • HTML
Learn VBA & Macros in 1 Week!

JavaScript - I Need Help Implementing A Javascript Slideshow On My Website...
Full Excel VBA Course - Beginner to Expert

I Need Help Implementing A Javascript Slideshow On My Website...

 View Content
Okay, 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;">&nbsp;
		</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">&nbsp;
                    </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>&nbsp;
                    </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.&nbsp;<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;">&nbsp;
        </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.
Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Help Implementing Nivo Slideshow
Implementing Javascript Popups
Implementing Javascript Map In A Wordpress Page
Need Help With Javascript Slideshow
Javascript Slideshow Help
Help With Javascript Slideshow
Javascript Slideshow Help
Please Help -- Javascript Slideshow With Links
3 Way Javascript Image Slideshow
Javascript Slideshow Not Working On Ie
How To Stop Look In Javascript Slideshow
Javascript Slideshow Problem...
(javascript) Help With Slideshow Text!
Javascript Photo Slideshow
Help Please To Stop Javascript Slideshow
Javascript Slideshow Not Working As Before In Ie
Simple Javascript Slideshow
Mouseover Slideshow - Javascript:warp ()
Need To Get Css Drop Down Menu Over Javascript Slideshow
Javascript Image Slideshow Little Problem


Learn VBA & Macros for Excel in 1 Week!


Help Implementing Nivo Slideshow

 Similar Tutorials View Content
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...

Implementing Javascript Popups

 Similar Tutorials View Content
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!

Implementing Javascript Map In A Wordpress Page

 Similar Tutorials View Content
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

Need Help With Javascript Slideshow

 Similar Tutorials View Content
Hi,

I don't really know much about Javascript but I was wondering if anyone could tell me how to change this script so when you click on a link it doesn't open in a new window?

Any help would be much appreciated!

Code:
<script language="JavaScript1.1">
<!--


var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script><br>



<a href="javascript:gotoshow()"><img src="/images/brochure/2010/homepage_freestyle/Feb/Banner-Paris-special-129.jpg" name="slide" border=0 width=429 height=90></a>
<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("/images/brochure/2010/homepage_freestyle/Feb/Banner-Paris-special-129.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-3-for-1.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-London-89.jpg","/images/brochure/2010/homepage_freestyle/Feb/Banner-Brussels-special-155.jpg")
slideshowlinks("/dl/holidayoffers.jsp?destination=DISCOVER_PARIS_BREAKS,RE,TO","/dl/holidayoffers.jsp?destination=MAILER_EUROSTAR_3_FOR_1,RE,TO,","/dl/holidayoffers.jsp?destination=london_rail_breaks,RE,TO,","/dl/holidayoffers.jsp?destination=DISCOVER_BRUSSELS,RE,TO,")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=3000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>
<p>


Javascript Slideshow Help

 Similar Tutorials View Content
I have created two pages. One with a selection of images one with a working slideshow.

How do I get it that a user can select 4 images that are then transferred to the slideshow and played in that slideshow?

I appolgise if this is a simple fix but I am very new to JavaScript. Thank you all in advance

Help With Javascript Slideshow

 Similar Tutorials View Content
Hi,

Pretty simple problem I hope Ive somehow changed something in my coding on my html page to stop the slide show working correctly.

Any ideas

heres the link: http://sparekeys.org.uk/

Please help i know its something stupid but I just cant see it.

Javascript Slideshow Help

 Similar Tutorials View Content
Hey guys;

I work as a webmaster for my school and I am trying to develop a JavaScript slideshow for pictures. I am a beginner to JavaScript, so if my coding is off, please let me know. What I am trying to do is have multiple automatic slideshows for this website. I want each of the slideshow boxes to run through the images, however the coding is wrong, causing the first box to switch through the images for the second box and the second one not switching at all. Sorry if thats confusing, please ask if you need any other specifications.

Here is my JavaScript coding:

//Slideshow

//September 18
NewImg = new Array ("Pictures/Sept18/290.jpg", "Pictures/Sept18/293.jpg", "Pictures/Sept18/304.jpg", "Pictures/Sept18/310b.jpg", "Pictures/Sept18/311.jpg", "Pictures/Sept18/317.jpg", "Pictures/Sept18/323.jpg", "Pictures/Sept18/327.jpg", "Pictures/Sept18/328.jpg", "Pictures/Sept18/331.jpg", "Pictures/Sept18/333.jpg", "Pictures/Sept18/337.jpg", "Pictures/Sept18/339.jpg", "Pictures/Sept18/340.jpg", "Pictures/Sept18/342.jpg", "Pictures/Sept18/344.jpg", "Pictures/Sept18/346.jpg", "Pictures/Sept18/351.jpg", "Pictures/Sept18/352.jpg", "Pictures/Sept18/353.jpg", "Pictures/Sept18/354.jpg", "Pictures/Sept18/356.jpg", "Pictures/Sept18/359.jpg", "Pictures/Sept18/360b.jpg", "Pictures/Sept18/361.jpg", "Pictures/Sept18/362.jpg", "Pictures/Sept18/363b.jpg", "Pictures/Sept18/366.jpg", "Pictures/Sept18/370.jpg", "Pictures/Sept18/374b.jpg", "Pictures/Sept18/379.jpg", "Pictures/Sept18/385.jpg", "Pictures/Sept18/391.jpg", "Pictures/Sept18/392.jpg", "Pictures/Sept18/393.jpg", "Pictures/Sept18/394.jpg", "Pictures/Sept18/398.jpg", "Pictures/Sept18/408.jpg", "Pictures/Sept18/410.jpg", "Pictures/Sept18/415.jpg", "Pictures/Sept18/419.jpg", "Pictures/Sept18/427.jpg", "Pictures/Sept18/428b.jpg", "Pictures/Sept18/429.jpg", "Pictures/Sept18/432.jpg", "Pictures/Sept18/435.jpg", "Pictures/Sept18/440.jpg", "Pictures/Sept18/441.jpg", "Pictures/Sept18/443.jpg", "Pictures/Sept18/448.jpg", "Pictures/Sept18/449.jpg", "Pictures/Sept18/450.jpg", "Pictures/Sept18/455.jpg", "Pictures/Sept18/456.jpg", "Pictures/Sept18/460.jpg", "Pictures/Sept18/461.jpg", "Pictures/Sept18/463.jpg", "Pictures/Sept18/467.jpg", "Pictures/Sept18/470.jpg", "Pictures/Sept18/474b.jpg", "Pictures/Sept18/478b.jpg", "Pictures/Sept18/481.jpg", "Pictures/Sept18/484.jpg", "Pictures/Sept18/486.jpg", "Pictures/Sept18/491b.jpg", "Pictures/Sept18/496.jpg", "Pictures/Sept18/498b.jpg", "Pictures/Sept18/503.jpg", "Pictures/Sept18/505b.jpg", "Pictures/Sept18/506b.jpg", "Pictures/Sept18/508.jpg", "Pictures/Sept18/509.jpg", "Pictures/Sept18/514.jpg", "Pictures/Sept18/525b.jpg", "Pictures/Sept18/527.jpg", "Pictures/Sept18/531b.jpg", "Pictures/Sept18/532b.jpg", "Pictures/Sept18/533b.jpg", "Pictures/Sept18/538b.jpg", "Pictures/Sept18/542.jpg", "Pictures/Sept18/544b.jpg", "Pictures/Sept18/547.jpg", "Pictures/Sept18/549.jpg", "Pictures/Sept18/557b.jpg", "Pictures/Sept18/560.jpg", "Pictures/Sept18/565.jpg", "Pictures/Sept18/567.jpg", "Pictures/Sept18/571b.jpg", "Pictures/Sept18/574b.jpg", "Pictures/Sept18/583b.jpg", "Pictures/Sept18/587.jpg", "Pictures/Sept18/588.jpg", "Pictures/Sept18/597b.jpg", "Pictures/Sept18/610b.jpg");

var ImgNum = 0;
var ImgLength = NewImg.length - 1;
var delay = 2500;
var lock = false;
var run;

function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.sept18.src = NewImg[ImgNum];
}
}

function auto() {
if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}

//September 25
NewImg = new Array ("Pictures/Sept25/626b.jpg", "Pictures/Sept25/633.jpg", "Pictures/Sept25/634.jpg", "Pictures/Sept25/636.jpg", "Pictures/Sept25/639.jpg");

var ImgNum = 0;
var ImgLength = NewImg.length - 1;
var delay = 2500;
var lock = false;
var run;

function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.sept18.src = NewImg[ImgNum];
}
}

function auto() {
if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}

And here is where in the HTML the coding is referred to:

<?php include 'top.php' ?>

<img src="Images/Bar_Images/home.png" class="header" />
<p>Welcome to the TCNJ Women's Club Rugby homepage!</p><br />
<p class="sub">Pictures</p>
<div class="box">
<a href="http://www.tcnj.edu/~rugby/sept18.php"><img name="sept18" src="Pictures/Sept18/290.jpg" class="slides" align="left" /></a>
<p align="right">September 18th, 2010</p>
</div>
<div class="box">
<a href="http://www.tcnj.edu/~rugby/sept25.php"><img name="Sept25" src="Pictures/Sept25/626b.jpg" class="slides" align="left" /></a>
<p align="right">September 25th, 2010</p>
</div>

<?php include 'bottom.php' ?>

As you can see, I am using PHP to refer to other pages, but the JavaScript coding is referred to in the <head> and the <body> tag is onloading the auto() function. Please help me fix this code, or if it is impossible to do it this way, let me know. Thank you.

Please Help -- Javascript Slideshow With Links

 Similar Tutorials View Content
I've created a slideshow on our site using the java template at
http://www.javascriptkit.com/script/.../jsslide.shtml

Are there simple modifications I can make to this code in order to cause clicking on the image links to go straight to them, rather than creating a new window/tab?

Thanks for the help.

3 Way Javascript Image Slideshow

 Similar Tutorials View Content
http://www.javascriptkit.com/script/...2/3slide.shtml

Hi i have the above image slideshow script running fine on a webpage

can anybody tell me how i can get it to run a second time to show a second different slideshow on the same page?

Ive tried editing variables but i cant work it out. would be much appreciated

Ta

Javascript Slideshow Not Working On Ie

 Similar Tutorials View Content
Hello guys and gals ,

I am using one of the JavaScript codes provided at http://www.javascriptkit.com, and it works great on Chrome and Firefox. But Internet Explorer is giving me trouble

Here is the HTML:

Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="Keywords go here" name="keywords" />
<meta content="Description goes here" name="description" />
<meta content="This website is coded and maintained by ***** " name="author" />
<meta content="@2004 ***** " name="copyright" />
<meta http-equiv="Content-Style-Type" content="text/css2" />
<title>Concepto MV</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Comfortaa:400,700' rel='stylesheet' type='text/css'>

<!--Website coded and maintained by Alexandra barvo
Copyright @2011 w ww.alexandrabarvo.com -->
</head>
<body>
<div id="background"></div><!--Backgroung-->
<div id="wrapper">
<div id="nav">
<div id="logo">
<img src="images/logo.png"/>
</div><!--logo-->
<ul id="main_nav">
<li><a class="active" href="index.html">HOME</a></li>
<li>|</a></li>
<li><a href="about.html">OUR COMPANY</a></li>
<li>|</a></li>
<li><a href="services.html">SERVICES</a></li>
<li>|</a></li>
<li><a href="contact.html">CONTACT US</a></li>
</ul>
<ul id="social">
<li><a href="http://www.twitter.com" target="blank"><img src="images/twitter.png" border="0"/></a></li>
<li><a href="http://www.flickr.com" target="blank"><img src="images/flickr.png" border="0"/></a></li>
<li><a href="http://www.facebook.com" target="blank"><img src="images/facebook.png" border="0"/></a></li>
</ul>
</div><!--nav-->
<div id="slideshow">
<script type="text/javascript">

// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

var ultimateshow=new Array()

//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

ultimateshow[0]=['images/render1.jpg', '', '']
ultimateshow[1]=['images/render2.jpg', '', '']
ultimateshow[2]=['images/render3.jpg', '', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth="900px" //set to width of LARGEST image in your slideshow
var slideheight="400px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

</script>
</div><!--slideshow-->
<div class="push"></div><!--push-->
</div><!--wrapper-->
<div class="footer">
<p id="copy">Copyright &copy; 2012</p>
</div><!--footer-->
</div><!--body-->
</body>
</html>

And here is the CSS


Code:
@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

body{
	background:url(../images/bg.jpg) repeat;
	padding: 0px;
	font: 12px 'Comfortaa', Helvetica, sans-serif;
	color: #CCC;
}

#wrapper{
	margin:0 auto 75px auto;
	width:960px;
	min-height: 100%;
	height:auto !important;
	height:100%;
}

#background{
	background:url(../images/nav_bg.png) repeat-x;
	position:absolute;
	left:0;
	top:35px;
	width:100%;
	height:100%;
	z-index:-1;
}

#website{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:99;
}

#nav{
	/*background: url(../images/nav_bg.png) repeat-x;*/
	width: 100%;
	height: 75px;
	margin-top: 35px;
	margin-bottom: 75px;
}

#logo{
	margin-left:40px;
	float:left;
}

#main_nav{
	margin-left: 22px;
}

ul#main_nav{
	list-style:none;
	float:left;
	margin-top: 38px;
}

ul#main_nav li{
	display:inline;
	padding-left:7px;
	font-size:14px;

}

ul#main_nav a{
	text-decoration:none;
	color:#ccc;
}

ul#main_nav a:hover{
	text-decoration:none;
	color:#666;
}

ul#social{
	list-style:none;
	float:left;
	margin-top: 34px;
	margin-left: 22px;
}

ul#social li{
	display:inline;
	padding-left:10px;
	font-size:18px;
}

ul#social a{
	text-decoration:none;
	color:#ccc;
}

ul#social a:hover{
	text-decoration:none;
	color:#666;
}

#slideshow{
	width:900px;
	height:400px;
	border:#101010 solid 5px;
	padding: 0px;
	margin: 0px auto;
}

.footer{
	text-align:center;
	background-color: #000; 
	padding: 37px 0px 0px 0px;
	margin:0px;
	width:100%;
	background:url(../images/nav_bg.png) repeat-x;
}

.footer, .push{
	height: 75px;
}


Can anyone tell me of I am doing something wrong, or if I just need to use another code for the slideshow to work on ie?

Thank you so much for you time.
Ale

How To Stop Look In Javascript Slideshow

 Similar Tutorials View Content
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!

Javascript Slideshow Problem...

 Similar Tutorials View Content
Hi there,

I am currently creating my first ever website and I am attempting to put in some javascript but I am having trouble, would it be possible for someone to guide me.

I am trying to implement a slideshow but at the moment all I am getting is the first picture only, here is the code...

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Lyons Design and Print</title>
	<style type="text/css" media="all">
 
 
body
{
background-image:url('background.jpg');
}
 
.header {
font-size: 24pt;
font-weight: bold;
padding: 20px;
border-bottom: 1px solid #000;
text-align:center;
}
 
#nav {
margin:0;
padding:0;
float:left;
width:100%;
border:1px solid #42432d
border-width:1px 0;
text-align: center;
}
 
#nav li {
display:inline-block;
padding:0;
margin:0;
}
 
* html #nav li { display: inline; }
*+html #nav li { display: inline; }
 
#nav a:link,
#nav a:visited {
color:#000;
background:#0033CC;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-shadow: 2px 2px 2px #555;
}
 
#nav a:hover,
#nav a:focus {
color:#fff;
background:#0033CC;
}
 
#nav li:first-child a {
border-left:1px solid #42432d;
}
 
#home #nav-home a,
#large format printing #nav-large format printing a,
#scanning #nav-scanning a,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a, 
#large format photo copying #nav-large format photo copying a, 
#contacts #nav-contacts a,
#about us #nav-about us a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
 
#home #nav-home a:hover,
#large format printing #nav-large format printing a:hover,
#scanning #nav-scanning a:hover,
#thermal inkjet printing and plotting #nav-thermal inkjet printing and plotting a:hover, 
#large format photo copying #nav-large format photo copying a:hover, 
#contacts #nav-contacts a:hover,
#about us #nav-about us a:hover {
background:#e35a00;
}
 
#nav a:active {
background:#e35a00;
color:#fff;
}
 
p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}
 
p{
font-family: Verdana, Geneva, sans-serif;
font-style: oblique;
font-weight: normal;
font-size: 16px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: center;
}
 
 
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="DesignPrinter.jpg"
var image2=new Image()
image2.src="print-design.jpg"
var image3=new Image()
image3.src="printingpress.jpg"
var image4=new Image()
image4.src="thermal.jpg"
//-->
</script>
 
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
 
</style>
</head>
 
<body>
 
<div class="header"><img src="logo.jpg"></div>
 
  <ul id="nav">
    <li id="nav-Home"><a href="Home.html">Home</a></li>
    <li id="nav-Large Format Printing"><a href="Large Format Printing.html">Large Format Printing</a></li>
    <li id="nav-Scanning"><a href="Scanning.html">Scanning</a></li>
    <li id="nav-Thermal Inkjet Printing and Plotting"><a href="Thermal Inkjet Printing and Plotting.html">Thermal Inkjet Printing and Plotting</a></li>
    <li id="nav-Large Format Photo Copying"><a href="Large Format Photo Copying.html">Large Format Photo Copying</a></li>
    <li id="nav-Contacts"><a href="#">Contacts</a></li>
    <li id="nav-About Us"><a href="#">About Us</a></li></ul>
 
 
<table border="0" cellpadding="0" cellspacing="0" height="300"><tr><td id="maincontent" valign="top">
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a. </p>
 
<p align="center"><img src="DesignPrinter.jpg" name="slide" width=300 height=300></p>
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate </p>
 
<embed src="beatles.mid" width="144" height="60">
 
</body>


(javascript) Help With Slideshow Text!

 Similar Tutorials View Content
how do i make those two lines go away in the backround?



EDIT: UP! http://insidehb.com/main/default.html

EDIT: Now works with ie

Javascript Photo Slideshow

 Similar Tutorials View Content
Hello -

My question revolves around a photo slider that will automatically advance to the next photo in a matter of seconds. . .

Before you write this thread off as, 'GO GOOGLE IT, THERE'S TONS OF CODE ALREADY OUT THERE IN THREADS LIKE THIS'. . .

The tricky part of this is, I already have a photo slider that you advance by a button click and it transitions 2 portions of the page. It is a custom module in Joomla that just basically uses some custom HTML to display a picture on the left and text on the right. . .and you click the button and it advances to another picture and different text to match the image.


HERE IS MY CURRENT HTML THAT DISPLAYS THE IMAGE AND TEXT

Code:
<div class="images"><!-- first slide -->
<div><img class="img-slider" src="images/stories/slider_img_1.jpg" border="0" /> <span class="slider-text-indent">
<h3 class="slider-titile">We listen.</h3>
<span class="slider-text">Tired of unreliable computer consultants who are impossible to reach, nickel and dime you, and fail to deliver results that you deserve?<br /><br />ABC Computers is here to help you!</span> </span></div>
<!-- second slide -->
<div><img class="img-slider" src="images/stories/slider_img_2.jpg" border="0" /> <span class="slider-text-indent">
<h3 class="slider-titile">We Guarantee.</h3>
<span class="slider-text">We are committed to doing whatever is necessary, period. In our 25 history, we have never had a failed implementation; we guarantee yours will not be the first.</span> </span></div>
<!-- third slide -->
<div><img class="img-slider" src="images/stories/slider_img_3.jpg" border="0" /> <span class="slider-text-indent">
<h3 class="slider-titile">We Care.</h3>
<span class="slider-text">We treat your network as if it was our own. We protect your data as if it was ours. We don't look at your budget as a mine of money; we won't ask you to spend one dollar that we wouldn't spend on our own network!</span> </span></div>
</div>
<p><a class="backward">prev</a> <a class="forward">next</a></p>
<!-- the tabs -->
<div class="tabs"><a></a> <a></a> <a></a></div>

Again, I would like to make this advance automatically through javascript (or perhaps there's a better way). . . but I do not want to lose the functionality of moving it manually with the button too.


Is this possible to do and if so, does anyone have suggestions?

Typically this isn't an issue for me to figure out but since I already have it how the client wants it to look, they basically want it to move automatically as if someone pushed the button. . .but still keep the manual button to advance and reverse it.


Thank you in advance for any advice or help on this matter.

Help Please To Stop Javascript Slideshow

 Similar Tutorials View Content
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
=========

Javascript Slideshow Not Working As Before In Ie

 Similar Tutorials View Content
New to the forum so any help you can provide is greatly appreciated. I have been using a Javascript slideshow code for several websites. I create images that are exactly the same size and then the slideshow moves through them with a cross-fade. Cross-fade does not work in FireFox but images still change over nicely, just no fade. In IE, the cross-fade worked beautifully, creating a seamless transition between images.

Now - I'm guessing within the last 2 months? - these images in IE 'jump'. Instead of a seamless transition, the fade causes the next image in show to come in from upper left of slide show area. So images appear to jump into place rather than slowly transition in.

Did IE change something in the way it processes Java? This code worked perfectly until recently. I'm not a Java programmer - using this code from another source.
Here is heart of the transition code:
[CODE]
var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}
[CODE]

As I said, I have used this code on several websites & it is the focal point for a nice-looking display. Any input, help or advice is greatly appreciated.

Simple Javascript Slideshow

 Similar Tutorials View Content
Hello,

looking for simple javascript slideshow script, similar to this:

http://www.jimex.co.jp/veh_details.php?id=4541

I like the mousover effect when the main image is changed once the mouse is over the thumbnails on the right hand side.

Has anyone got something like this?

Thanks

Mouseover Slideshow - Javascript:warp ()

 Similar Tutorials View Content
Hi,

After many hours spent trying to resolve this myself, I've finally accepted I'm not going to stumble across an answer. Would very much appreciate any guidance!

Basically, I have a mouseover slideshow setup purely thanks to the Javascript Kit. It consists of three smaller images that feed into a larger one.

I have also added code to change the accompanying text on rollover.

The only problem I have, is that before the user hovers over one of the smaller images, the larger image doesn't link anywhere. Given that the 'a href' for the div is "javascript:warp()" is it still possible to have the larger image link to a url before any of the smaller images have been activated? Or will I need to recode completely to achieve this?

If I haven't explained well enough, you can see the problem here - http://soundsenseonline.co.uk/

Many Thanks,

JD

Code:
<script>

/*Rollover effect on different image script-
By JavaScript Kit (http://javascriptkit.com)
Over 200+ free scripts here!
*/

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}


preloadimages("http://soundsenseonline.co.uk/featuredcontentimages/1.png","http://soundsenseonline.co.uk/featuredcontentimages/2.png","http://soundsenseonline.co.uk/featuredcontentimages/3.png")
</script>

</head>

<body>

 <div class="featuredcontentall">
 <div class="featuredcontent">

<a href="javascript:warp()"><img src="http://soundsenseonline.co.uk/featuredcontentimages/1.png" width="740" height="327" name="targetimage" border=0>
<div id="featuredcontenttext">Stateside Selection: The Material</div>
</div></a>
<div class="featuredcontentslides">

<a href="http://soundsenseonline.co.uk/2011/07/stateside-selection-the-material/" onMouseover="changeimage(myimages[0],this.href)
document.getElementById('featuredcontenttext').firstChild.data = 'Stateside Selection: The Material'; return true;"><img src="http://soundsenseonline.co.uk/featuredcontentimages/1s.png" width="238" /></a>

<a href="http://soundsenseonline.co.uk/2011/07/sarah-jarosz-live-the-greystones-sheffield-17072011/" onMouseover="changeimage(myimages[1],this.href)
document.getElementById('featuredcontenttext').firstChild.data = 'Live Review: Sarah Jarosz @ The Greystones, Sheffield 17/07/2011'; return true;"><img src="http://soundsenseonline.co.uk/featuredcontentimages/2s.png" width="238"/></a>

<a href="http://soundsenseonline.co.uk/2011/05/mc-lars-weerd-science/" onMouseover="changeimage(myimages[2],this.href)
document.getElementById('featuredcontenttext').firstChild.data = 'Exclusive: MC Lars & Weerd Science - Live Performance and Interview'; return true;"><img src="http://soundsenseonline.co.uk/featuredcontentimages/3s.png" width="238"/></a>

</div></div>
</body>


Need To Get Css Drop Down Menu Over Javascript Slideshow

 Similar Tutorials View Content
Hi everyone,

How can I achieve this?

I need to get my drop down menu go over the javascript slideshow going on in this page: www.kimikal.com/store

It works on all browsers except for IE, which hides the menu behind the js slideshow.

Any help would be greatly appreciated!

Javascript Image Slideshow Little Problem

 Similar Tutorials View Content
Hi,

Im using the following javascript to cycle through 3 images on my website header.

http://www.dynamicdrive.com/dynamici...nslideshow.htm

However, I have put it in a div layer and it works fine, except in Internet explorer, if you load the page in a small window and then maximise, it moves out of position. Similarly if you open the page maximised, and then make the page smaller, it again moves out of position. My page layout is centered on the web page.

is there anyone who could help me?
Privacy