[TUTORIAL] Efeito vídeo em lightbox em vídeos

Usando efeitos em Java script e CSS, vamos gerir um grande efeito externo de um vídeo que através de um clique em link, será possível mostrar em tempo real na mesma página um vídeo. Esse efeito, é chamado de lightbox em vídeos. O mesmo pode ser usado em imagens, todavia, não em fóruns do Forumeiros até o momento.

--> Tutoriais dicas, e astúcias <--
Efeito vídeo em lightbox em vídeos

1º - Função do Java Script:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções: No índice : O código será aplicado ao índice do fórum. No portal : O código será aplicado ao Portal do fórum. Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns. Sobre os temas : O código será aplicado aos tópicos do fórum. Na galeria : O código será aplicado na sua Galeria de imagens. Em todas as páginas : O código será aplicado em todas as páginas do fórum.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

Para o próximo passo, vamos criar uma página Java Script e colar o código que será explicado.


2º - Recomendações e adição do código:
O momento mais esperado é de ver o resultado, e muitos utilizadores evitam de verificar outros pontos do tutorial. É importânte que leia todos os pontos citados em um tutorial para não comter erros. Informamos que, você poderá fazer isso com diversos vídeos com IDs diferentes.
Abaixo, temos um grande código Java Script:

Código:

// *********************
   // Shiftactif Networks Edited
   // *********************
