Expressá-la

Com uma variedade de carrosséis lá fora, muitos para Mootools também, eu ainda decidi escrever minha própria classe Carousel, por algumas boas razões
1. Espontânea um recurso de paginação (para ser capaz de saltar um slide particular / passo no carrossel).
2. Desejavam a liberdade com a colocação dos botões ESQUERDA e DIREITA / links, onde quer que eu por favor.
3. Mais controle sobre os passos de slides.

Eu consegui criar um novo carrossel, com as características acima ... como abaixo ... Sinta-se livre para sugerir as modificações que exijam!

Meu exemplo parecido com este ... [ Ver Demo ]

Veja o Demo | Download de Mootools carrossel com paginação Versão 1.0 (baixado 1990 vezes)

1. Paging Carousel

Você pode facilmente adicionar a paginação para o carrossel, simplesmente definindo o sinalizador de paginação, que é parater última passou ao criar a instância do MooCarousel a verdade (quer paginação) ou falso (donot querendo paginação).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = número de slides, sss = tamanho do passo de slides

E claro que você pode mudar o look-n-feel destes achors de paginação que você queira, modificando o seu CSS.

. Carousel_paging {text-align: right; margin: 5px 10px 0 0;}
. Carousel_paging atual, página carousel_paging {outline: none; width:... 15px; height: 15px; line-height: 15px; text-align: center; display: block; float: left; background: # D8D8EB; margin: 0 0 0 1px; text-decoration: none;}

. Carousel_paging a: hover, carousel_paging atual {background: # 4D4D9B; color: # ffffff;}..

Bem! há um pequeno problema, porém, as âncoras de paginação se definido, então ele vai ficar sempre gerado depois que o componente do carrossel. Eu queria torná-lo dinâmico, bem como, mas apenas para manter o Script para soprar as proporções, eu decidi ignorá-lo.
Mas você sabe um pouco de JavaScript, você pode facilmente modificar o código de geração de paginação na classe MooCarousel para agradar às suas necessidades.

2. Personalizar os ícones de esquerda e direita

Você pode alterar o posicionamento, imagens ou qualquer propriedade displat dos botões esquerdo e direito simplesmente por brincar com o CSS. ser capaz de alterar as colocações dos buttoms Esquerda e Direita foi o motivo real para mim o meu direito Classe nosso carrossel.
Uma vez que esta classe MooCarousel, aceita o ID é um desses botões, você pode realmente colocar os botões em qualquer lugar da página, por favor ... não tem que ser na hierarquia de elementos, como no meu exemplo.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0; position: relative; width: 23px; height: 20px; float: left; cursor: pointer;}

. Carousel_container_r {background-position: 0-38px;}

. Carousel_container_l {background-position: 0-58px;}

3. Personalizar Passos de slides

O que quero dizer MEUS PASSOS SLIDE Personalização?
A maioria dos Carrosséis deslize o total com a janela visível. Então, dizer que você tinha quatro itens (como no meu exemplo acima), ele coloca todos os quatro itens. Com este componente Carrossel, Você passa o número de slides eo tamanho do passo de sua escolha.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = número de slides, c_sss = tamanho do passo de slides

Além disso, na minha example1 eu calcuted o tamanho do passo slide, baseado na lógica em que, eu sei que número de itens, a largura em cada item e as margens que deram depois de cada item no meu CSS.

/ * Para bacanal 1 * /

var c1_w = 92; Largura Item / farra /

var c1_n = 10; / Número / Total de Itens farra Comparação

var c1_pp = Número 4 / / Comparação de perpage Itens bacanal

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / sss = tamanho do passo de slides

var c1_ns = parseInt (((* c1_w c1_n) / c1_sss) + 0,5) / / NS = número de slides

c1_sss + = c1_marginFactor / / sss = tamanho do passo de slides, 51 para as margens

Requisitos: Mootools 1.2

Veja o Demo | Download de Mootools carrossel com paginação Versão 1.0 (baixado 1990 vezes)

Mootools MooRating é um (cross browser, é claro como ele usa o poder da biblioteca MooTools) simples, leves e excelente solução baseada em classificação. Não é denominado como "Votos", simplesmente porque, a imagem classificação poderia ser como você escolher (eu tenho desde Estrelas, Bares e corações com o download, mas você pode criar sua própria variedade e só soltá-lo in).

Como ele se parece:

	Mootools Avaliação com imagens diferentes Exibir demonstração
	Mootools Avaliação com valores percentuais Exibir demonstração
	Mootools Avaliação com valores fracionários Exibir demonstração

Baixar Mootols Votos Script (Transferido 718 vezes)

Dados Avaliação: Número inteiro, Decimal ou Percentual
Atualmente, o script foi criado para mostrar os dados de classificação como valores inteiros (1,2,3,4,5), em casas decimais (1,24, 3,45 etc) ou em percentagem (12%, 55% etc). A escolha para mostrar dados em qualquer um dos formatos mencionados pode ser definido simplesmente mudando alguns valores bandeira dentro do javascript (moorating.js)
Basicamente, existem dois e dois pavilhões para brincar, para exibir valores no formato de sua escolha ...

var inpercent = false; / / Defina esse sinalizador para true, se você precisar de valores percentuais, para ser exibida
var isFractional = false / / Defina esta opção para verdadeiro, se você quiser valores fracionários como 1,24, 1,25, 4,56, em vez de 1,2 ... 5

E eu não acho que há qualquer explicação necessária para isso. Além disso. O script é muito simples. Se você conhece um pouco Javascripting, você pode modificar o script para obter qualquer tipo de valor exibido. Por exemplo, se você quisesse três casas decimais a serem exibidas ... apenas ajustar o script como abaixo ...

if (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = FormatNumber (x, 3);.} / / 2 é alterada para 3
else {moostartval [i] innerHTML = Math.round (x).;

Atualizando Valor Classificação:
I havent incomodado escrever os scripts de AJAX para atualizar o valor Ratings, porque eu sei da minha experiência que nem sempre ele pretende atualizar o CLASSIFICAÇÃO assim que a coisa taxas de usuário. Você é livre para fazer o que quiser com o valor nominal, atualizá-lo usando AJAX ou apresentá-lo ou definir um valor de campo oculto de formulário, que será apresentado com todo o formulário, etc

função updateRating (id, classificação) {
/ / Alert (ID + "," rating +);
/ / Faça o que for COM A CLASSIFICAÇÃO
}

Há função no javascript chamada "updateRating". Esta função foi passada a identificação da Div Rating, para identificar como a classificação (se houver mais que uma classificação na página) foi atualizado eo valor da avaliação [updateRating (id, classificação)]. Você poderia escolher o que quiser com esses valores, como mencionei anteriormente.

Imagem Avaliação: estrelas, corações, Barras ou qualquer coisa que você queira
Alterando a classificação para qualquer um dos tipos acima (estrelas, etc corações) é muito simples. Basta criar uma imagem semelhante à prevista e solte-o dentro Lembre-se, se você alterar o nome da imagem, não fazer as mudanças necessárias no arquivo CSS, veja abaixo.

. Moostar {margin: 0px; padding: 0px; overflow: hidden; width: 84px; height: 20px; float: left; background: url ('stars.gif') repeat-x;}
. Moostar span {float: left; margin: 0px; padding: 0px; display: block; width: 84px; height: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') deixou 25px;}

A maioria dos widgets avaliações usar estrela e meia estrela de imagens com o mouse sobre os acontecimentos em cada estrela. Pontuações Moo usa uma imagem simples sprite como uma imagem de fundo para alcançar os efeitos desejados visuais com uma sobrecarga muito baixa.

Requisitos: Mootools 1.2
Baixar Mootols Votos Script (Transferido 718 vezes)

Eu estava procurando um controle deslizante duplo preso (slider com dois botões, mínimo e máximo), utilizando mootools. Embora, eu encontrei uma barra bem feito poucos casal preso no fórum mootools, O único problema era que toda a força destes controles deslizantes tem o marcador de intervalo selecionado. Finalmente! Eu decidi criar o meu próprio. Bem! Eu usei o código original e modificá-lo para ter um fundo deslizante que indicou a faixa selecionada visualmente, como no meu exemplo abaixo. As áreas de azul indica a gama de valor escolhido.

Veja o Demo Versão 2.2 | Mootools download double Pinned Versão Slider 2,2 (Transferido 11686 vezes)

Você pode facilmente mudar a aparência do indicador de intervalo (em azul no exemplo acima), o botão slider, o rasto do slider, modificando o slider.css conforme necessário.

Não me mande um comentário se você achar que é útil.

Antes tínhamos que lidar com CSS para criar layouts de nossas páginas, alinhando algum conteúdo dentro de uma célula da tabela parecia jogar apenas criança. Basta definir o "alinhamento" ou propriedade "valign" da tabela para o alinhamento de sua escolha, pedaço de bolo!
Com layouts CSS, embora tenhamos "vertical-align" propriedade para os elementos, ele não parece ser tão simples como a "alinhar" ou "valign" propriedades. Para ser mais specifiic o "vertical-align" nunca parece resolver qualquer um dos seus problemas, especialmente se forem escrever uma peça de cross-browser CSS.

Sem o uso de tabelas HTML, o problema da centralização no objeto, seja uma imagem ou um texto dentro de uma divisão contendo, provavelmente tem sido cada UI / CSS pesadelo desenvolvedores em algum ponto. Este problema ainda extrapola as suas preocupações de alinhar, se o objeto a ser centralizado é de natureza dinâmica, isto é, quando a sua altura é variável (altura desconhecido).

Embora não há nenhuma solução conhecida para a frente que iria trabalhar em toda a gama de navegadores que temos de lidar, a solução que eu tentei chegar a faz parece funcionar em todos os navegadores poucos que eu tentei em (IE6, IE 7 , FF).

SOLUÇÃO:
Em navegadores como Mozilla, Opera e Safari, O estranho comportamento "vertical-align" propriedade pode ser trazido para os seus sentidos, simplesmente definindo o "display" de propriedade da divisão contendo a "table-cell" (display: table-cell) .

O problema ainda permanece com a família de navegadores IE, que, no entanto, parecem não entender o que com o "table-cell" propriedade e ignorantes como são, eles simplesmente ignorá-lo. A solução dada abaixo, embora simples, anúncios de alguns elementos mais para o seu DOM HTML para fazer as coisas acontecerem.

A CSS e HTML se parece com isso
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> visualizações: 3456 </ div>
</ Div>
</ Div>

O resultado se parece com isso: -

ver a demo aqui | baixar arquivos de origem (baixado 452 vezes)

TOP Alinhar CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> visualizações: 1234 </ div>
</ Div>
</ Div>

O resultado se parece com isso: -

Alinhar Parte Inferior CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> visualizações: 1234 </ div>
</ Div>
</ Div>

O resultado se parece com isso: -

ver a demo aqui | Faça o download aqui

Parece que as idades, desde que eu estava tentando encontrar uma solução razoável para este problema de alinhamento. Mas agora, com esta solução, me sinto em paz pouco.

Com uma esperança de que algum dia

• vertical-alinhamento propriedade em CSS funcionará como ele faz dentro de uma célula da tabela, sem ter que bater muito em torno do arbusto
• Pelo menos, estabelecendo margin-top: auto e margin-bottom: auto, dará como resultado mesmo com a margem esquerda ea margem direita conjunto para auto
• As guerras do navegador vai acabar algum dia.
• Haverá apenas um navegador para a ALL.

Faça o download do CSS e HTML da solução acima aqui (Transferido 452 vezes) .. de compreensibilidade, o CSS não está sendo otimizado

PS: E pelo jeito, são miniaturas de algumas fotos que tenham clicado ...

Não que há apenas alguns LIGHTBOX do que você pode encontrar quando você google. O problema com a maioria das mesas de luz que eu encontrei foi a de que todos pareciam usar um ou os outros quadros de peso pesado javascript como jQuery, Prototype, MooTools e os gostos. Eles são tudo fresco e ostentoso procurando. Mas se a sua exigência é "MAS EU QUERO UM SCRIPT LIGHTBOX simples e leve para o meu site", então aqui está;

Algumas características interessantes desta mesa de luz

1. Muito claro
   uma. 4kb de Scripts quando embalados (8 kb descompactado)
   b. 2 kb de CSS
   c. Poucas linhas de código HTML para o recipiente lightbox
2. Simples de entender e implementar
3. Pode ter Lightboxes múltiplos na mesma página.
4. O recipiente de área de luz mesmo é usado para mostrar, teor diferente (o qual é separadamente incluído como divisões escondidos na página), dependendo da ligação / opção que é clicado.
5. Automaticamente centra-se, levando em consideração todos os fatores, tais como, altura e largura da janela (resolução de tela), a quantidade de rolagem e página a altura de o conteúdo da coleção
6. Testado no IE 7 e FF

Veja o Demo |
Baixar Zip Fonte Luz (Transferido 1803 vezes)

jo.js e jo_pack.js [versão] embalado: - um conjunto simples de JAVASCRIPT OBJETOS [JO], que contém janela elemento, e scripts de posicionamento de documentos. Você pode abrir JO.JS se quiser sujar as mãos com algum Javascripting avançada, a criação de funções abstratas, estendendo-se as propriedades do elemento e tal. Se você não demasiado, em Javascripting, Deixe-o sozinho.

lightbox.js, lightbox_pack.js [versão cheia]: - Conter os scripts gerente caixa de luz. Se você é designer da página, também responsável com a implementação do lightbox na página, você precisa entender o LightBoxManager. LightBoxManager contém basicamente apenas duas funções showLightBox e closeLightBox.

lightbox.css: - Se você conhece CSS, você pode brincar com lightbox.css para personalizar o look-n-se sentir lightbox.css

index.html: implementação de exemplo da mesa de luz com dois conteúdos diferentes

lb_underlay_bkg.png: - Este é luz / simi imagem transparente que é utilizado o fundo para o underlay coleção [Underlay é a camada abaixo do lighbox, que impede que o usuário clicar em qualquer outra entidade na página, enquanto que a coleção está aberta]. É possível utilizar qualquer imagem ou mesmo uma cor sólida para este fim, dependendo do desenho de página eo requisito.

icon_lb_close.gif: - A imagem de alça lightbox perto no canto superior direito da caixa de luz. Pode usar qualquer imagem como por o projeto

Veja o Demo |
Baixar Zip Fonte Luz (Transferido 1803 vezes)

Por favor, vamos ter os seus comentários e feedback ...

Se você é um daqueles caras (como eu), que muitas vezes verificar a CSS bem feito de página HTML, para se inspirar ou o que quer, então você deve ter notado que temos usado Posicionamento FAUX (como já mencionado em meu artigo anterior Somos usando posicionamento absoluto falso: Um Layout CCS Brilhante )

Fizemos um bom trabalho neste modelo, então pensei que seria bom para compartilhá-lo .... Download Tema WordPress (baixado 196 vezes)