ez.no automatic rotate tab menu

Author Message

Rafael Martin

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

Christophe Condomines

Friday 22 May 2009 2:40:27 am

Hi Rafael,

Yes this is a basic use of yahoo js library. The different images are all present in the html page, hided by CSS and then the js start to hide and show each image, step by step.

More info there: http://developer.yahoo.com/yui/

Best regards

Microblau SL
http://www.microblau.net

Andreas Kaiser

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/

Cori Roberts

Monday 03 August 2009 1:43:05 am

Is there some documentation on what to do with this script...such as where it goes and how to configure it so that it picks up your content?

Thanks!

Heath

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

Cori Roberts

Monday 03 August 2009 12:40:22 pm

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

No idea what the yui/jquery/js + ez is, lol. I suppose I have some research to do.

Cori Roberts

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

Powered by eZ Publish™ CMS Open Source Web Content Management. Copyright © 1999-2014 eZ Systems AS (except where otherwise noted). All rights reserved.