// ColorBox v1.3.16 - um completo, mesa de luz leve, personalizável com base no jQuery 1.3 +
// Copyright (c) 2011 Jack Moore - jack@colorpowered.com
// Copyright (c) 2012 Shiftactif Codeasy - http://shiftactive.blogspot.com/
// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
(function ($, document, window) {
   var
   // Predefinições da função ColorBox.   
   // Tutorial original: http://colorpowered.com/colorbox Para fóruns, você deve verificar em http://shift.forumactif.com na seção de tutoriais.
   defaults = {
      transition: "elastic",
      speed: 300,
      width: false,
      initialWidth: "600",
      innerWidth: false,
      maxWidth: false,
      height: false,
      initialHeight: "450",
      innerHeight: false,
      maxHeight: false,
      scalePhotos: true,
      scrolling: true,
      inline: false,
      html: false,
      iframe: false,
      fastIframe: true,
      photo: false,
      href: false,
      title: false,
      rel: false,
      opacity: 0.9,
      preloading: true,
      current: "image {current} of {total}",
      previous: "previous",
      next: "next",
      close: "close",
      open: false,
      returnFocus: true,
      loop: true,
      slideshow: false,
      slideshowAuto: true,
      slideshowSpeed: 2500,
      slideshowStart: "start slideshow",
      slideshowStop: "stop slideshow",
      onOpen: false,
      onLoad: false,
      onComplete: false,
      onCleanup: false,
      onClosed: false,
      overlayClose: true,      
      escKey: true,
      arrowKey: true
   },
   
   // Abstrair o HTML e identificadores de evento para rebranding fácil
   colorbox = 'colorbox',
   prefix = 'cbox',
   
   // Events   
   event_open = prefix + '_open',
   event_load = prefix + '_load',
   event_complete = prefix + '_complete',
   event_cleanup = prefix + '_cleanup',
   event_closed = prefix + '_closed',
   event_purge = prefix + '_purge',
   
   // Tratamento especial para o IE
   isIE = $.browser.msie && !$.support.opacity, // detecção de recurso só deu um falso positivo em pelo menos um browser do telefone e em algumas versões de desenvolvimento do Chrome. versions of Chrome.
   isIE6 = isIE && $.browser.version < 7,
   event_ie6 = prefix + '_IE6',

   // Cache jQuery variáveis ​​de objeto
   $overlay,
   $box,
   $wrap,
   $content,
   $topBorder,
   $leftBorder,
   $rightBorder,
   $bottomBorder,
   $related,
   $window,
   $loaded,
   $loadingBay,
   $loadingOverlay,
   $title,
   $current,
   $slideshow,
   $next,
   $prev,
   $close,
   $groupControls,

   // Variáveis ​​para os valores armazenados em cache para usados ​​em múltiplas funções
   settings = {},
   interfaceHeight,
   interfaceWidth,
   loadedHeight,
   loadedWidth,
   element,
   index,
   photo,
   open,
   active,
   closing = false,
   
   publicMethod,
   boxElement = prefix + 'Element';
   
   // ******************
   // FUNÇÕES AUXILIARES
   // ******************

   // gerador objeto jQuery para reduzir o tamanho do código
   function $div(id, cssText) {
      var div = document.createElement('div');
      div.id = id ? prefix + id : false;
      div.style.cssText = cssText || false;
      return $(div);
   }

   // Converter valores % em pixels
   function setSize(size, dimension) {
      dimension = dimension === 'x' ? $window.width() : $window.height();
      return (typeof size === 'string') ? Math.round((/%/.test(size) ? (dimension / 100) * parseInt(size, 10) : parseInt(size, 10))) : size;
   }
   
   // Verifica um href para ver se é uma foto.
   // Há uma opção de foto vigor (foto: true) para HREFs que não podem ser compensadas por este regex.
   function isImage(url) {
      return settings.photo || /\.(gif|png|jpg|jpeg|bmp)(?:\?([^#]*))?(?:#(\.*))?$/i.test(url);
   }
   
   // Atribui os resultados da função para suas respectivas configurações. Isto permite que as funções a serem utilizados como valores.
   function process(settings) {
      for (var i in settings) {
         if ($.isFunction(settings[i]) && i.substring(0, 2) !== 'on') { // verificações para se certificar de que a função não é um dos retornos de chamada, que será tratado no momento oportuno.
             settings[i] = settings[i].call(element);
         }
      }
      settings.rel = settings.rel || element.rel || 'nofollow';
      settings.href = $.trim(settings.href || $(element).attr('href'));
      settings.title = settings.title || element.title;
   }

   function trigger(event, callback) {
      if (callback) {
         callback.call(element);
      }
      $.event.trigger(event);
   }

   // funcionalidade Slideshow
   function slideshow() {
      var
      timeOut,
      className = prefix + "Slideshow_",
      click = "click." + prefix,
      start,
      stop,
      clear;
      
      if (settings.slideshow && $related[1]) {
         start = function () {
            $slideshow
               .text(settings.slideshowStop)
               .unbind(click)
               .bind(event_complete, function () {
                  if (index < $related.length - 1 || settings.loop) {
                     timeOut = setTimeout(publicMethod.next, settings.slideshowSpeed);
                  }
               })
               .bind(event_load, function () {
                  clearTimeout(timeOut);
               })
               .one(click + ' ' + event_cleanup, stop);
            $box.removeClass(className + "off").addClass(className + "on");
            timeOut = setTimeout(publicMethod.next, settings.slideshowSpeed);
         };
         
         stop = function () {
            clearTimeout(timeOut);
            $slideshow
               .text(settings.slideshowStart)
               .unbind([event_complete, event_load, event_cleanup, click].join(' '))
               .one(click, start);
            $box.removeClass(className + "on").addClass(className + "off");
         };
         
         if (settings.slideshowAuto) {
            start();
         } else {
            stop();
         }
      }
   }

   function launch(elem) {
      if (!closing) {
         
         element = elem;
         
         process($.extend(settings, $.data(element, colorbox)));
         
         $related = $(element);
         
         index = 0;
         
         if (settings.rel !== 'nofollow') {
            $related = $('.' + boxElement).filter(function () {
               var relRelated = $.data(this, colorbox).rel || this.rel;
               return (relRelated === settings.rel);
            });
            index = $related.index(element);
            
            // Verifique chamadas diretas para ColorBox.
            if (index === -1) {
               $related = $related.add(element);
               index = $related.length - 1;
            }
         }
         
         if (!open) {
            open = active = true; // Impede a ação de mudança de página da fila, se o visitante tem as teclas esquerda ou direita.
            
            $box.show();
            
            if (settings.returnFocus) {
               try {
                  element.blur();
                  $(element).one(event_closed, function () {
                     try {
                        this.focus();
                     } catch (e) {
                        // Não faça nada aqui.
                     }
                  });
               } catch (e) {
                  // Não faça nada aqui.
               }
            }
            
            // settings.opacity + evita um problema no IE quando se usa não-zero-prefixado cordas de valores, como "0,5"
            $overlay.css({"opacity": +settings.opacity, "cursor": settings.overlayClose ? "pointer" : "auto"}).show();
            
            // Abre ColorBox vazio inicial antes de conteúdo que está sendo carregado.
            settings.w = setSize(settings.initialWidth, 'x');
            settings.h = setSize(settings.initialHeight, 'y');
            publicMethod.position(0);
            
            if (isIE6) {
               $window.bind('resize.' + event_ie6 + ' scroll.' + event_ie6, function () {
                  $overlay.css({width: $window.width(), height: $window.height(), top: $window.scrollTop(), left: $window.scrollLeft()});
               }).trigger('resize.' + event_ie6);
            }
            
            trigger(event_open, settings.onOpen);
            
            $groupControls.add($title).hide();
            
            $close.html(settings.close).show();
         }
         
         publicMethod.load(true);
      }
   }

   // ****************
   // Funções Públicas
   // Use format: $.fn.colorbox.close();
   // Uso de dentro de um iframe: parent.$.fn.colorbox.close();
   // ****************
   
   publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback) {
      var $this = this, autoOpen;
      
      if (!$this[0] && $this.selector) { // se um seletor foi dado e ele não encontrou nenhum elementos, vá em frente e sair.
         return $this;
      }
      
      options = options || {};
      
      if (callback) {
         options.onComplete = callback;
      }
      
      if (!$this[0] || $this.selector === undefined) { // detecta $. colorbox () e $. fn.colorbox ()
         $this = $('<a/>');
         options.open = true; // assumi um livre imediato
      }
      
      $this.each(function () {
         $.data(this, colorbox, $.extend({}, $.data(this, colorbox) || defaults, options));
         $(this).addClass(boxElement);
      });
      
      autoOpen = options.open;
      
      if ($.isFunction(autoOpen)) {
         autoOpen = autoOpen.call($this);
      }
      
      if (autoOpen) {
         launch($this[0]);
      }
      
      return $this;
   };

   // Inicializar ColorBox: cálculos de lojas comuns, pré-carregar os gráficos de interface, acrescentar o html.
   // Este colorbox preps para uma rápida aberta quando clicado, e alivia a carga sobre o navegador, apenas
   // Tendo para rodar uma vez, em vez de cada colorbox tempo é aberta. público Method.init = function () {
      // Criar e acrescentar objetos jQuery
      $window = $(window);
      $box = $div().attr({id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : ''});
      $overlay = $div("Overlay", isIE6 ? 'position:absolute' : '').hide();
      
      $wrap = $div("Wrapper");
      $content = $div("Content").append(
         $loaded = $div("LoadedContent", 'width:0; height:0; overflow:hidden'),
         $loadingOverlay = $div("LoadingOverlay").add($div("LoadingGraphic")),
         $title = $div("Title"),
         $current = $div("Current"),
         $next = $div("Next"),
         $prev = $div("Previous"),
         $slideshow = $div("Slideshow").bind(event_open, slideshow),
         $close = $div("Close")
      );
      $wrap.append( // The 3x3 Grid that makes up ColorBox
         $div().append(
            $div("TopLeft"),
            $topBorder = $div("TopCenter"),
            $div("TopRight")
         ),
         $div(false, 'clear:left').append(
            $leftBorder = $div("MiddleLeft"),
            $content,
            $rightBorder = $div("MiddleRight")
         ),
         $div(false, 'clear:left').append(
            $div("BottomLeft"),
            $bottomBorder = $div("BottomCenter"),
            $div("BottomRight")
         )
      ).children().children().css({'float': 'left'});
      
      $loadingBay = $div(false, 'position:absolute; width:9999px; visibility:hidden; display:none');
      
      $('body').prepend($overlay, $box.append($wrap, $loadingBay));
      
      $content.children()
      .hover(function () {
         $(this).addClass('hover');
      }, function () {
         $(this).removeClass('hover');
      }).addClass('hover');
      
      // Valores de cache necessário para cálculo do tamanho
      interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height();//Subtraction needed for IE6
      interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width();
      loadedHeight = $loaded.outerHeight(true);
      loadedWidth = $loaded.outerWidth(true);
      
      // Definindo o enchimento para remover a necessidade de fazer conversões de tamanho durante a etapa de animação.
      $box.css({"padding-bottom": interfaceHeight, "padding-right": interfaceWidth}).hide();
      
                // Setup button events.
                $next.click(function () {
                        publicMethod.next();
                });
                $prev.click(function () {
                        publicMethod.prev();
                });
                $close.click(function () {
                        publicMethod.close();
                });
      
      $groupControls = $next.add($prev).add($current).add($slideshow);
      
      // Adicionando o "foco" classe permitiu o navegador para carregar o hover-estado
      // gráficos de fundo. A classe pode agora pode ser removido.
      $content.children().removeClass('hover');
      
      $('.' + boxElement).live('click', function (e) {
         // checks to see if it was a non-left mouse-click and for clicks modified with ctrl, shift, or alt.
         if (!((e.button !== 0 && typeof e.button !== 'undefined') || e.ctrlKey || e.shiftKey || e.altKey)) {
            e.preventDefault();
            launch(this);
         }
      });
      
      $overlay.click(function () {
         if (settings.overlayClose) {
            publicMethod.close();
         }
      });
      
      // Set Navigation Key Bindings
      $(document).bind("keydown", function (e) {
         if (open && settings.escKey && e.keyCode === 27) {
            e.preventDefault();
            publicMethod.close();
         }
         if (open && settings.arrowKey && !active && $related[1]) {
            if (e.keyCode === 37 && (index || settings.loop)) {
               e.preventDefault();
               $prev.click();
            } else if (e.keyCode === 39 && (index < $related.length - 1 || settings.loop)) {
               e.preventDefault();
               $next.click();
            }
         }
      });
   };
   
   publicMethod.remove = function () {
      $box.add($overlay).remove();
      $('.' + boxElement).die('click').removeData(colorbox).removeClass(boxElement);
   };

   publicMethod.position = function (speed, loadedCallback) {
      var
      animate_speed,
      // mantém as posições de topo e à esquerda na janela do navegador.
      posTop = Math.max(document.documentElement.clientHeight - settings.h - loadedHeight - interfaceHeight, 0) / 2 + $window.scrollTop(),
      posLeft = Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2 + $window.scrollLeft();
      
      // definindo a velocidade de 0 a reduzir o atraso entre mesmo tamanho content.
      animate_speed = ($box.width() === settings.w + loadedWidth && $box.height() === settings.h + loadedHeight) ? 0 : speed;
      
/ / Isto dá a abundância invólucro de espaço para respirar assim o seu conteúdo flutuou pode se movimentar sem problemas,
/ / Mas tem que ser encolheu para baixo em torno do tamanho da div # colorbox quando ele é feito. Se não,
/ / Pode invocar um bug IE obscuro ao usar iframes.
      $wrap[0].style.width = $wrap[0].style.height = "9999px";
      
      function modalDimensions(that) {
         // carregamento altura sobreposição tem de ser explicitamente definido para o IE6.
         $topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = that.style.width;
         $loadingOverlay[0].style.height = $loadingOverlay[1].style.height = $content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = that.style.height;
      }
      
      $box.dequeue().animate({width: settings.w + loadedWidth, height: settings.h + loadedHeight, top: posTop, left: posLeft}, {
         duration: animate_speed,
         complete: function () {
            modalDimensions(this);
            
            active = false;
            
            //diminuir o tamanho da embalagem até exatamente o tamanho de colorbox para evitar um bug na implementação do IE iframe.
            $wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px";
            $wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight) + "px";
            
            if (loadedCallback) {
               loadedCallback();
            }
         },
         step: function () {
            modalDimensions(this);
         }
      });
   };

   publicMethod.resize = function (options) {
      if (open) {
         options = options || {};
         
         if (options.width) {
            settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth;
         }
         if (options.innerWidth) {
            settings.w = setSize(options.innerWidth, 'x');
         }
         $loaded.css({width: settings.w});
         
         if (options.height) {
            settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight;
         }
         if (options.innerHeight) {
            settings.h = setSize(options.innerHeight, 'y');
         }
         if (!options.innerHeight && !options.height) {            
            var $child = $loaded.wrapInner("<div style='overflow:auto'></div>").children(); //invólucro temporário para obter uma estimativa precisa de quão alto o teor total deve ser.
            settings.h = $child.height();
            $child.replaceWith($child.children()); // ditch the temporary wrapper div used in height calculation
         }
         $loaded.css({height: settings.h});
         
         publicMethod.position(settings.transition === "none" ? 0 : settings.speed);
      }
   };

   publicMethod.prep = function (object) {
      if (!open) {
         return;
      }
      
      var speed = settings.transition === "none" ? 0 : settings.speed;
      
      $window.unbind('resize.' + prefix);
      $loaded.remove();
      $loaded = $div('LoadedContent').html(object);
      
      function getWidth() {
         settings.w = settings.w || $loaded.width();
         settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w;
         return settings.w;
      }
      function getHeight() {
         settings.h = settings.h || $loaded.height();
         settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
         return settings.h;
      }
      
      $loaded.hide()
      .appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations.
      .css({width: getWidth(), overflow: settings.scrolling ? 'auto' : 'hidden'})
      .css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height.
      .prependTo($content);
      
      $loadingBay.hide();
      
      // floating the IMG removes the bottom line-height and fixed a problem where IE miscalculates the width of the parent element as 100% of the document width.
      //$(photo).css({'float': 'none', marginLeft: 'auto', marginRight: 'auto'});
      
                $(photo).css({'float': 'none'});
               
      // Hides SELECT elements in IE6 because they would otherwise sit on top of the overlay.
      if (isIE6) {
         $('select').not($box.find('select')).filter(function () {
            return this.style.visibility !== 'hidden';
         }).css({'visibility': 'hidden'}).one(event_cleanup, function () {
            this.style.visibility = 'inherit';
         });
      }
      
      function setPosition(s) {
         publicMethod.position(s, function () {
            var prev, prevSrc, next, nextSrc, total = $related.length, iframe, complete;
            
            if (!open) {
               return;
            }
            
            complete = function () {
               $loadingOverlay.hide();
               trigger(event_complete, settings.onComplete);
            };
            
            if (isIE) {
               //This fadeIn helps the bicubic resampling to kick-in.
               if (photo) {
                  $loaded.fadeIn(100);
               }
            }
            
            $title.html(settings.title).add($loaded).show();
            
            if (total > 1) { // handle grouping
               if (typeof settings.current === "string") {
                  $current.html(settings.current.replace(/\{current\}/, index + 1).replace(/\{total\}/, total)).show();
               }
               
               $next[(settings.loop || index < total - 1) ? "show" : "hide"]().html(settings.next);
               $prev[(settings.loop || index) ? "show" : "hide"]().html(settings.previous);
               
               prev = index ? $related[index - 1] : $related[total - 1];
               next = index < total - 1 ? $related[index + 1] : $related[0];
               
               if (settings.slideshow) {
                  $slideshow.show();
               }
               
               // Preloads images within a rel group
               if (settings.preloading) {
                  nextSrc = $.data(next, colorbox).href || next.href;
                  prevSrc = $.data(prev, colorbox).href || prev.href;
                  
                  nextSrc = $.isFunction(nextSrc) ? nextSrc.call(next) : nextSrc;
                  prevSrc = $.isFunction(prevSrc) ? prevSrc.call(prev) : prevSrc;
                  
                  if (isImage(nextSrc)) {
                     $('<img/>')[0].src = nextSrc;
                  }
                  
                  if (isImage(prevSrc)) {
                     $('<img/>')[0].src = prevSrc;
                  }
               }
            } else {
               $groupControls.hide();
            }
            
            if (settings.iframe) {
               iframe = $('<iframe frameborder=0/>').addClass(prefix + 'Iframe')[0];
               
               if (settings.fastIframe) {
                  complete();
               } else {
                  $(iframe).load(complete);
               }
               iframe.name = prefix + (+new Date());
               iframe.src = settings.href;
               
               if (!settings.scrolling) {
                  iframe.scrolling = "no";
               }
               
               if (isIE) {
                  iframe.allowTransparency = "true";
               }
               
               $(iframe).appendTo($loaded).one(event_purge, function () {
                  iframe.src = "//about:blank";
               });
            } else {
               complete();
            }
            
            if (settings.transition === 'fade') {
               $box.fadeTo(speed, 1, function () {
                  $box[0].style.filter = "";
               });
            } else {
                                        $box[0].style.filter = "";
            }
            
            $window.bind('resize.' + prefix, function () {
               publicMethod.position(0);
            });
         });
      }
      
      if (settings.transition === 'fade') {
         $box.fadeTo(speed, 0, function () {
            setPosition(0);
         });
      } else {
         setPosition(speed);
      }
   };

   publicMethod.load = function (launched) {
      var href, setResize, prep = publicMethod.prep;
      
      active = true;
      
      photo = false;
      
      element = $related[index];
      
      if (!launched) {
         process($.extend(settings, $.data(element, colorbox)));
      }
      
      trigger(event_purge);
      
      trigger(event_load, settings.onLoad);
      
      settings.h = settings.height ?
            setSize(settings.height, 'y') - loadedHeight - interfaceHeight :
            settings.innerHeight && setSize(settings.innerHeight, 'y');
      
      settings.w = settings.width ?
            setSize(settings.width, 'x') - loadedWidth - interfaceWidth :
            settings.innerWidth && setSize(settings.innerWidth, 'x');
      
      // Sets the minimum dimensions for use in image scaling
      settings.mw = settings.w;
      settings.mh = settings.h;
      
      // Re-evaluate the minimum width and height based on maxWidth and maxHeight values.
      // If the width or height exceed the maxWidth or maxHeight, use the maximum values instead.
      if (settings.maxWidth) {
         settings.mw = setSize(settings.maxWidth, 'x') - loadedWidth - interfaceWidth;
         settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw;
      }
      if (settings.maxHeight) {
         settings.mh = setSize(settings.maxHeight, 'y') - loadedHeight - interfaceHeight;
         settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh;
      }
      
      href = settings.href;
      
      $loadingOverlay.show();

      if (settings.inline) {
         // Inserts an empty placeholder where inline content is being pulled from.
         // An event is bound to put inline content back when ColorBox closes or loads new content.
         $div().hide().insertBefore($(href)[0]).one(event_purge, function () {
            $(this).replaceWith($loaded.children());
         });
         prep($(href));
      } else if (settings.iframe) {
         // IFrame element won't be added to the DOM until it is ready to be displayed,
         // to avoid problems with DOM-ready JS that might be trying to run in that iframe.
         prep(" ");
      } else if (settings.html) {
         prep(settings.html);
      } else if (isImage(href)) {
         $(photo = new Image())
         .addClass(prefix + 'Photo')
         .error(function () {
            settings.title = false;
            prep($div('Error').text('This image could not be loaded'));
         })
         .load(function () {
            var percent;
            photo.onload = null; //stops animated gifs from firing the onload repeatedly.
            
            if (settings.scalePhotos) {
               setResize = function () {
                  photo.height -= photo.height * percent;
                  photo.width -= photo.width * percent;   
               };
               if (settings.mw && photo.width > settings.mw) {
                  percent = (photo.width - settings.mw) / photo.width;
                  setResize();
               }
               if (settings.mh && photo.height > settings.mh) {
                  percent = (photo.height - settings.mh) / photo.height;
                  setResize();
               }
            }
            
            if (settings.h) {
               photo.style.marginTop = Math.max(settings.h - photo.height, 0) / 2 + 'px';
            }
            
            if ($related[1] && (index < $related.length - 1 || settings.loop)) {
               photo.style.cursor = 'pointer';
               photo.onclick = function () {
                                                publicMethod.next();
                                        };
            }
            
            if (isIE) {
               photo.style.msInterpolationMode = 'bicubic';
            }
            
            setTimeout(function () { // A pause because Chrome will sometimes report a 0 by 0 size otherwise.
               prep(photo);
            }, 1);
         });
         
         setTimeout(function () { // A pause because Opera 10.6+ will sometimes not run the onload function otherwise.
            photo.src = href;
         }, 1);
      } else if (href) {
         $loadingBay.load(href, function (data, status, xhr) {
            prep(status === 'error' ? $div('Error').text('Request unsuccessful: ' + xhr.statusText) : $(this).contents());
         });
      }
   };

   // Navigates to the next page/image in a set.
   publicMethod.next = function () {
      if (!active) {
         index = index < $related.length - 1 ? index + 1 : 0;
         publicMethod.load();
      }
   };
   
   publicMethod.prev = function () {
      if (!active) {
         index = index ? index - 1 : $related.length - 1;
         publicMethod.load();
      }
   };

   // Note: to use this within an iframe use the following format: parent.$.fn.colorbox.close();
   publicMethod.close = function () {
      if (open && !closing) {
         
         closing = true;
         
         open = false;
         
         trigger(event_cleanup, settings.onCleanup);
         
         $window.unbind('.' + prefix + ' .' + event_ie6);
         
         $overlay.fadeTo(200, 0);
         
         $box.stop().fadeTo(300, 0, function () {
                               
            $box.add($overlay).css({'opacity': 1, cursor: 'auto'}).hide();
            
            trigger(event_purge);
            
            $loaded.remove();
            
            setTimeout(function () {
               closing = false;
               trigger(event_closed, settings.onClosed);
            }, 1);
         });
      }
   };

   // A method for fetching the current element ColorBox is referencing.
   // returns a jQuery object.
   publicMethod.element = function () {
      return $(element);
   };

   publicMethod.settings = defaults;

   // Initializes ColorBox when the DOM has loaded
   $(publicMethod.init);

}(jQuery, document, this));

