phpwcms Support Forum

Code: Select all

#featured
  div#fragment-1 > img.big+img.thumb.hide+div.info
  div#fragment-5 > img.big+img.thumb.hide+div.info

Code: Select all

#featured
  ul > li > img.thumb
  div#fragment-1 > img.big+div.info
  div#fragment-5 > img.big+div.info

Code: Select all

[PHP]
initJSPlugin('featured_slider');
$GLOBALS['block']['custom_htmlhead']['jqueryui'] = getJavaScriptSourceLink(html_specialchars('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js'));
[/PHP]

Code: Select all

<!-- JS: featured_slider -->
<!-- JS: ui-1.8.9.custom.min -->

Code: Select all

<!--TEASER_HEAD_START//-->
<div id="featured">
[PHP]
initJSPlugin('featured_slider');
$GLOBALS['block']['custom_htmlhead'][md5($js)] = getJavaScriptSourceLink(html_specialchars('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js'));
[/PHP]

<!--TEASER_HEAD_END//-->

<!--TEASER_ENTRY_START//-->
[IMAGE]
<div id="fragment-{ARTICLEID}" class="ui-tabs-panel" title="{SUMMARY}">
	<img src="img/cmsimage.php/435x249x1/{THUMB_ID}" width="435" height="249" alt="" />
	<img class="hide" src="img/cmsimage.php/80x63x1/{THUMB_ID}" width="80" height="63" alt="" />
	 <div class="info" >
		<h2><a href="{ARTICLELINK}">{TITLE}</a></h2>
		<p>{SUBTITLE} &raquo;<a href="{ARTICLELINK}">read more</a></p>
	 </div>
</div>
[/IMAGE]
<!--TEASER_ENTRY_END//-->

<!--TEASER_SPACER_START//-->

<!--TEASER_SPACER_END//-->

<!--TEASER_FOOTER_START//-->
</div>
[PHP]
$GLOBALS['block']['custom_htmlhead']['featured_slider_css']="
<style>
/* -- Featured - contentslider
 * @author marcus@localhorst
 * based on an idea found here:
 * http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/
 * */

#featured{
	padding-right:265px;
	position:relative;
	border:5px solid #ccc;
	height:249px;
	background:#fff;
	margin-bottom:2em;
}
#featured ul.ui-tabs-nav{
	position:absolute;
	top:0;
	left:435px;
	list-style:none;
	padding:0;
	margin:0;
	width:265px;
}
#featured ul.ui-tabs-nav li{
	padding: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;
	line-height:18px;
}
#featured li.ui-tabs-nav-item a{
	display:block;
	height:73px;
	color:#333;
	background:#fff;
	line-height:20px;
	padding:5px 0;
}
#featured li.ui-tabs-nav-item a:hover{
	background:#f2f2f2;
}
#featured li.ui-tabs-selected{
	background:url('../inc_layout/contentslider/selected-item.gif') center left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
	background:#ccc;
}
#featured .ui-tabs-panel{
	width:400px; height:250px;
	background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
	position:absolute;
	top:179px; left:0;
	height:70px;
	background: url('../inc_layout/contentslider/transparent-bg.png');
	overflow:hidden;
	min-width:60%;
}
#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;
}

</style>
";
[/PHP]
<!--TEASER_FOOTER_END//-->]

Code: Select all

  <script type="text/javascript" src="template/lib/jquery/plugin/jquery.featured_slider.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

Code: Select all

[PHP]
$GLOBALS['block']['custom_htmlhead']['jqueryui'] = getJavaScriptSourceLink('https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js');
initJSPlugin('featured_slider');
[/PHP]