Ir para o conteúdo
DevilRocks92

Mudar de página tipo Slideshow

Mensagens Recomendadas

DevilRocks92

Boa tarde,

Eu estou a fazer um Webfolio e a minha ideia é alterar as páginas com slide como se fosse um slideshow, mas sem a mudança automática.

Isto é o que tenho até agora:

index.php

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>Basic jQuery Slider - Demo</title>
 <!-- bjqs.css contains the *essential* css needed for the slider to work -->
 <link rel="stylesheet" href="bjqs.css">
 <!-- some pretty fonts for this demo page - not required for the slider -->
 <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Open+Sans:300' rel='stylesheet' type='text/css'>
 <!-- demo.css contains additional styles used to set up this demo page - not required for the slider -->
 <link rel="stylesheet" href="demo.css">
 <!-- load jQuery and the plugin -->
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script src="js/bjqs-1.3.min.js"></script>
</head>
<body>
 <div id="header">
  <div id="logo">
   <img src="img/logo.png">
  </div>

  <div id="nav">
   <ul>
    <li><a href="#port">PORTFOLIO</a></li>
    <li><a href="#emp">SERVIÇOS</a></li>
    <li><a href="#cont">CONTACTOS</a></li>
   </ul>
  </div>
 </div>

 <div id="container">
  <!--  Outer wrapper for presentation only, this can be anything you like -->
  <div id="banner-fade">
   <!-- start Basic Jquery Slider -->
   <ul class="bjqs">
    <li id="port">
     <div id="portfolio">
      <a class="shadow"><img src="img/Prom.PT_Port - V2.png" /></a>
     </div>
    </li>
    <li id="emp">
     <div id="servicos">
      <img src="img/Servico_Page.png" />
      <div id="text">
       <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
        when an unknown printer took a galley of type and scrambled it to make a type
        specimen book. It has survived not only five centuries, but also the leap into
        electronic typesetting, remaining essentially unchanged. It was popularised in
        the 1960s with the release of Letraset sheets containing Lorem Ipsum.
       </p>
      </div>
     </div>
    </li>
    <li id="cont">
     <div id="contactos">
      <div id="info">
       <div id="map">
        <img src="img/Mapa.png" />
       </div>

       <div id="contact_form">
        <img src="img/Contactswindow.png" />
        <form>
         <input type="text" name="nome" value="NOME" class="text" style="color:#aaa" onfocus="if (this.value == 'NOME') {this.value = ''; this.style.color='#000'}" onblur="if (this.value == '') {this.value = 'NOME';  this.style.color='#aaa'}">
         <br/><br/>
         <input type="email" name="email" value="EMAIL" class="text2" style="color:#aaa" onfocus="if (this.value == 'EMAIL') {this.value = ''; this.style.color='#000'}" onblur="if (this.value == '') {this.value = 'EMAIL';  this.style.color='#aaa'}">
         <input type="text" name="contacto" value="CONTACTO" class="text2" style="color:#aaa" onfocus="if (this.value == 'CONTACTO') {this.value = ''; this.style.color='#000'}" onblur="if (this.value == '') {this.value = 'CONTACTO';  this.style.color='#aaa'}">
         <br/><br/>
         <textarea rows="13" class="textarea" style="color:#aaa" onfocus="if (this.value == 'MENSAGEM') {this.value = ''; this.style.color='#000'}" onblur="if (this.value == '') {this.value = 'MENSAGEM';  this.style.color='#aaa'}">MENSAGEM<textarea>
         <br/><br/>
         <input type="image" src="img/Enviar_Button.png" alt="Submit" id="submit_img" />
        </form>
       </div>
      </div>
     </div>
    </li>
   </ul>
   <!-- end Basic jQuery Slider -->
  </div>
  <script class="secret-source">
   jQuery(document).ready(function($) {
    $('#banner-fade').bjqs({
     height      : 565,
     width       : 1200,
     responsive  : true
    });
   });
  </script>
 </div>
</body>
</html>

bjqs.js