Ao colocar o código na página JS, não adicione em local nenhum! Ou seja, geralmente, códigos JS sempre selecionamos em Investimento, os locais ao qual o efeito será reproduzido, mas como o código não é para fóruns, então o efeito deve trabalhar dentro de uma tag <script>. Quando adicionar o código, apenas salve a página Javascript.


3º - Noções e aplicação do CSS:
CSS na verdade significa "Cascading Style Sheets", sua principal função é personalizar um determinado conteúdo exibido, em um determinado lugar na página. Cada versão de fórum (phpbb2. phpbb3, punbb e invision) possuem uma classe diferente, e nessas classes podem ser adicionadas as “propriedades”. Caso queira conhecer alguns tipos de classes, poderá consultar mais informações no seguinte: Elaborar um código CSS.

Painel de controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS ->>

Ver o CSS da base do seu fórum - Permite o administrador conferir o estilo padrão do CSS do fórum. Mesmo se você tiver aplicado algum código CSS na folha de estilo, esse CSS base não será alterado. Ele mostra os códigos que personalizam seu fórum sem a necessidade do CSS adicional, que no caso seria a da folha de estilo.

Procurar CSS - Com essa ferramenta, podemos fazer uma busca nos códigos existentes na folha de estilo CSS. Por exemplo, se você adicionou algum código na folha de estilo, e pelo fato dela ser muito grande você não estiver encontrando o código desejado, a partir do momento em que digitar o código no campo "Procurar CSS", o código será encontrado (se digitado corretamente).

Desativar o CSS de base - Caso desabilite essa opção, o CSS base do seu fórum será desativado, deixando apenas o CSS da folha de estilo.

Melhorar seu CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo.

Ao entender alguns pontos do CSS, vamos adicionar o código ao qual citaremos pontos importântes, então veja o código abaixo com muita atenção.

/* Shiftactif Codeasy CSS. Caso tenha dúvidas, por favor, entre em contato no fórum de suporte http://shift.forumactif.com/ e questione sobre o código. NÃO RETIRE O DIREITO DO AUTOR DOS CÓDIGOS DE SHIFTACTIF E SEUS PARCEIROS */
/*
ColorBox Estilo Core:
O seguinte CSS é consistente entre temas de exemplo e não deve ser alterada.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index: 999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/*
Estilo de Usuário:
Alterar os seguintes estilos para modificar a aparência de ColorBox. eles são
ordenada e com abas de uma forma que representa o assentamento do HTML gerado.
*/
#cboxOverlay{background:url(https://2img.net/h/oi49.tinypic.com/k9ytsx.png) repeat 0 0;}
#colorbox{}
#cboxTopLeft{width:21px; height:21px; background:url(http://actif.freetzi.com/images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(http://actif.freetzi.com/images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(http://actif.freetzi.com/images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(http://actif.freetzi.com/images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(http://actif.freetzi.com/images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(http://actif.freetzi.com/images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(http://actif.freetzi.com/images/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(http://actif.freetzi.com/images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(http://actif.freetzi.com/images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(http://actif.freetzi.com/images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}

