copying slider code from front page to another page

carolsanjose
carolsanjose used Ask the Experts™
on
I would like to use the front page slideshow layout on another page in my website.  What code to I copy into the html section of the page content to achieve the look and feel of the front page slideshow?  This is not a plugin slideshow, and I want to add a 2nd slideshow that looks just like the one displayed on the home page.

Any advice is appreciated...
Front page:
http://www.callcarol.com/example3/demo/
Page where I want to add a slideshow with the layout of the front page slideshow.
http://www.callcarol.com/example3/demo/
  copy this front page slideshow  to here - I'll be adding more slides & content to it
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Senior Web Developer
Commented:
This is nivoslider and can you post your index page + innepage page where you want to slider display
http://nivo.dev7studios.com/

Your html code for slider is:

<div id="content">	<!-- BEGIN SLIDER -->
	  <div id="slider">

	  		<a href="http://appcenter.intuit.com/cash-maximizer-beta" target="_blank"><img class="alignnone size-full wp-image-611" title="Improve your cash-flow and use the app on multiple platforms" src="http://www.callcarol.com/example3/wp-content/uploads/2011/05/xaaps-multiple-devices3.png" alt="" width="960" height="370" /></a>		</div>
	   <div style="width:960px; margin:0 auto; background:url(http://www.callcarol.com/example3/wp-content/themes/boldy/images/bk_shadow_slider.png) 0 0 no-repeat; height:50px;"></div>
	   <!-- END SLIDER -->

Open in new window


Javascript for setting the slider is:

<script type="text/javascript">
			$(window).load(function() {
				$('#slider').nivoSlider({
					effect:'random', //Specify sets like: 'fold,fade,sliceDown'
					slices:15,
					animSpeed:00,
					pauseTime:3000,
					startSlide:0, //Set starting Slide (0 index)
					directionNav:true, //Next & Prev
					directionNavHide:true, //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 & 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>

Open in new window


Now your CSS file is:
http://www.callcarol.com/example3/wp-content/themes/boldy/css/nivo-slider.css

JavaScript for Nivoslider is:
http://www.callcarol.com/example3/wp-content/themes/boldy/js/jquery.nivo.slider.pack.js
And now your jquery file is

http://www.callcarol.com/example3/wp-content/themes/boldy/js/jquery-1.4.2.min.js 

So Now when you manage all of this pages and scripts It must work

Author

Commented:
Why isn't the slider working on the demo page right now?
http://www.callcarol.com/example3/demo/

I pasted the html code into the html section of the page content area in Wordpress.

When you view this page source code, what information am I missing in the header?

Again, I want to use the slider on the front page,
http://www.callcarol.com/example3/
as the slider on the demo page, too.

I was hoping to copy the html code into the page inner, like I did already, but I am missing something in the header to make the slideshow appear...

Thank YOU...  I appreciate your help.

Author

Commented:
OHHH...It worked.
I just pasted the javascript code onto the page & now I see the slider...
http://www.callcarol.com/example3/demo/

One last question....

Author

Commented:
Will you highlight the code where I remove the current slides & add the new ones?

Author

Commented:
I figured it out.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial