Forums / General / ez.no automatic rotate tab menu

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

eZ debug

Timing: Jan 30 2025 21:10:30
Script start
Timing: Jan 30 2025 21:10:30
Module start 'content'
Timing: Jan 30 2025 21:10:30
Module end 'content'
Timing: Jan 30 2025 21:10:31
Script end

Main resources:

Total runtime0.3339 sec
Peak memory usage8,192.0000 KB
Database Queries141

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0099 587.9219370.3047
Module start 'content' 0.00990.0163 958.22661,013.5000
Module end 'content' 0.02630.3076 1,971.72663,901.8359
Script end 0.3339  5,873.5625 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00421.2670200.0002
Check MTime0.00130.3803200.0001
Mysql Total
Database connection0.00070.202710.0007
Mysqli_queries0.231769.37821410.0016
Looping result0.00150.44191390.0000
Template Total0.307192.010.3071
Template load0.00080.229410.0008
Template processing0.306491.740810.3064
Override
Cache load0.00050.142910.0005
Sytem overhead
Fetch class attribute can translate value0.00210.624710.0021
XML
Image XML parsing0.00030.091610.0003
General
dbfile0.01143.4053200.0006
String conversion0.00000.002130.0000
Note: percentages do not add up to 100% because some accumulators overlap

CSS/JS files loaded with "ezjscPacker" during request:

CacheTypePacklevelSourceFiles
CSS0extension/community/design/community/stylesheets/ext/jquery.autocomplete.css
extension/community_design/design/suncana/stylesheets/scrollbars.css
extension/community_design/design/suncana/stylesheets/tabs.css
extension/community_design/design/suncana/stylesheets/roadmap.css
extension/community_design/design/suncana/stylesheets/content.css
extension/community_design/design/suncana/stylesheets/star-rating.css
extension/community_design/design/suncana/stylesheets/syntax_and_custom_tags.css
extension/community_design/design/suncana/stylesheets/buttons.css
extension/community_design/design/suncana/stylesheets/tweetbox.css
extension/community_design/design/suncana/stylesheets/jquery.fancybox-1.3.4.css
extension/bcsmoothgallery/design/standard/stylesheets/magnific-popup.css
extension/sevenx/design/simple/stylesheets/star_rating.css
extension/sevenx/design/simple/stylesheets/libs/fontawesome/css/all.min.css
extension/sevenx/design/simple/stylesheets/main.v02.css
extension/sevenx/design/simple/stylesheets/main.v02.res.css
JS0extension/ezjscore/design/standard/lib/yui/3.17.2/build/yui/yui-min.js
extension/ezjscore/design/standard/javascript/jquery-3.7.0.min.js
extension/community_design/design/suncana/javascript/jquery.ui.core.min.js
extension/community_design/design/suncana/javascript/jquery.ui.widget.min.js
extension/community_design/design/suncana/javascript/jquery.easing.1.3.js
extension/community_design/design/suncana/javascript/jquery.ui.tabs.js
extension/community_design/design/suncana/javascript/jquery.hoverIntent.min.js
extension/community_design/design/suncana/javascript/jquery.popmenu.js
extension/community_design/design/suncana/javascript/jScrollPane.js
extension/community_design/design/suncana/javascript/jquery.mousewheel.js
extension/community_design/design/suncana/javascript/jquery.cycle.all.js
extension/sevenx/design/simple/javascript/jquery.scrollTo.js
extension/community_design/design/suncana/javascript/jquery.cookie.js
extension/community_design/design/suncana/javascript/ezstarrating_jquery.js
extension/community_design/design/suncana/javascript/jquery.initboxes.js
extension/community_design/design/suncana/javascript/app.js
extension/community_design/design/suncana/javascript/twitterwidget.js
extension/community_design/design/suncana/javascript/community.js
extension/community_design/design/suncana/javascript/roadmap.js
extension/community_design/design/suncana/javascript/ez.js
extension/community_design/design/suncana/javascript/ezshareevents.js
extension/sevenx/design/simple/javascript/main.js

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1pagelayout.tpl<No override>extension/sevenx/design/simple/templates/pagelayout.tplEdit templateOverride template
 Number of times templates used: 1
 Number of unique templates used: 1

Time used to render debug report: 0.0001 secs