my code will be based on publisher,so you dont have to change anything manualy with each update of your website.
the standard way to add it to your theme is the following :
- download the effect from
here then unzip the folder
- put the js folder inside your theme
- edit your theme.html , and in the js area put this code :
le="color: #000000"><?php <script type="text/javascript" src="<{$xoops_imageurl}>js/jquery-1.2.6.min.js"> </script> <script type="text/javascript" src="<{$xoops_imageurl}>js/jquery-easing-1.3.pack.js"> </script> <script type="text/javascript" src="<{$xoops_imageurl}>js/jquery-easing-compatibility.1.2.pack.js"> </script> <script type="text/javascript" src="<{$xoops_imageurl}>js/coda-slider.1.1.1.pack.js"> </script>
also in the theme.html , and before the </head> immediatly put this code :
le="color: #000000"><?php <script type="text/javascript"> var theInt = null; var $crosslink, $navthumb; var curclicked = 0; theInterval = function(cur){ clearInterval(theInt); if( typeof cur != 'undefined' ) curclicked = cur; $crosslink.removeClass("active-thumb"); $navthumb.eq(curclicked).parent().addClass("active-thumb"); $(".stripNav ul li a").eq(curclicked).trigger('click'); theInt = setInterval(function(){ $crosslink.removeClass("active-thumb"); $navthumb.eq(curclicked).parent().addClass("active-thumb"); $(".stripNav ul li a").eq(curclicked).trigger('click'); curclicked++; if( 6 == curclicked ) curclicked = 0; }, 3000); }; $(function(){ $("#main-photo-slider").codaSlider(); $navthumb = $(".nav-thumb"); $crosslink = $(".cross-link"); $navthumb .click(function() { var $this = $(this); theInterval($this.parent().attr('href').slice(1) - 1); return false; }); theInterval(); }); </script>
now it's time to put the slider, create a folder inside your theme for images and call it images or img, as you want.
then edit again your theme.html, choose where you want to put the slider.
past this code please , I xoopsified it to you , it means instead src="images/abc.jpg" , I put the xoops link :="<{xoImgUrl images/abc.jpg}>" :
use this code please :
le="color: #000000"><?php <div id="page-wrap"> <div class="slider-wrap"> <div id="main-photo-slider" class="csw"> <div class="panelContainer"> <div class="panel" title="Panel 1"> <div class="wrapper"> <img src="<{xoImgUrl images/tempphoto-1.jpg}>" alt="temp" /> <div class="photo-meta-data"> Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br /> <span>"Free Tibet" Protest at the Olympic Torch Rally</span> </div> </div> </div> <div class="panel" title="Panel 2"> <div class="wrapper"> <img src="<{xoImgUrl images/tempphoto-2.jpg}>" alt="temp" /> <div class="photo-meta-data"> Chicago Bears at Seattle Seahawks<br /> <span>Fifth field goal, overtime win for the Seahawks</span> </div> </div> </div> <div class="panel" title="Panel 3"> <div class="wrapper"> <img src="<{xoImgUrl images/scotch-egg.jpg}>" alt="scotch egg" class="floatLeft"/> <h1>How to Cook a Scotch Egg</h1> <ul> <li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li> <li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li> <li>1/2 cup AP flour</li> <li>1-2 eggs, beaten</li> <li>3/4 cup panko-style bread crumbs</li> <li>Vegetable oil for frying</li> </ul> </div> </div> <div class="panel" title="Panel 4"> <div class="wrapper"> <img src="<{xoImgUrl images/tempphoto-4.jpg}>" alt="temp" /> <div class="photo-meta-data"> A Poem by Shel Silverstein<br /> <span>Falling Up</span> </div> </div> </div> <div class="panel" title="Panel 5"> <div class="wrapper"> <img src="<{xoImgUrl images/tempphoto-5.jpg}>" alt="temp" /> <div class="photo-meta-data"> New Video on CSS-Tricks<br /> <span>Using Wufoo for Web Forms</span> </div> </div> </div> <div class="panel" title="Panel 6"> <div class="wrapper"> <h1>A Tale of Two Cities</h1> <p><em>Charles Dickins</em></p> <blockquote>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</blockquote> </div> </div> </div> </div> <a href="#1" class="cross-link active-thumb"><img src="<{xoImgUrl images/tempphoto-1thumb.jpg}>" class="nav-thumb" alt="temp-thumb" /></a> <div id="movers-row"> <div><a href="#2" class="cross-link"><img src="<{xoImgUrl images/tempphoto-2thumb.jpg}>" class="nav-thumb" alt="temp-thumb" /></a></div> <div><a href="#3" class="cross-link"><img src="<{xoImgUrl images/tempphoto-3thumb.jpg}>" class="nav-thumb" alt="temp-thumb" /></a></div> <div><a href="#4" class="cross-link"><img src="<{xoImgUrl images/tempphoto-4thumb.jpg}>" class="nav-thumb" alt="temp-thumb" /></a></div> <div><a href="#5" class="cross-link"><img src="<{xoImgUrl images/tempphoto-5thumb.jpg}>" class="nav-thumb" alt="temp-thumb" /></a></div> <div><a href="#6" class="cross-link"><img src="<{xoImgUrl images/tempphoto-6thumb.jpg}>" class="nav-thumb" alt="temp-thumb" /></a></div> </div> </div> </div>
and the final step is the css :
- paste this code to your style.css used in your theme
le="color: #000000"><?php /* UTILITY STYLES */ .floatLeft { float: left; margin-right: 10px;} .floatRight { float: right; } .clear { clear: both; } a { outline: none; } /* PAGE STRUCTURE */ #page-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px; background: url(images/bg.png) top center; } /* TYPOGRAPHY */ ul { list-style: square inside; } a, a:visited { color: #729dff; text-decoration: none; } a:hover, a:active { color: white; } blockquote { padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px; font-family: Georgia, serif; font-style: italic; margin-top: 10px;} /* SLIDER */ .slider-wrap { width: 419px; position: absolute; top: 87px; left: 40px; } .stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; } .stripViewer { position: relative; overflow: hidden; width: 419px; height: 285px; } .stripViewer .panelContainer { position: relative; left: 0; top: 0; } .stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; } .stripNavL, .stripNavR, .stripNav { display: none; } .nav-thumb { border: 1px solid black; margin-right: 5px; } #movers-row { margin: -43px 0 0 62px; } #movers-row div { width: 20%; float: left; } #movers-row div a.cross-link { float: right; } .photo-meta-data { background: url(images/transpBlack.png); padding: 10px; height: 30px; margin-top: -50px; position: relative; z-index: 9999; color: white; } .photo-meta-data span { font-size: 13px; } .cross-link { display: block; width: 62px; margin-top: -14px; position: relative; padding-top: 15px; z-index: 9999; } .active-thumb { background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }
and dont forget to copy all icons and pictures inside the FeaturedContentSlider/images into your images folder inside the theme.
- clear the cach, and that's it.
by this way each time you add a new article, you have to create an image and a thumbnail with the same sizes used in the slider, then upload them to yourtheme/images, and change the name if necessary also write the headlines of the article under the class into the div in each panel.
my way , or what I am working on, is to make this slider woking automaticly with publisher, and as I told you it will be online soon.
try this code and let me know the result
