News module (summary) in jQuery content slider

[vzw klemtoon]

I need some help with: http://www.losttheoryfestival.com/test
I have a few questions:

- I want to make some kind of news slider with the four latest news items
- After clicking the title (right) you get the news summary on the left
- I tried calling '<h3 id="NewsPostDetailTitle">{$entry->title|cms_escape:htmlall}</h3>' but I got the whole summary in the right button..., the same for: {$entry->title}
- how can I call a specific News summary title like 'title-of-first-news-item' to place instead of (see code) 'News title', 'News title 2', 'News title 3', ... ?
- what should i place instead of "#fragment-1" to make the right News summary appear?
- how to call a specific News image for left background?

Code: Select all

      
<div id="content">
		<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="images/image1-small.jpg" alt="" /><span>News title</span></a></li>
	        
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>News title 2</span></a></li>
	        
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>News title 3</span></a></li>

	        
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>News title 4</span></a></li>
	      </ul>

	    <!-- First Content -->
	    <div id="fragment-1" class="ui-tabs-panel" style="">
			<img src="images/image1.jpg" alt="" />
			 <div class="info" >
<p>{news  start="0" number="1" moretext="read more"}</p>
			 </div>
	    </div>

	    <!-- Second Content -->
	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="images/image2.jpg" alt="" />
			 <div class="info" >

<p>{news  start="1" number="1" moretext="read more"}</p>
			 </div>
	    </div>

	    <!-- Third Content -->
	    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="images/image3.jpg" alt="" />

			 <div class="info" >
				<p>{news  start="2" number="1" moretext="read more"}</p>
	         </div>
	    </div>

	    <!-- Fourth Content -->
	    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">

			<img src="images/image4.jpg" alt="" />
			 <div class="info" >

				<p>{news  start="3" number="1" moretext="read more"}</p>
	         </div>
	    </div>

		</div>

	</div>


      </div>

here the css:

Code: Select all

#featured{ 
	width:100%; 
	padding-right:0px; 
	position:relative; 
	border:1px solid #000; 
	height:250px; 
	background:#fff;
}
#featured ul.ui-tabs-nav{ 
	position:absolute; 
	top:0; left:70%; 
	list-style:none; 
	padding:0; margin:0; 
	width:30%; 
}
#featured ul.ui-tabs-nav li{ 
	padding:1px 0; padding-left:13px;  
	font-size:12px; 
	color:#666; 
}
#featured ul.ui-tabs-nav li img{ 
	float:left; margin:2px 5px; 
	background:#fff; 
	padding:2px; 
	border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{ 
	font-size:11px; font-family:Verdana; 
	line-height:18px; 
}
#featured li.ui-tabs-nav-item a{ 
	display:block; 
	height:60px; 
	color:#333;  background:#fff; 
	line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{ 
	background:#f2f2f2; 
}
#featured li.ui-tabs-selected{ 
	background:url('images/selected-item.gif') top left no-repeat;  
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
	background:#ccc; 
}
#featured .ui-tabs-panel{ 
	width:70%; height:250px; 
	background:#999; position:relative;
}
#featured .ui-tabs-panel .info{ 
	position:absolute; 
	top: 0px; left:0; 
	height:100%; 
	background: url('images/transparent-bg.png'); 
}
#featured .info h2{ 
	font-size:18px; font-family:Georgia, serif; 
	color:#fff; padding:5px; margin:0;
	overflow:hidden; 
}
#featured .info p{ 
	margin:0 5px; 
	font-family:Verdana; font-size:11px; 
	line-height:15px; color:#f0f0f0;
}
#featured .info a{ 
	text-decoration:none; 
	color:#fff; 
}
#featured .info a:hover{ 
	text-decoration:underline; 
}
#featured .ui-tabs-hide{ 
	display:none; 
}

and the jQuery:

Code: Select all

{literal}
<__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>

{/literal}

Thanks in advance!

[uniqu3]

I didn't study your code but i did write a blog post about news rotator you can check this link http://www.i-do-this.com/blog/21/Create ... cle-plugin

To get you jquery plugin running you will need to adjust News summary Templates as the js code you posted looks for #featured ul and your News is wrapper in div's.

Also i see in your source code you call jQuery frame work twice this will cause you problems and probably some jQuery plugins will not work.

Number 1:

Code: Select all

<__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> 

Number 2:

Code: Select all

<__script__ src="lib/jquery.js" type="text/javascript"></__script> 
<__script__ src="lib/s3Slider.js" type="text/javascript"></__script> 
<__script__ type="text/javascript"> 
	$(document).ready(function() {
	   $('#simpleslider').s3Slider({
	      timeOut: 5000	   });
	});
</__script>

[vzw klemtoon]

Ok. cycle plugin is working. Unfortunately it makes simleslider not to work... is there a jQuery conflict?

thanks in advance

[uniqu3]

As already wrote above you are using jQuery Framework twice, you only need to load it once in your template so either remove jquery.js where you call s3Slider or remove jquery-1.4.2.js on the line before cycle plugin.