Author Topic: jQuery slider in HTLM Block (Read 5192 times)

S@ffz · « **on:** September 17, 2011, 04:33:33 AM »

Hi Everyone

I am trying to start up the jquery slider which i downloaded from the following Site SLIDES

SMF 2.0
SP 2.3.3

I can run from my pc but not in HTML block I have added to a page I created in SP, Here is the HTML I have in block

Code: [Select]

	<title>Slides, A Slideshow</title>
	
	<link rel="stylesheet" href="..css/global.css">
	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script src="js/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: 'img/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
	</script>
</head>
<body>
	<div id="container">
		<div id="slides">
			<img src="img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
			<div id="slides">
				<div class="slides_container">
					<div class="slide">
						<a href="http://www.graphicjunki.com/forum/img/slide-1.jpg" title="Slide 1" target="_blank">
						<img src="img/slide-1.jpg" width="570" height="270" alt="Abstract One"></a>
						<div class="caption" style="bottom:0">
							<p>All Designs Created by S@ffz</p>
						</div>
					</div>
					<div class="slide">
						<a href="http://www.graphicjunki.com/forum/img/slide-2.jpg" title="Slide 2" target="_blank">
						<img src= "img/slide-2.jpg" width="570" height="270" alt="Abstract two"></a>
						<div class="caption">
							<p>The strongest nation on earth is your imagi-nation</p>
						</div>
					</div>
					<div class="slide">
						<a href="http://www.graphicjunki.com/forum/img/slide-3.jpg" title="Slide 3" target="_blank">
						<img src="img/slide-3.jpg" width="570" height="270" alt="Abstract Three"></a>
						<div class="caption">
							<p>Paint objects as you think them, not as you see them</p>
						</div>
					</div>
					<div class="slide">
						<a href="http://www.graphicjunki.com/forum/img/slide-4.jpg" title="Slide 4" target="_blank">
						<img src="img/slide-4.jpg" width="570" height="270" alt="Abstract Four"></a>
						<div class="caption">
							<p>The Possible's slow fuse is lit By the Imagination.</p>
						</div>
					</div>
					<div class="slide">
						<a href="http://www.graphicjunki.com/forum/img/slide-5.jpg" title="Slide 5" target="_blank">
						<img src="img/slide-5.jpg" width="570" height="270" alt="Abstract Five"></a>
						<div class="caption">
							<p>It's not what you look at that matters, it's what you see.</p>
						</div>
					</div>
					<div class="slide">
						<a href="http://www.graphicjunki.com/forum/img/slide-6.jpg" title="Slide 6!" target="_blank">
						<img src="img/slide-6.jpg" width="570" height="270" alt="Abstract Six"></a>
						<div class="caption">
							<p>Perhaps imagination is only intelligence having fun</p>
						</div>
					</div>
					<div class="slide">
						<a href="http://www.graphicjunki.com/forum/img/slide-7.jpg" title="Slide 7" target="_blank">
						<img src="img/slide-7.jpg" width="570" height="270" alt="Abstract Seven!"></a>
						<div class="caption">
							<p>When patterns are broken, new worlds emerge</p>
						</div>
					</div>
				</div>
				<a href="http://www.graphicjunki.com/forum/img/arrow-prev.png" class="prev">
				<img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
				<a href="http://www.graphicjunki.com/forum/img/arrow--next.png" class="next">
				<img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
			</div>
			<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
		</div>
		<div id="footer">
			<p>Abstract Fractals Created by S@ffz © 2010 <a href="http://www.graphicjunki.com/forum/" target="_blank">Graphic Junki</a>.</p>
			<p>Slider design by Orman Clark at <a href="http://www.premiumpixels.com/" target="_blank">Premium Pixels</a>. You can donwload the source PSD at <a href="http://www.premiumpixels.com/clean-simple-image-slider-psd/" target="_blank">Premium Pixels</a></p>
			<p>&copy; 2010 <a href="http://nathansearles.com" target="_blank">Nathan Searles</a>. All rights reserved. Slides is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache license</a>.</p>
		</div>
	</div>
</body>

All The files and folders are on the server but Imust bbe missing somethink some where.

Any help with this would be very much appreciated.

Thank you

Have a Great Weekend Everyone

Kryzen · « **Reply #1 on:** September 17, 2011, 04:35:12 AM »

Have you uploaded all js files? Have a nice weekend

Dr. Deejay

S@ffz · « **Reply #2 on:** September 17, 2011, 05:05:03 AM »

yes all files are on the server

S@ffz · « **Reply #3 on:** September 17, 2011, 05:12:02 AM »

I have finally done it.

Thanks Deejay for replying

SOLVED

Kryzen · « **Reply #4 on:** September 17, 2011, 05:16:55 AM »

No problem, what fixed it?

Simple Portal Archived Forum

User Info

Who's Online

Shoutbox

Team Blog

Recent Posts

Author Topic: jQuery slider in HTLM Block (Read 5192 times)

S@ffz

jQuery slider in HTLM Block

Kryzen

Re: jQuery slider in HTLM Block

S@ffz

Re: jQuery slider in HTLM Block

S@ffz

Re: jQuery slider in HTLM Block

Kryzen

Re: jQuery slider in HTLM Block