/*
* Basic jQuery Slider plug-in v.1.3
*
* http://www.basic-slider.com
*
* Authored by John Cobb
* http://www.johncobb.name
* @john0514
*
* Copyright 2011, John Cobb
* License: GNU General Public License, version 3 (GPL-3.0)
* http://www.opensource.org/licenses/gpl-3.0.html
*
*/
;(function($) {
   "use strict";
   $.fn.bjqs = function(o) {

       // slider default settings
       var defaults        = {
           // w + h to enforce consistency
           width           : 700,
           height          : 300,
           // transition values
           animtype        : 'slide',
           animduration    : 450,      // length of transition
           animspeed       : 4000,     // delay between transitions
           automatic       : false,     // enable/disable automatic slide rotation
           // control and marker configuration
           showcontrols    : true,     // enable/disable next + previous UI elements
           centercontrols  : true,     // vertically center controls
           nexttext        : 'Next',   // text/html inside next UI element
           prevtext        : 'Prev',   // text/html inside previous UI element
           showmarkers     : true,     // enable/disable individual slide UI markers
           centermarkers   : true,     // horizontally center markers
           // interaction values
           keyboardnav     : true,     // enable/disable keyboard navigation
           hoverpause      : true,     // enable/disable pause slides on hover
           // presentational options
           usecaptions     : true,     // enable/disable captions using img title attribute
           randomstart     : false,     // start from a random slide
           responsive      : false     // enable responsive behaviour
       };
       // create settings from defauls and user options
       var settings        = $.extend({}, defaults, o);
       // slider elements
       var $wrapper        = this,
           $slider         = $wrapper.find('ul.bjqs'),
           $slides         = $slider.children('li'),
           // control elements
           $c_wrapper      = null,
           $c_fwd          = null,
           $c_prev         = null,
           // marker elements
           $m_wrapper      = null,
           $m_markers      = null,
           // elements for slide animation
           $canvas         = null,
           $clone_first    = null,
           $clone_last     = null;
       // state management object
       var state           = {
           slidecount      : $slides.length,   // total number of slides
           animating       : false,            // bool: is transition is progress
           paused          : false,            // bool: is the slider paused
           currentslide    : 1,                // current slide being viewed (not 0 based)
           nextslide       : 0,                // slide to view next (not 0 based)
           currentindex    : 0,                // current slide being viewed (0 based)
           nextindex       : 0,                // slide to view next (0 based)
           interval        : null              // interval for automatic rotation
       };
       var responsive      = {
           width           : null,
           height          : null,
           ratio           : null
       };
       // helpful variables
       var vars            = {
           fwd             : 'forward',
           prev            : 'previous'
       };

       // run through options and initialise settings
       var init = function() {
           // differentiate slider li from content li
           $slides.addClass('bjqs-slide');
           // conf dimensions, responsive or static
           if( settings.responsive ){
               conf_responsive();
           }
           else{
               conf_static();
           }
           // configurations only avaliable if more than 1 slide
           if( state.slidecount > 1 ){
               // enable random start
               if (settings.randomstart){
                   conf_random();
               }
               // create and show controls
               if( settings.showcontrols ){
                   conf_controls();
               }
               // create and show markers
               if( settings.showmarkers ){
                   conf_markers();
               }
               // enable slidenumboard navigation
               if( settings.keyboardnav ){
                   conf_keynav();
               }
               // enable pause on hover
               if (settings.hoverpause && settings.automatic){
                   conf_hoverpause();
               }
               // conf slide animation
               if (settings.animtype === 'slide'){
                   conf_slide();
               }
           } else {
               // Stop automatic animation, because we only have one slide!
               settings.automatic = false;
           }
           if(settings.usecaptions){
               conf_captions();
           }
           // TODO: need to accomodate random start for slide transition setting
           if(settings.animtype === 'slide' && !settings.randomstart){
               state.currentindex = 1;
               state.currentslide = 2;
           }
           // slide components are hidden by default, show them now
           $slider.show();
           $slides.eq(state.currentindex).show();
           // Finally, if automatic is set to true, kick off the interval
           if(settings.automatic){
               state.interval = setInterval(function () {
                   go(vars.fwd, false);
               }, settings.animspeed);
           }
       };
       var conf_responsive = function() {
           responsive.width    = $wrapper.outerWidth();
           responsive.ratio    = responsive.width/settings.width,
           responsive.height   = settings.height * responsive.ratio;
           if(settings.animtype === 'slide'){
               // initial setup
               $slides.css({
                   'height'        : settings.height,
                   'width'         : '100%'
               });
               $slides.children('img').css({
                   'height'        : settings.height,
                   'width'         : '100%'
               });
               $slider.css({
                   'height'        : settings.height,
                   'width'         : '100%'
               });
               $wrapper.css({
                   'height'        : settings.height,
                   'max-width'     : settings.width,
                   'position'      : 'relative'
               });
               if(responsive.width < settings.width){
                   $slides.css({
                       'height'        : responsive.height
                   });
                   $slides.children('img').css({
                       'height'        : responsive.height
                   });
                   $slider.css({
                       'height'        : responsive.height
                   });
                   $wrapper.css({
                       'height'        : responsive.height
                   });
               }
               $(window).resize(function() {
                   // calculate and update dimensions
                   responsive.width    = $wrapper.outerWidth();
                   responsive.ratio    = responsive.width/settings.width,
                   responsive.height   = settings.height * responsive.ratio;
                   $slides.css({
                       'height'        : responsive.height
                   });
                   $slides.children('img').css({
                       'height'        : responsive.height
                   });
                   $slider.css({
                       'height'        : responsive.height
                   });
                   $wrapper.css({
                       'height'        : responsive.height
                   });
               });
           }
           if(settings.animtype === 'slide'){
               // initial setup
               $slides.css({
                   'height'        : settings.height,
                   'width'         : settings.width
               });
               $slides.children('img').css({
                   'height'        : settings.height,
                   'width'         : settings.width
               });
               $slider.css({
                   'height'        : settings.height,
                   'width'         : settings.width * settings.slidecount
               });
               $wrapper.css({
                   'height'        : settings.height,
                   'max-width'     : settings.width,
                   'position'      : 'relative'
               });
               if(responsive.width < settings.width){
                   $slides.css({
                       'height'        : responsive.height
                   });
                   $slides.children('img').css({
                       'height'        : responsive.height
                   });
                   $slider.css({
                       'height'        : responsive.height
                   });
                   $wrapper.css({
                       'height'        : responsive.height
                   });
               }
               $(window).resize(function() {
                   // calculate and update dimensions
                   responsive.width    = $wrapper.outerWidth(),
                   responsive.ratio    = responsive.width/settings.width,
                   responsive.height   = settings.height * responsive.ratio;
                   $slides.css({
                       'height'        : responsive.height,
                       'width'         : responsive.width
                   });
                   $slides.children('img').css({
                       'height'        : responsive.height,
                       'width'         : responsive.width
                   });
                   $slider.css({
                       'height'        : responsive.height,
                       'width'         : responsive.width * settings.slidecount
                   });
                   $wrapper.css({
                       'height'        : responsive.height
                   });
                   $canvas.css({
                       'height'        : responsive.height,
                       'width'         : responsive.width
                   });
                   resize_complete(function(){
                       go(false,state.currentslide);
                   }, 200, "some unique string");
               });
           }
       };
       var resize_complete = (function () {

           var timers = {};

           return function (callback, ms, uniqueId) {
               if (!uniqueId) {
                   uniqueId = "Don't call this twice without a uniqueId";
               }
               if (timers[uniqueId]) {
                   clearTimeout (timers[uniqueId]);
               }
               timers[uniqueId] = setTimeout(callback, ms);
           };
       })();
       // enforce fixed sizing on slides, slider and wrapper
       var conf_static = function() {
           $slides.css({
               'height'    : settings.height,
               'width'     : settings.width
           });
           $slider.css({
               'height'    : settings.height,
               'width'     : settings.width
           });
           $wrapper.css({
               'height'    : settings.height,
               'width'     : settings.width,
               'position'  : 'relative'
           });
       };
       var conf_slide = function() {
           // create two extra elements which are clones of the first and last slides
           $clone_first    = $slides.eq(0).clone();
           $clone_last     = $slides.eq(state.slidecount-1).clone();
           // add them to the DOM where we need them
           $clone_first.attr({'data-clone' : 'last', 'data-slide' : 0}).appendTo($slider).show();
           $clone_last.attr({'data-clone' : 'first', 'data-slide' : 0}).prependTo($slider).show();
           // update the elements object
           $slides             = $slider.children('li');
           state.slidecount    = $slides.length;
           // create a 'canvas' element which is neccessary for the slide animation to work
           $canvas = $('<div class="bjqs-wrapper"></div>');
           // if the slider is responsive && the calculated width is less than the max width
           if(settings.responsive && (responsive.width < settings.width)){
               $canvas.css({
                   'width'     : responsive.width,
                   'height'    : responsive.height,
                   'overflow'  : 'hidden',
                   'position'  : 'relative'
               });
               // update the dimensions to the slider to accomodate all the slides side by side
               $slider.css({
                   'width'     : responsive.width * (state.slidecount + 2),
                   'left'      : -responsive.width * state.currentslide
               });
           }
           else {
               $canvas.css({
                   'width'     : settings.width,
                   'height'    : settings.height,
                   'overflow'  : 'hidden',
                   'position'  : 'relative'
               });
               // update the dimensions to the slider to accomodate all the slides side by side
               $slider.css({
                   'width'     : settings.width * (state.slidecount + 2),
                   'left'      : -settings.width * state.currentslide
               });
           }
           // add some inline styles which will align our slides for left-right sliding
           $slides.css({
               'float'         : 'left',
               'position'      : 'relative',
               'display'       : 'list-item'
           });
           // 'everything.. in it's right place'
           $canvas.prependTo($wrapper);
           $slider.appendTo($canvas);
       };
       var conf_controls = function() {
           // create the elements for the controls
           $c_wrapper  = $('<ul class="bjqs-controls"></ul>');
           $c_fwd      = $('<li class="bjqs-next"><a href="#" data-direction="'+ vars.fwd +'">' + settings.nexttext + '</a></li>');
           $c_prev     = $('<li class="bjqs-prev"><a href="#" data-direction="'+ vars.prev +'">' + settings.prevtext + '</a></li>');
           // bind click events
           $c_wrapper.on('click','a',function(e){
               e.preventDefault();
               var direction = $(this).attr('data-direction');
               if(!state.animating){
                   if(direction === vars.fwd){
                       go(vars.fwd,false);
                   }
                   if(direction === vars.prev){
                       go(vars.prev,false);
                   }
               }
           });
           // put 'em all together
           $c_prev.appendTo($c_wrapper);
           $c_fwd.appendTo($c_wrapper);
           $c_wrapper.appendTo($wrapper);
           // vertically center the controls
           if (settings.centercontrols) {
               $c_wrapper.addClass('v-centered');
               // calculate offset % for vertical positioning
               var offset_px   = ($wrapper.height() - $c_fwd.children('a').outerHeight()) / 2,
                   ratio       = (offset_px / settings.height) * 100,
                   offset      = ratio + '%';
               $c_fwd.find('a').css('top', offset);
               $c_prev.find('a').css('top', offset);
           }
       };
       var conf_markers = function() {
           // create a wrapper for our markers
           $m_wrapper = $('<ol class="bjqs-markers"></ol>');
           // for every slide, create a marker
           $.each($slides, function(key, slide){
               var slidenum    = key + 1,
                   gotoslide   = key + 1;

               if(settings.animtype === 'slide'){
                   // + 2 to account for clones
                   gotoslide = key + 2;
               }
               var marker = $('<li><a href="#">'+ slidenum +'</a></li>');
               // set the first marker to be active
               if(slidenum === state.currentslide){ marker.addClass('active-marker'); }
               // bind the click event
               marker.on('click','a',function(e){
                   e.preventDefault();
                   if(!state.animating && state.currentslide !== gotoslide){
                       go(false,gotoslide);
                   }
               });
               // add the marker to the wrapper
               marker.appendTo($m_wrapper);
           });
           $m_wrapper.appendTo($wrapper);
           $m_markers = $m_wrapper.find('li');
           // center the markers
           if (settings.centermarkers) {
               $m_wrapper.addClass('h-centered');
               var offset = (settings.width - $m_wrapper.width()) / 2;
               $m_wrapper.css('left', offset);
           }
       };
       var conf_keynav = function() {
           $(document).keyup(function (event) {
               if (!state.paused) {
                   clearInterval(state.interval);
                   state.paused = true;
               }
               if (!state.animating) {
                   if (event.keyCode === 39) {
                       event.preventDefault();
                       go(vars.fwd, false);
                   } else if (event.keyCode === 37) {
                       event.preventDefault();
                       go(vars.prev, false);
                   }
               }
               if (state.paused && settings.automatic) {
                   state.interval = setInterval(function () {
                       go(vars.fwd);
                   }, settings.animspeed);
                   state.paused = false;
               }
           });
       };
       var conf_hoverpause = function() {
           $wrapper.hover(function () {
               if (!state.paused) {
                   clearInterval(state.interval);
                   state.paused = true;
               }
           }, function () {
               if (state.paused) {
                   state.interval = setInterval(function () {
                       go(vars.fwd, false);
                   }, settings.animspeed);
                   state.paused = false;
               }
           });
       };
       var conf_captions = function() {
           $.each($slides, function (key, slide) {
               var caption = $(slide).children('img:first-child').attr('title');
               // Account for images wrapped in links
               if(!caption){
                   caption = $(slide).children('a').find('img:first-child').attr('title');
               }
               if (caption) {
                   caption = $('<p class="bjqs-caption">' + caption + '</p>');
                   caption.appendTo($(slide));
               }
           });
       };
       var conf_random = function() {
           var rand            = Math.floor(Math.random() * state.slidecount) + 1;
           state.currentslide  = rand;
           state.currentindex  = rand-1;
       };
       var set_next = function(direction) {
           if(direction === vars.fwd){

               if($slides.eq(state.currentindex).next().length){
                   state.nextindex = state.currentindex + 1;
                   state.nextslide = state.currentslide + 1;
               }
               else{
                   state.nextindex = 0;
                   state.nextslide = 1;
               }
           }
           else{
               if($slides.eq(state.currentindex).prev().length){
                   state.nextindex = state.currentindex - 1;
                   state.nextslide = state.currentslide - 1;
               }
               else{
                   state.nextindex = state.slidecount - 1;
                   state.nextslide = state.slidecount;
               }
           }
       };
       var go = function(direction, position) {
           // only if we're not already doing things
           if(!state.animating){
               // doing things
               state.animating = true;
               if(position){
                   state.nextslide = position;
                   state.nextindex = position-1;
               }
               else{
                   set_next(direction);
               }
               // fade animation
               if(settings.animtype === 'slide'){
                   if(settings.showmarkers){
                       $m_markers.removeClass('active-marker');
                       $m_markers.eq(state.nextindex).addClass('active-marker');
                   }
                   // fade out current
                   $slides.eq(state.currentindex).fadeOut(settings.animduration);
                   // fade in next
                   $slides.eq(state.nextindex).fadeIn(settings.animduration, function(){
                       // update state variables
                       state.animating = false;
                       state.currentslide = state.nextslide;
                       state.currentindex = state.nextindex;
                   });
               }
               // slide animation
               if(settings.animtype === 'slide'){
                   if(settings.showmarkers){

                       var markerindex = state.nextindex-1;
                       if(markerindex === state.slidecount-2){
                           markerindex = 0;
                       }
                       else if(markerindex === -1){
                           markerindex = state.slidecount-3;
                       }
                       $m_markers.removeClass('active-marker');
                       $m_markers.eq(markerindex).addClass('active-marker');
                   }
                   // if the slider is responsive && the calculated width is less than the max width
                   if(settings.responsive && ( responsive.width < settings.width ) ){
                       state.slidewidth = responsive.width;
                   }
                   else{
                       state.slidewidth = settings.width;
                   }
                   $slider.animate({'left': -state.nextindex * state.slidewidth }, settings.animduration, function(){
                       state.currentslide = state.nextslide;
                       state.currentindex = state.nextindex;
                       // is the current slide a clone?
                       if($slides.eq(state.currentindex).attr('data-clone') === 'last'){
                           // affirmative, at the last slide (clone of first)
                           $slider.css({'left': -state.slidewidth });
                           state.currentslide = 2;
                           state.currentindex = 1;
                       }
                       else if($slides.eq(state.currentindex).attr('data-clone') === 'first'){
                           // affirmative, at the fist slide (clone of last)
                           $slider.css({'left': -state.slidewidth *(state.slidecount - 2)});
                           state.currentslide = state.slidecount - 1;
                           state.currentindex = state.slidecount - 2;
                       }
                       state.animating = false;
                   });
               }
           }
       };
       // lets get the party started 
       init();
   };
})(jQuery);

