Author Topic: Image rotator added but not working (Read 3721 times)

Nick · « **on:** September 01, 2011, 04:57:28 PM »

I recently added a image rotator to my simpleportal block and it display the rotator but it doesn't rotate.

The strange thing is that when i preview it on the block page it rotates. Then as soon as i add the block it doesn't.

Heres the rotator i am trying to use.

http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/

I have "style.css" and "/images/" upload to a folder called "featured-content-slider".

This is what my HTML block contains;

Code: [Select]

<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" type="text/css" href="/featured-content-slider/style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> 
<script type="text/javascript">
	$(document).ready(function(){
		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});
</script>
</head>
<body>
		<div id="featured" >
		  <ul class="ui-tabs-nav">
	        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="/featured-content-slider/images/image1-small.png" alt="" /><span>Gears of War 3 campaign trailer</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="/featured-content-slider/images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="/featured-content-slider/images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="/featured-content-slider/images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
	      </ul>

	    <!-- First Content -->
	    <div id="fragment-1" class="ui-tabs-panel" style="">
			<img src="/featured-content-slider/images/image1.png" alt="" width="163%"/>
			 <div class="info" >
				<h2><center><a href="#" >Gears of War 3 campaign trailer</a></center></h2>
				<p><font color="#FFF">Epic games have released their latest video on the new Gears of War 3 campaign...</font>&nbsp;<a href="#" >Read more</a></p>
			 </div>
	    </div>

	    <!-- Second Content -->
	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="/featured-content-slider/images/image2.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
				<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
			 </div>
	    </div>

	    <!-- Third Content -->
	    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="/featured-content-slider/images/image3.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >35 Amazing Logo Designs</a></h2>
				<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
	         </div>
	    </div>

	    <!-- Fourth Content -->
	    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="/featured-content-slider/images/image4.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
				<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
	         </div>
	    </div>

		</div>
	</div>


</body>

I'm completely stuck and have no idea what is wrong, could someone please help?

deansmar · « **Reply #1 on:** September 02, 2011, 02:36:05 AM »

i would imagine you using a stand alone rotator??
in other words, not connected to any gallery or post in your forum..?

this is the rotator i use...;
placed in a Custom PHP block..

Code: [Select]

echo ' <p align="center"> ';
$images = array(    
'http://yourwebsite/images/image1.JPG',
'http://yourwebsite/images/image2.JPG',
'http://yourwebsite/images/image3.JPG',
'http://yourwebsite/images/image4.JPG',
'http://yourwebsite/images/image5.JPG',
'http://yourwebsite/images/image6.JPG',
'http://yourwebsite/images/image7.JPG',
'http://yourwebsite/images/image8.JPG',
'http://yourwebsite/images/image9.JPG',

);
$delay = 5;
$num_images = count($images);
echo '
<img id="slideshow" align="center" HEIGHT="295" WIDTH="450" src="" />
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[ 
var images = [';
for ($i = 0; $i < $num_images; $i++)    
   echo '["', $images[$i], '"]', ($i == $num_images - 1) ? '' : ',';    
   echo ']; 
   var current_image = 0;
    var num_images = ', $num_images, ';
    var timer;    

function changeImage()   
 { 
       if (current_image == num_images)            
           current_image = 0;       
           document.getElementById("slideshow").src = images[current_image];        
          current_image = current_image + 1;       
           var timer = setTimeout("changeImage();", ', $delay * 1000, ');
    }    
changeImage(); 
   // ]]></script>';

Nick · « **Reply #2 on:** September 02, 2011, 06:54:24 AM »

Yes it's standalone, here's an image of what it looks like.

I want to use this one as it suits my layout.

Simple Portal Archived Forum

User Info

Who's Online

Shoutbox

Team Blog

Recent Posts

Author Topic: Image rotator added but not working (Read 3721 times)

Nick

Image rotator added but not working

deansmar

Re: Image rotator added but not working

Nick

Re: Image rotator added but not working