/*
A seguir corrige um problema onde o IE7 e IE8 substituir uma transparência PNG alfa, com um preenchimento preto
quando um filtro alpha (mudança de opacidade) é definido no elemento ou elemento ancestral. Este estilo não é aplicado ou necessário no IE9.
Veja: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}


/*
A seguir, fornece suporte a PNG transparência para IE6
Sinta-se livre para remover este eo / ie6 / diretório se você abandonou o suporte IE6.
*/
.cboxIE6 #cboxTopLeft{background:url(http://actif.freetzi.com/images/ie6/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(http://actif.freetzi.com/images/ie6/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(http://actif.freetzi.com/images/ie6/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(http://actif.freetzi.com/images/ie6/borderBottomLeft.png);}
.cboxIE6 #cboxBottomCenter{background:url(http://actif.freetzi.com/images/ie6/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(http://actif.freetzi.com/images/ie6/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(http://actif.freetzi.com/images/ie6/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(http://actif.freetzi.com/images/ie6/borderMiddleRight.png);}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
_behavior: expres​sion(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}
/* Shiftactif Codeasy CSS. Caso tenha dúvidas, por favor, entre em contato no fórum de suporte http://shift.forumactif.com/t134- e questione sobre o código. NÃO RETIRE O DIREITO DO AUTOR DOS CÓDIGOS DE SHIFTACTIF E SEUS PARCEIROS */

