Efeito deste site

[RinaldFN 0]

o Site é este: Link

 

 

Quando clicamos no link, das miniaturas das imagens, a tela fica preta, e aparece um efeito de carregamento da foto ampliada.

 

 

ps: não sei se isso é feito em JS

[tubadc 0]

acho que é sim, js com flex...

 

abre o codigo fonte dele e ve os links js. e abre no navegador pra ver o codigo acho que pra efeito de estudo naum tem problema...

 

 

abs.

 

avcho que deve de tah por aqui ^^ naum to com tempo pra analizar a noite dou uma olhadinha... ve ae...

 

// -----------------------------------------------------------------------------------

//

// Lightbox v2.02

// by Lokesh Dhakar - http://www.huddletogether.com

// 3/31/06

//

// For more information on this script, visit:

// http://huddletogether.com/projects/lightbox2/

//

// Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/

//

// Credit also due to those who have helped, inspired, and made their code available to the public.

// Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.

//

//

// -----------------------------------------------------------------------------------

/*

 

Table of Contents

-----------------

Configuration

Global Variables

 

Extending Built-in Objects

- Object.extend(Element)

- Array.prototype.removeDuplicates()

- Array.prototype.empty()

 

Lightbox Class Declaration

- initialize()

- start()

- changeImage()

- resizeImageContainer()

- showImage()

- updateDetails()

- updateNav()

- enableKeyboardNav()

- disableKeyboardNav()

- keyboardAction()

- preloadNeighborImages()

- end()

 

Miscellaneous Functions

- getPageScroll()

- getPageSize()

- getKey()

- listenKey()

- showSelectBoxes()

- hideSelectBoxes()

- pause()

- initLightbox()

 

Function Calls

- addLoadEvent(initLightbox)

 

*/

// -----------------------------------------------------------------------------------

 

//

// Configuration

//

var fileLoadingImage = "images/loading.gif";

var fileBottomNavCloseImage = "images/closelabel.gif";

 

var resizeSpeed = 7; // controls the speed of the image resizing (1=slowest and 10=fastest)

 

var borderSize = 10; //if you adjust the padding in the CSS, you will need to update this variable

 

// -----------------------------------------------------------------------------------

 

//

// Global Variables

//

var imageArray = new Array;

var activeImage;

 

if(resizeSpeed > 10){ resizeSpeed = 10;}

if(resizeSpeed < 1){ resizeSpeed = 1;}

resizeDuration = (11 - resizeSpeed) * 0.15;

 

// -----------------------------------------------------------------------------------

 

//

// Additional methods for Element added by SU, Couloir

// - further additions by Lokesh Dhakar (huddletogether.com)

//

Object.extend(Element, {

getWidth: function(element) {

element = $(element);

return element.offsetWidth;

},

setWidth: function(element,w) {

element = $(element);

element.style.width = w +"px";

},

setHeight: function(element,h) {

element = $(element);

element.style.height = h +"px";

},

setTop: function(element,t) {

element = $(element);

element.style.top = t +"px";

},

setSrc: function(element,src) {

element = $(element);

element.src = src;

},

setHref: function(element,href) {

element = $(element);

element.href = href;

},

setInnerHTML: function(element,content) {

element = $(element);

element.innerHTML = content;

}

});

 

// -----------------------------------------------------------------------------------

 

//

// Extending built-in Array object

// - array.removeDuplicates()

// - array.empty()

//

Array.prototype.removeDuplicates = function () {

for(i = 1; i < this.length; i++){

if(this[0] == this[i-1][0]){

this.splice(i,1);

}

}

}

 

// -----------------------------------------------------------------------------------

 

Array.prototype.empty = function () {

for(i = 0; i <= this.length; i++){

this.shift();

}

}

 

// -----------------------------------------------------------------------------------

 

//

// Lightbox Class Declaration

// - initialize()

// - start()

// - changeImage()

// - resizeImageContainer()

// - showImage()

// - updateDetails()

// - updateNav()

// - enableKeyboardNav()

// - disableKeyboardNav()

// - keyboardNavAction()

// - preloadNeighborImages()

// - end()

//

// Structuring of code inspired by Scott Upton (http://www.uptonic.com/)

//

var Lightbox = Class.create();

 