Será que me podem ajudar a tirar a transição automática e que no menu (#nav) faça a transição (em slide, também).

Obrigado

Editado por brunoais
geshi

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
DevilRocks92

Peço desculpa, estava a pedir demais...

Com alguma pesquisa consegui o que queria.

Agora só tenho uma dúvida como substituo o text por uma imagem (no codigo abaixo)?

Ja experimentei por no texto a tag <img>, ja tentei substituir "text: " por "img" e "image" e nada resultou. Será que me podem ajudar?

if (this.options.navigation.active) {
 prevButton = $("<a>", {
	 "class": "slidesjs-previous slidesjs-navigation",
	 href: "#",
	 title: "Previous",
	 text: "Previous"
 }).appendTo($element);
 nextButton = $("<a>", {
	 "class": "slidesjs-next slidesjs-navigation",
	 href: "#",
	 title: "Next",
	 text: "Next"
 }).appendTo($element);
 }

Obrigado

Editado por DevilRocks92

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
yoda

if (this.options.navigation.active) {
	 prevButton = $("<a class='nav-prev'>", {
			 "class": "slidesjs-previous slidesjs-navigation",
			 href: "#",
			 title: "Previous",
			 text: "Previous"
	 }).appendTo($element);
	 nextButton = $("<a class='nav-next'>", {
			 "class": "slidesjs-next slidesjs-navigation",
			 href: "#",
			 title: "Next",
			 text: "Next"
	 }).appendTo($element);
	 }

Depois crias 2 classes no CSS, e atribuis a elas a imagem como background :

.nav-prev {
  background: url(...);
}

.nav-next {
  background: url(...);
}

Editado por yoda

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
DevilRocks92

if (this.options.navigation.active) {
	 prevButton = $("<a class='nav-prev'>", {
			 "class": "slidesjs-previous slidesjs-navigation",
			 href: "#",
			 title: "Previous",
			 text: "Previous"
	 }).appendTo($element);
	 nextButton = $("<a class='nav-next'>", {
			 "class": "slidesjs-next slidesjs-navigation",
			 href: "#",
			 title: "Next",
			 text: "Next"
	 }).appendTo($element);
	 }

Depois crias 2 classes no CSS, e atribuis a elas a imagem como background :

.nav-prev {
  background: url(...);
}

.nav-next {
  background: url(...);
}

Não está a funcionar, já tentei de tudo.

a.nav-prev {
  background: url('img/prev.png');
}
a.nav-next {
  background: url('img/next.png');
}

if (this.options.navigation.active) {
 prevButton = $("<a class='nav-prev'>", {
  "class": "slidesjs-previous slidesjs-navigation",
  href: "#",
  title: "Previous",
  text: "Previous"
 }).appendTo($element);

 nextButton = $("<a class='nav-next'>", {
  "class": "slidesjs-next slidesjs-navigation",
  href: "#",
  title: "Next",
  text: "Next"
 }).appendTo($element);
 }



  $(".slidesjs-next", $element).click(function(e) {
    e.preventDefault();
    _this.stop(true);
    return _this.next(_this.options.navigation.effect);
  });
  $(".slidesjs-previous", $element).click(function(e) {
    e.preventDefault();
    _this.stop(true);
    return _this.previous(_this.options.navigation.effect);
  });

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
I-NOZex

a localização das imagens está correcta?

pelo codigo que usaste tens de ter o ficheiro css na raiz (na mesma localização que o html) e depois tens que ter uma pasta img

está certo?


B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.