Ao observar, você pode notar que as imagens estão hospedadas em actif.freetzi.com/images, que é um de nossos servidores FTP. Se desejar, poderá passar essas imagens para o site Servimg ou outros desejáveis. Aconselhamos que hospede as imagens do CSS em um servidor desejado, porque há muitos erros ou bugs em nosso servidor Actif, e para evitar problemas técnicos, se torna algo necessário.



4º - Criar uma página HTML:
Para continuar-mos, temos que criar uma Página HTML personalizada e adicionar o Iframe do vídeo na página. Para isso, vamos acessar o site https://www.youtube.com e encontrar um vídeo desejado.


Quando capturar o código (ponto 3 da imagem), vamos colar em Painel de controle >> Módulos >> HTML e Javascript >> Gestão das páginas HTML >> Criar uma nova página HTML >>.



5º - Criar um widget e adicionar o código necessário:
Ao final do tutorial, vamos adicionar um código Java Script, só que desta vez em um widget. Você pode adicionar o mesmo na mensagem da Home Page se desejar, mas aconselhamos que adicione junto ao código.

Vamos adicionar uma tag Script para buscar o efeito do JS que aprendemos no segundo passo deste tutorial.

<script src="ENDEREÇO_DA_PAGINA_JS" type="text/javascript"></script>