Lightbox.prototype = {

 

// initialize()

// Constructor runs on completion of the DOM loading. Loops through anchor tags looking for

// 'lightbox' references and applies onclick events to appropriate links. The 2nd section of

// the function inserts html at the bottom of the page which is used to display the shadow

// overlay and the image container.

//

initialize: function() {

if (!document.getElementsByTagName){ return; }

var anchors = document.getElementsByTagName('a');

 

// loop through all anchor tags

for (var i=0; i<anchors.length; i++){

var anchor = anchors;

 

var relAttribute = String(anchor.getAttribute('rel'));

 

// use the string.match() method to catch 'lightbox' references in the rel attribute

if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){

anchor.onclick = function () {myLightbox.start(this); return false;}

}

}

 

// The rest of this code inserts html at the bottom of the page that looks similar to this:

//

// <div id="overlay"></div>

// <div id="lightbox">

// <div id="outerImageContainer">

// <div id="imageContainer">

// <img id="lightboxImage">

// <div style="" id="hoverNav">

// <a href="#" id="prevLink"></a>

// <a href="#" id="nextLink"></a>

// </div>

// <div id="loading">

// <a href="#" id="loadingLink">

// <img src="images/loading.gif">

// </a>

// </div>

// </div>

// </div>

// <div id="imageDataContainer">

// <div id="imageData">

// <div id="imageDetails">

// <span id="caption"></span>

// <span id="numberDisplay"></span>

// </div>

// <div id="bottomNav">

// <a href="#" id="bottomNavClose">

// <img src="images/close.gif">

// </a>

// </div>

// </div>

// </div>

// </div>

 

 

var objBody = document.getElementsByTagName("body").item(0);

 

var objOverlay = document.createElement("div");

objOverlay.setAttribute('id','overlay');

objOverlay.style.display = 'none';

objOverlay.onclick = function() { myLightbox.end(); return false; }

objBody.appendChild(objOverlay);

 

var objLightbox = document.createElement("div");

objLightbox.setAttribute('id','lightbox');

objLightbox.style.display = 'none';

objBody.appendChild(objLightbox);

 

var objOuterImageContainer = document.createElement("div");

objOuterImageContainer.setAttribute('id','outerImageContainer');

objLightbox.appendChild(objOuterImageContainer);

 

var objImageContainer = document.createElement("div");

objImageContainer.setAttribute('id','imageContainer');

objOuterImageContainer.appendChild(objImageContainer);

 

var objLightboxImage = document.createElement("img");

objLightboxImage.setAttribute('id','lightboxImage');

objImageContainer.appendChild(objLightboxImage);

 

var objHoverNav = document.createElement("div");

objHoverNav.setAttribute('id','hoverNav');

objImageContainer.appendChild(objHoverNav);

 

var objPrevLink = document.createElement("a");

objPrevLink.setAttribute('id','prevLink');

objPrevLink.setAttribute('href','#');

objHoverNav.appendChild(objPrevLink);

 

var objNextLink = document.createElement("a");

objNextLink.setAttribute('id','nextLink');

objNextLink.setAttribute('href','#');

objHoverNav.appendChild(objNextLink);

 

var objLoading = document.createElement("div");

objLoading.setAttribute('id','loading');

objImageContainer.appendChild(objLoading);

 

var objLoadingLink = document.createElement("a");

objLoadingLink.setAttribute('id','loadingLink');

objLoadingLink.setAttribute('href','#');

objLoadingLink.onclick = function() { myLightbox.end(); return false; }

objLoading.appendChild(objLoadingLink);

 

var objLoadingImage = document.createElement("img");

objLoadingImage.setAttribute('src', fileLoadingImage);

objLoadingLink.appendChild(objLoadingImage);

 

var objImageDataContainer = document.createElement("div");

objImageDataContainer.setAttribute('id','imageDataContainer');

objImageDataContainer.className = 'clearfix';

objLightbox.appendChild(objImageDataContainer);

 

var objImageData = document.createElement("div");

objImageData.setAttribute('id','imageData');

objImageDataContainer.appendChild(objImageData);

 

var objImageDetails = document.createElement("div");

objImageDetails.setAttribute('id','imageDetails');

objImageData.appendChild(objImageDetails);

 

var objCaption = document.createElement("span");

objCaption.setAttribute('id','caption');

objImageDetails.appendChild(objCaption);

 

var objNumberDisplay = document.createElement("span");

objNumberDisplay.setAttribute('id','numberDisplay');

objImageDetails.appendChild(objNumberDisplay);

 

var objBottomNav = document.createElement("div");

objBottomNav.setAttribute('id','bottomNav');

objImageData.appendChild(objBottomNav);

 

var objBottomNavCloseLink = document.createElement("a");

objBottomNavCloseLink.setAttribute('id','bottomNavClose');

objBottomNavCloseLink.setAttribute('href','#');

objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }

objBottomNav.appendChild(objBottomNavCloseLink);

 

var objBottomNavCloseImage = document.createElement("img");

objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);

objBottomNavCloseLink.appendChild(objBottomNavCloseImage);

},

 

//

// start()

// Display overlay and lightbox. If image is part of a set, add siblings to imageArray.

//

start: function(imageLink) {

 

hideSelectBoxes();

 

// stretch overlay to fill page and fade in

var arrayPageSize = getPageSize();

Element.setHeight('overlay', arrayPageSize[1]);

new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });

 

imageArray = [];

imageNum = 0;

 

if (!document.getElementsByTagName){ return; }

var anchors = document.getElementsByTagName('a');

 

// if image is NOT part of a set..

if((imageLink.getAttribute('rel') == 'lightbox')){

// add single image to imageArray

imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));

} else {

// if image is part of a set..

 

// loop through anchors, find other images in set, and add them to imageArray

for (var i=0; i<anchors.length; i++){

var anchor = anchors;

if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){

imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));

}

}

imageArray.removeDuplicates();

while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}

}

 

// calculate top offset for the lightbox and display

var arrayPageSize = getPageSize();

var arrayPageScroll = getPageScroll();

var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15);

 

Element.setTop('lightbox', lightboxTop);

Element.show('lightbox');

 

this.changeImage(imageNum);

},

 

//

// changeImage()

// Hide most elements and preload image in preparation for resizing image container.

//

changeImage: function(imageNum) {

 

activeImage = imageNum; // update global var

 

// hide elements during transition

Element.show('loading');

Element.hide('lightboxImage');

Element.hide('hoverNav');

Element.hide('prevLink');

Element.hide('nextLink');

Element.hide('imageDataContainer');

Element.hide('numberDisplay');

 

imgPreloader = new Image();

 

// once image is preloaded, resize image container

imgPreloader.onload=function(){

Element.setSrc('lightboxImage', imageArray[activeImage][0]);

myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);

}

imgPreloader.src = imageArray[activeImage][0];

},

 

//

// resizeImageContainer()

//

resizeImageContainer: function( imgWidth, imgHeight) {

 

// get current height and width

this.wCur = Element.getWidth('outerImageContainer');

this.hCur = Element.getHeight('outerImageContainer');

 

// scalars based on change from old to new

this.xScale = ((imgWidth + (borderSize * 2)) / this.wCur) * 100;

this.yScale = ((imgHeight + (borderSize * 2)) / this.hCur) * 100;

 

// calculate size difference between new and old image, and resize if necessary

wDiff = (this.wCur - borderSize * 2) - imgWidth;

hDiff = (this.hCur - borderSize * 2) - imgHeight;

 

if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }

if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }

 

// if new and old image are same size and no scaling transition is necessary,

// do a quick pause to prevent image flicker.

if((hDiff == 0) && (wDiff == 0)){

if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);}

}

 

Element.setHeight('prevLink', imgHeight);

Element.setHeight('nextLink', imgHeight);

Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2));

 

this.showImage();

},

 

//

// showImage()

// Display image and begin preloading neighbors.

//

showImage: function(){

Element.hide('loading');

new Effect.Appear('lightboxImage', { duration: 0.5, queue: 'end', afterFinish: function(){ myLightbox.updateDetails(); } });

this.preloadNeighborImages();

},

 

//

// updateDetails()

// Display caption, image number, and bottom nav.

//

updateDetails: function() {

 

Element.show('caption');

Element.setInnerHTML( 'caption', imageArray[activeImage][1]);

 

// if image is part of set display 'Image x of x'

if(imageArray.length > 1){

Element.show('numberDisplay');

Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);

}

 

new Effect.Parallel(

[ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }),

new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ],

{ duration: 0.65, afterFinish: function() { myLightbox.updateNav();} }

);

},

 

//

// updateNav()

