ez.no automatic rotate tab menu

Friday 22 May 2009 2:09:35 am

Hi All,
I am new in ez and need some help , for mi actual dev i need a block or component like the tabbed panel automatic rotate like ez.no home page.

it is based in YUI, o simple ccs + js?

are there some exemple to do this ?

Thanks in advance.
rafael martin

Tuesday 02 June 2009 3:53:15 am

Hi,

This can also be made with other js libraries like jquery and mootools, for example based on mootools: http://www.clientcide.com/wiki/cnet-libraries/08-layout/03-simplecarousel

There a lot of scripts based in different js libraries, perhaps the problem is to find how everyone calls them: carousel, slidebox, frontpage slideshow, etc

By the way, this is a script (http://www.frontpageslideshow.net/) originally for joomla but that has a php version compatible with various js libraries that we adapted for ez publish some time ago in this site: http://www.construidea.com/

eZ Partner in Madrid (Spain)
Web: http://www.atela.net/

Monday 03 August 2009 1:56:39 am

If your using yui/jquery/js + ez take a look at these extensions.

http://projects.ez.no/ezyui
http://projects.ez.no/ezjscore
http://projects.ez.no/ezyuicompressor
http://projects.ez.no/ezcore

Cheers,
Heath

Brookins Consulting | http://brookinsconsulting.com/
Certified | http://auth.ez.no/certification/verify/380350
Solutions | http://projects.ez.no/users/community/brookins_consulting
eZpedia community documentation project | http://ezpedia.org

Monday 03 August 2009 2:15:23 pm

Alriht, in finding a tutorial for adding this to a site it says to place this at the top of your html file:

**//
<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>
//*

Where might I find this .html file, and what is the path?

Also I have the following instructions:

//*
The Featured Content Structure

Now create a div with its contents as the tabs structured as a list and content corresponding to each tab within a separate div.
view plaincopy to clipboardprint?

1. <div id="featured" >
2. <ul class="ui-tabs-nav">
3. <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>15+ Excellent High Speed Photographs</span></a></li>
4. <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
5. <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
6. <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
7. </ul>
8. <!-- First Content -->
9. <div id="fragment-1" class="ui-tabs-panel" style="">
10. <img src="images/image1.jpg" alt="" />
11. <div class="info" >
12. <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
13. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
14. </div>
15. </div>
16. <!-- Second Content -->
17. <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
18. <img src="images/image2.jpg" alt="" />
19. <div class="info" >
20. <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
21. <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>
22. </div>
23. </div>
24. <!-- Third Content -->
25. <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
26. <img src="images/image3.jpg" alt="" />
27. <div class="info" >
28. <h2><a href="#" >35 Amazing Logo Designs</a></h2>
29. <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
30. </div>
31. </div>
32. <!-- Fourth Content -->
33. <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
34. <img src="images/image4.jpg" alt="" />
35. <div class="info" >
36. <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
37. <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>
38. </div>
39. </div>
40. </div>
//*

I assume this goes in the html file as well? And there is a CSS portion that goes into the CSS? Also a little shakey on the classes parts as well.

Guidance appreciated!
C