Toda vez que criamos uma página JS, é mostrado uma URL ou endereço do JS. Neste caso, vamos copiá-lo e colocar no lugar do ENDEREÇO_DA_PAGINA_JS que pede no código acima. Por exemplo:

Código:

<script src="/29236.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
$(".NOME_DA_VARIÁVEL").colorbox({iframe:true, innerWidth:640, innerHeight:480});

});
</script>

Verde: Nome da variável. Por exemplo. No nosso caso é um vídeo que vai ser aberto. Então, no lugar de NOME_DA_VARIÁVEL, coloque por exemplo, "youtube". Esse nome fica a critério do administrador.
Azul Forumeiros: Determina a largura do objeto na página.
Laranja Administrador: Determina o tamanho do objeto.

Quando determinar os valores, vamos adicionar mais um pequeno código, mas em HTML.

<a class="NOME_DA_VARIÁVEL cboxElement" href="/hID-"><img src="https://2img.net/u/2612/28/77/07/smiles/633772.png"/> Assistir vídeo em fórum</a>

Agora, no verde, você vai repetir o que colocou no script acima que tinha o nome da variável. Por quê? Para que o Script e o Código HTML trabalhem juntos. Já o vermelho, será o número da página HTML que criamos com iframe do vídeo e salvar o widget e adicioná-lo-ei na estrutura do fórum.

• As imagens não aparecem! E agora?
  Antes de tudo, dentro do código Java Script que foi adicionado nas páginas JS, você encontra o autor oficial do código ao qual há imagens do mesmo. Ao contrário, poderá questionar em nossas seções de suporte sobre as imagens.
  
  
• O vídeo não abriu na mesma página. O que houve?
  Isso só ocorre quando você segue o tutorial incorretamente, deixando de passar os pontos importântes. Mas se ocorrer algum problema, provavelmente seja no próprio link href que criamos. O atributo cboxElement não deve ser modificado! Caso não seja, procure nos demais códigos se houve algum erro, ou entre em contato conosco na seção de suporte.
  
  
• O código funciona para o IE?
  Não. Apesar de que no código JS haver pontos para isso, o código (ou efeito) não funciona para o navegador testado "Internet Explorer".
  
  
• Resultado:
  
  

---

© Fórum dos Fóruns & Shek

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Efeito vídeo em lightbox em vídeos