// Display appropriate previous and next hover navigation.

//

updateNav: function() {

 

Element.show('hoverNav');

 

// if not first image in set, display prev image button

if(activeImage != 0){

Element.show('prevLink');

document.getElementById('prevLink').onclick = function() {

myLightbox.changeImage(activeImage - 1); return false;

}

}

 

// if not last image in set, display next image button

if(activeImage != (imageArray.length - 1)){

Element.show('nextLink');

document.getElementById('nextLink').onclick = function() {

myLightbox.changeImage(activeImage + 1); return false;

}

}

 

this.enableKeyboardNav();

},

 

//

// enableKeyboardNav()

//

enableKeyboardNav: function() {

document.onkeydown = this.keyboardAction;

},

 

//

// disableKeyboardNav()

//

disableKeyboardNav: function() {

document.onkeydown = '';

},

 

//

// keyboardAction()

//

keyboardAction: function(e) {

if (e == null) { // ie

keycode = event.keyCode;

} else { // mozilla

keycode = e.which;

}

 

key = String.fromCharCode(keycode).toLowerCase();

 

if((key == 'x') || (key == 'o') || (key == 'c')){ // close lightbox

myLightbox.end();

} else if(key == 'p'){ // display previous image

if(activeImage != 0){

myLightbox.disableKeyboardNav();

myLightbox.changeImage(activeImage - 1);

}

} else if(key == 'n'){ // display next image

if(activeImage != (imageArray.length - 1)){

myLightbox.disableKeyboardNav();

myLightbox.changeImage(activeImage + 1);

}

}

 

 

},

 

//

// preloadNeighborImages()

// Preload previous and next images.

//

preloadNeighborImages: function(){

 

if((imageArray.length - 1) > activeImage){

preloadNextImage = new Image();

preloadNextImage.src = imageArray[activeImage + 1][0];

}

if(activeImage > 0){

preloadPrevImage = new Image();

preloadPrevImage.src = imageArray[activeImage - 1][0];

}

 

},

 

//

// end()

//

end: function() {

this.disableKeyboardNav();

Element.hide('lightbox');

new Effect.Fade('overlay', { duration: 0.2});

showSelectBoxes();

}

}

 

// -----------------------------------------------------------------------------------

 

//

// getPageScroll()

// Returns array with x,y page scroll values.

// Core code from - quirksmode.org

//

function getPageScroll(){

 

var yScroll;

 

if (self.pageYOffset) {

yScroll = self.pageYOffset;

} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict

yScroll = document.documentElement.scrollTop;

} else if (document.body) {// all other Explorers

yScroll = document.body.scrollTop;

}

 

arrayPageScroll = new Array('',yScroll)

return arrayPageScroll;

}

 

// -----------------------------------------------------------------------------------

 

//

// getPageSize()

// Returns array with page width, height and window width, height

// Core code from - quirksmode.org

// Edit for Firefox by pHaez

//

function getPageSize(){

 

var xScroll, yScroll;

 

if (window.innerHeight && window.scrollMaxY) {

xScroll = document.body.scrollWidth;

yScroll = window.innerHeight + window.scrollMaxY;

} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac

xScroll = document.body.scrollWidth;

yScroll = document.body.scrollHeight;

} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari

xScroll = document.body.offsetWidth;

yScroll = document.body.offsetHeight;

}

 

var windowWidth, windowHeight;

if (self.innerHeight) { // all except Explorer

windowWidth = self.innerWidth;

windowHeight = self.innerHeight;

} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode

windowWidth = document.documentElement.clientWidth;

windowHeight = document.documentElement.clientHeight;

} else if (document.body) { // other Explorers

windowWidth = document.body.clientWidth;

windowHeight = document.body.clientHeight;

}

 

// for small pages with total height less then height of the viewport

if(yScroll < windowHeight){

pageHeight = windowHeight;

} else {

pageHeight = yScroll;

}

 

// for small pages with total width less then width of the viewport

if(xScroll < windowWidth){

pageWidth = windowWidth;

} else {

pageWidth = xScroll;

}

 

 

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)

return arrayPageSize;

}

 

// -----------------------------------------------------------------------------------

 

//

// getKey(key)

// Gets keycode. If 'x' is pressed then it hides the lightbox.

//

function getKey(e){

if (e == null) { // ie

keycode = event.keyCode;

} else { // mozilla

keycode = e.which;

}

key = String.fromCharCode(keycode).toLowerCase();

 

if(key == 'x'){

}

}

 

// -----------------------------------------------------------------------------------

 

//

// listenKey()

//

function listenKey () { document.onkeypress = getKey; }

 

// ---------------------------------------------------

 

function showSelectBoxes(){

selects = document.getElementsByTagName("select");

for (i = 0; i != selects.length; i++) {

selects.style.visibility = "visible";

}

}

 

// ---------------------------------------------------

 

function hideSelectBoxes(){

selects = document.getElementsByTagName("select");

for (i = 0; i != selects.length; i++) {

selects.style.visibility = "hidden";

}

}

 

// ---------------------------------------------------

 

//

// pause(numberMillis)

// Pauses code execution for specified time. Uses busy code, not good.

// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602

//

function pause(numberMillis) {

var now = new Date();

var exitTime = now.getTime() + numberMillis;

while (true) {

now = new Date();

if (now.getTime() > exitTime)

return;

}

}

 

// ---------------------------------------------------

 

 

 

function initLightbox() { myLightbox = new Lightbox(); }

Event.observe(window, 'load', initLightbox, false);

[boneazul 0]

feito em flash com certeza ...flash você consegue facilmente esses efeitos...

[jrcardozo 4]

feito em flash com certeza ...flash você consegue facilmente esses efeitos...

Caro boneazul, acredito que não seja flash, apesar de sua tese estar corretas, é facilmente obtido esse efeito....mas acho que este código foi feito em javascript.....observe que a imagem quando é aberta não exibe um arquivo flash(clique com o botão direito do mouse)

[Wilker 3]

o efeito eh feito em javascript, e nao eh tao dificil assim, eu agora tenho q sair e to sem tempo, mas amanha eu vo faze um exemplo identico, e posto aki pra vcs ;)

[Wilker 3]

pronto, akbei escrevendo + codigo do que eu esperava... mas tudo bem, olha soh, o processo de renderizacao nao ficou perfeito (em termo de performance) pq eu nao queria usar nenhuma api externa, entao o codigo inteiro ta ai, seria bom criar com uma classe, mas ta ai, bom estudo:

 

http://200.217.209.251/site/pessoal/wilker/efeito.zip

[RinaldFN 0]

Nossa Wilker valeu mesmo!

 

Ficou muito bom seu código!

 

Eu não manjo muito de JS, mas vou dar uma estudada!

 

 

você disse que o processo de renderizacao não ficou muito bom.. mas você diz no caso de ao abrir a imagem?

 

 

 

ps: Valeu ae a dedicação!

[Wilker 3]

eu falei referente a movimentacao dos elementos dentro da tela, por ser em browser usando javascript, o desempenho de renderizacao eh horrivel, entao a solucao eh aplicar algoritmos que podem tentar diminuir essa perda, esse tipo de algoritmo você pode aprender se estudar desenvolvimento de jogos, eles falam muito disso (eu aprendi mto lendo sobre um livro de desenvolvimento de jogos em Java), eu ateh ja implementei algo desse genero para javascript, mas esse codigo é muito grande e complicado de entender, entao eu postei esse ai tentando simplificar as coisas, num sistema como melhor desempenho, teria q fazer os calculos de FPS (Frames per Second), UPS (Updates per Second) e Frame Skip (pulo de quadros), calcular o tempo que leva a renderizacao, e compensar esse tempo fazendo calculos, saber o tempo perdido, e a medida que nescessario, processar 2 ou mais vezes antes de rendizar, para compensar o atrasoisso eh um ramo meio complicado, mas muito interessante, qdo eu tiver um tempo eu implemento algo de renderizacao pra javascript e posto ;)

[bastard2003 4]

isso ai é o lightbox... é JS mesmo! :D

 

não é tão complexo assim... é basicamente um ilusão... mas fica massa ne!! hehehe

[Wilker 3]

nao, nao eh o lightbox :Peh efeito similar, mas esse ai eu criei o codigo do 0 ;)

[bastard2003 4]

nao, nao eh o lightbox :Peh efeito similar, mas esse ai eu criei o codigo do 0 ;)

dai rapaz beleza?? desculpa... não estava falando do seu... e sim o do site do primeiro post! :P nem tinha visto o seu... agora baxei pra dar uma olhada... aproveitando o topico.... ja viu esse aqui??da uma olhada clica em adicionar conteudo... todo com drag and drop MT fera... me diz qq você axa?!?! abraços!

[Wilker 3]

umhum, nao sei se se é coincidencia, mas ja peguei o link desse site pelo menos uma 5 vezes hj... é bem interessante, eu ja tinha implementado coisas de janelas drag drop em JS e outras coisas, eh um trabalho realmente complicado, exige mta paciencia e um codigo bem estruturado, cnaum no final akba gerando uma bola de neve de problemas... eu to trabalhando num projeto meu agora, que eh uma grande biblioteca de javascript, com recursos de todo tipo, vai ficar bem legal qdo sair, ateh agora eu montei soh o Core dela (q usa o prototype como base, e faz algumas extensoes extras) e poucos componentes, mas com o tempo vai ser bem util ;)

[bastard2003 4]

show.... site qnd é bom o cara acaba vendo mais de uma vez mesmo!! heehhe... esse ai acabei encontrando numa busca sobre web 2.0... coisas bem uteis mesmo... ate tava procurando algum material relacionado a esse site... mas ta phoda quase todos os drag and drop não usam div, ou usam mas MT porcamente, pelo menos os que eu encontrei... nada melhor que o cara criar seu proprio ne... na empresa que eu trabalhoa tualmente estamos em estudo pra desenvolver o gerenciador do site dessa maneira ali... vai ser phoda MT... mas vai ficar massa....você tem algum material relacionado a isso?

[Wilker 3]

kra, eu n cheguei a olhar, mas provavelmente usam div sim, soh q eles usam divs criados dinamicamente, por isso eles nao aparecem no html, qdo você faz algo desse tipo (q + parece software do q site) o codigo HTML fica minino, tudo é criado dinamicamente por script, mas acho q usam div sim, pois é a coisa mais viavel a ser usada (mesmo q tenha uma tabela dentro do div)

[RinaldFN 0]

Wilker, é viavel usar o codigo que você criou online? Pois eu testei localmente e p movimento até que fica fera..

 

Mais se for online já não sei..

 

O que você recomenda?

 

Ps: este que você criou tem algum problema com a incompatibilidade de browsers?

[Wilker 3]

Wilker, é viavel usar o codigo que você criou online? Pois eu testei localmente e p movimento até que fica fera..

 

Mais se for online já não sei..

 

O que você recomenda?

 

Ps: este que você criou tem algum problema com a incompatibilidade de browsers?

kra, a velocidade depende do computador de quem esta acessando (afinal, o codigo javascript é processado no cliente).

 

você pode usar ele numa boa sim, eu soh quiz dizer que poderia ficar melhor, mas nao ta tao ruim assim :P

 

eu testei ele em IE e FireFox, nenhuma incompatibilidade.

 

talvez nao fique perfeito no Opera, pq pelo q eu me lembro, o opera tem certos problemas com transparecia (sendo mais expecifico, ele n tem esse recurso, ou pelo menos na epoca eu nao sabia usar)

 

mas isso nao vai causar nenhum desastre, soh n vai ficar igual ;)

[jrcardozo 4]

http://www.huddletogether.com/projects/lightbox2/

[RinaldFN 0]

Olá Wilker beleza?

 

Eu estou criando uma galeira de foto, e usei o seu script para fazer o efeito na abetura das fotos.

Eu usei basicamente o mesmo css e o mesmo javascript.

 

Só que tenho que percebido que quando acessamos a página de fotos pela primeira vez usando o IE e também algumas vezes no Fire fox, ao clicarmos em alguma foto ela abre meio fora de posição na tela. Depois que damos o segundo clique em outras fotos o problema acaba.

 

E também quando temos fotos no estilo retrato( largura menos que altura) ao abrirmos uma foto deste tipo.. e em seguinda abrir outra n estilo paisagem, também fica fora de posição.

 

Queria saber se existe alguma forma de contornar esta situação.

 

O endereço da página é: ESTE

 

E o endereco do java script é ESTE

 

 

Obrigado mais uma vez!

[Wilker 3]

depois eu do uma olhada kra, esse eu realmente fiz na pressa, eu queria + passar a ideia de como é para fazer um desses, depois eu faco outro certinho ;)

[RinaldFN 0]

Valeu cara! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif