Expresa-la

Con unha variedade de carrosséis aí fóra, moitos para Mootools tamén, eu decidín escribir a miña propia clase Carousel, por algunhas boas razóns
1. Espontánea un recurso de programación (para poder ir unha foto particular / paso no carrusel).
2. Desexaban a liberdade coa colocación dos botóns esquerda e dereita / enlaces, onde queira que eu por favor.
3. Máis control sobre os pasos de diapositivas.

Eu conseguir crear un novo carrusel, coas características anteriormente ... como a continuación ... Sinto-se libre para suxerir as modificacións que requira!

O meu exemplo coma este ... [ Ver Demo ]

Vexa o Demo | Descargar Mootools carrusel con paxinación Versión 1.0 (baixo 1986 veces)

1. Paging Carousel

Pode facilmente engadir a programación para o carrusel, simplemente definindo o sinalizador de paxinación, que é parater última pasou ao crear a instancia do MooCarousel a verdade (é paxinación) ou falso (donot querendo programación).

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / s = número de diapositivas, SSS = tamaño do paso de diapositivas

E claro que pode cambiar o look-n-feel destes achors de paxinación que queira, modificando o seu CSS.

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

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

Ben! hai un pequeno problema, porén, as áncoras de paxinación se definido, polo que se ve sempre xerado despois de que o compoñente do carrusel. Eu quería facelo dinámico, así como, pero só para manter o Script para soprar as proporcións, eu decidir ignore-lo.
Pero vostede sabe un pouco de JavaScript, pode facilmente modificar o código de xeración de programación na clase MooCarousel para agradar ás súas necesidades.

2. Personalizar as iconas de esquerda e dereita

Pode cambiar o posicionamento, imaxes ou calquera propiedade displat dos botóns esquerdo e dereito simplemente por xogar con CSS. poder cambiar as colocacións dos buttoms esquerda e dereita foi a razón real para min o meu dereito Clase noso carrusel.
Unha vez que esta clase MooCarousel, acepta o ID é un deses botóns, pode realmente colocar os botóns en calquera lugar da páxina, por favor ... non ten que ser na xerarquía 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 Pasos de diapositivas

O que quero dicir meus pasos foto Personalización?
A maioría dos carrosséis mova o total coa fiestra visible. Entón, dicir que tiña catro elementos (como no meu exemplo anterior), pon todos os catro elementos. Con este compoñente Carrossel, Vostede pasa o número de diapositivas eo tamaño do paso da súa elección.

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = número de diapositivas, c_sss = tamaño do paso de diapositivas

Ademais, na miña example1 eu calcuted o tamaño do paso foto, baseado na lóxica en que, sei que número de elementos, o ancho de cada elemento e as marxes que deron despois de cada elemento no meu CSS.

/ * Para bacanal 1 * /

var c1_w = 92; Ancho Elemento / farra /

var c1_n = 10; / Número / Cantidade de elementos farra Comparación

var c1_pp = Número 4 / / Comparación de perpage Elementos bacanal

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / SSS = tamaño do paso de diapositivas

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

c1_sss + = c1_marginFactor / / SSS = tamaño do paso de diapositivas, 51 para as marxes

Requisitos: Mootools 1.2

Vexa o Demo | Descargar Mootools carrusel con paxinación Versión 1.0 (baixo 1986 veces)

Mootools MooRating é un (cross navegador, claro como el usa o poder da biblioteca MooTools) simple, leves e excelente solución baseada en clasificación. Non é denominado como "votos", simplemente porque, a imaxe clasificación podería ser como elixir (eu teño dende estrelas, Bares e corazóns con a descarga, pero pode crear a súa propia variedade e só soltalo in).

Como se parece:

	Mootools Avaliación con imaxes diferentes Ver demostración
	Mootools Avaliación con valores porcentuais Ver demostración
	Mootools Avaliación con valores fracionários Ver demostración

Descargar Mootols votos Script (Trasladado 716 veces)

Datos Avaliación: Número enteiro, Decimal ou Porcentaxe
Actualmente, o guión foi creado para mostrar os datos de clasificación como valores enteiros (1,2,3,4,5), en cifras decimais (1,24, 3,45, etc) ou en porcentaxe (12%, 55% etc). A opción para mostrar datos en calquera dos formatos mencionados pode definirse simplemente cambiando algúns valores bandeira dentro do javascript (moorating.js)
Basicamente, hai dous e dous pavillóns para xogar, para amosar valores en formato da súa elección ...

var inpercent = false; / / Define ese sinalizador para true, se precisa de valores porcentuais, para ser exhibida
var isFractional = false / / Define esta opción para certo, se queres valores fracionários como 1,24, 1,25, 4,56, en vez de 1,2 ... 5

E eu non creo que haberá explicación necesaria para iso. Ademais. O script é moi sinxelo. Se coñeces un pouco Javascripting, pode modificar o script para obter calquera tipo de valor exhibido. Por exemplo, se quixese tres cifras decimais a mostrar ... só axustar a escritura como a continuación ...

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

Actualizando Valor Clasificación:
I havent incómodo escribir os guións de AJAX para actualizar o valor Ratings, porque sei da miña experiencia que non sempre pretende actualizar o CLASIFICACIÓN así que a cousa taxas de usuario. Vostede é libre de facer o que quere co valor nominal, actualiza-lo usando AJAX ou presenta-lo ou establecer un valor de campo oculto de formulario, que se presentará con todo o formulario, etc

función updateRating (id, clasificación) {
/ / Alert (ID + "," rating +);
/ / Fai o que sexa coa clasificación
}

Hai función o javascript chamada "updateRating". Esta función foi pasada a identificación da Div Avaliación, para identificar como a clasificación (se hai máis que unha clasificación na páxina) foi actualizado eo valor da avaliación [updateRating (id, clasificación)]. Podería elixir o que quere con eses valores, como mencionei anteriormente.

Imaxe Avaliación: estrelas, corazóns, barras ou calquera cousa que queira
Alterando a clasificación para calquera dos tipos anteriores (estrelas, etc corazóns) é moi sinxelo. Só ten que crear unha imaxe semellante á prevista e solte-o dentro Teña en conta que, se cambiar o nome da imaxe, non facer os cambios necesarios no ficheiro CSS, vexa 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; Mostrar: block; width: 84px; height: 20px; text-decoration: none; text-indent:-9000px; z-index: 20;}
.. Moostar curr {background: url ('stars.gif') deixou 25px;}

A maioría dos widgets avaliacións usar estrela e media estrela de imaxes co rato sobre os acontecementos en cada estrela. Puntuacións Moo usa unha imaxe simple sprite como unha imaxe de fondo para alcanzar os efectos desexados visuais con unha sobrecarga moi baixa.

Requisitos: Mootools 1.2
Descargar Mootols votos Script (Trasladado 716 veces)

Eu estaba a buscar un control deslizante dobre preso (Slider con dous botóns, mínimo e máximo), utilizando mootools. Aínda que, eu atope unha barra ben feito poucos parella preso no foro mootools, O único problema era que toda a forza destes controis deslizantes ten o marcador de intervalo seleccionado. Finalmente! Eu decidimos crear o meu propio. Ben! Eu usei o código orixinal e modificalo para ter un fondo deslizante que indicou a franxa seleccionada visualmente, como no meu exemplo abaixo. As áreas de azul indica a gama de valor escollido.

Vexa o Demo Versión 2.2 | Mootools descargar double Pinned Versión Slider 2,2 (Trasladado 11589 veces)

Pode facilmente cambiar a aparencia do indicador de intervalo (en azul no exemplo anterior), o botón Slider, o rastro do slide, modificando o slider.css sexa necesario.

Non me mande un comentario se cre que é útil.

Antes tiñamos que tratar con CSS para crear esquemas das nosas páxinas, aliñado algún contido dunha cela de táboa parecía xogar só neno. Só ten que definir o "aliñamento" ou propiedade "valign" da táboa para o aliñamento da súa elección, peza de bolo!
Con esquemas CSS, aínda que teñamos "vertical-align" propiedade para os elementos, non parece ser tan simple como a "aliñar" ou "valign" propiedades. Para ser máis specifiic o "vertical-align" nunca parece resolver calquera dos seus problemas, especialmente se se escribir unha peza de cross-browser CSS.

Sen o uso de táboas HTML, o problema da centralización no obxecto, sexa unha imaxe ou un texto dentro de unha división contén, probablemente foi cada UI / CSS pesadelo desenvolvedores nalgún punto. Este problema aínda extrapola os seus problemas de aliñar, se o obxecto a ser centralizado é de natureza dinámica, é dicir, cando a súa altura é variable (momento descoñecido).

Aínda que non hai ningunha solución coñecida para a fronte que ía traballar en toda a gama de navegadores que temos que tratar, a solución que eu tente chegar a fai parece funcionar en todos os navegadores poucos que eu tente o (IE6, IE 7 , FF).

SOLUCIÓN:
En navegadores como Mozilla, Opera e Safari, O estraño comportamento "vertical-align" propiedade pode ser levado para os seus sentidos, simplemente definindo o "display" de propiedade da división contén a "table-cell" (Mostrar: table-cell) .

O problema aínda permanece coa familia de navegadores IE, que, con todo, parecen non entender o que co "table-cell" propiedade e ignorantes como son, simplemente ignore-lo. A solución dada a continuación, aínda que sinxela, anuncios de algúns elementos máis para o seu don HTML para facer as cousas ocorrer.

A CSS e HTML parece que
.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/> visualizacións: 3456 </ div>
</ Div>
</ Div>

O resultado parece isto: -

ver a demo aquí | baixar arquivos de orixe (baixo 451 veces)

TOP Aliñar 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/> visualizacións: 1234 </ div>
</ Div>
</ Div>

O resultado parece isto: -

Aliñar ao final 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/> visualizacións: 1234 </ div>
</ Div>
</ Div>

O resultado parece isto: -

ver a demo aquí | Descarga aquí

Parece que as idades, dende que eu estaba tentando atopar unha solución razoable a este problema de liña. Pero agora, con esta solución, me sinto en paz pouco.

Cunha esperanza de que algún día

• vertical-liña propiedade en CSS funcionará como fai dentro dunha cela de táboa, sen ter que bater moito sobre o arbusto
• Polo menos, establecendo Margin-top: auto e Margin-bottom: auto, dará como resultado mesmo coa marxe esquerda ea marxe dereita conxunto para auto
• As guerras do navegador vai acabar algún día.
• Haberá só un navegador para a ALL.

Descarga o CSS e HTML da solución anterior aquí (Trasladado 451 veces) .. de compreensibilidade, CSS non está a ser óptimo

PS: E ao parecer, son miniaturas de algunhas fotos que teñan premendo ...

Non é que hai só uns LIGHTBOX que podes atopar cando google. O problema coa maioría das mesas de luz que eu atope foi a de que todos parecían usar un ou os outros cadros de peso pesado javascript como jQuery, Prototype, MooTools e os gustos. Son todo fresco e ostentoso procurar. Pero a súa esixencia é "pero quero un script LIGHTBOX sinxelo e leve para o meu sitio", entón aquí está;

Algunhas características interesantes desta mesa de luz

1. Moi claro
   unha. 4kb de scripts cando embalados (8 kb descomprimido)
   b. 2 KB de CSS
   c. Poucas liñas de código HTML para o recipiente lightbox
2. Sinxelo de entender e aplicar
3. Pode ter Lightboxes múltiples na mesma páxina.
4. O recipiente de área de luz aínda se usa para amosar, contido diferente (o cal é separado incluído como divisións escondidos na páxina), dependendo da conexión / opción que é premendo.
5. Automaticamente céntrase en conta que, tendo en conta todos os factores, tales como, alto e ancho da ventá (resolución de pantalla), a cantidade de desprazamento e páxina a altura o contido da colección
6. Probado no IE 7 e FF

Vexa o Demo |
Descargar Zip Orixe Luz (Trasladado 1797 veces)

jo.js e jo_pack.js [versión] embalado: - un conxunto sinxelo de Javascript obxectos [DO], que contén ventá elemento, e scripts de posicionamento de documentos. Pode abrir JO.JS se quere ensuciar as mans con algún Javascripting avanzada, a creación de funcións abstractas, estendéndose as propiedades do elemento e tal. Se non demasiado, en Javascripting, deixe-o só.

lightbox.js, lightbox_pack.js [versión completa]: - conter os scripts manager caixa de luz. Se vostede é deseñador da páxina, tamén responsábel coa implementación do lightbox na páxina, cómpre entender o LightBoxManager. LightBoxManager contén basicamente só dúas funcións showLightBox e closeLightBox.

lightbox.css: - Se coñece CSS, pode xogar con lightbox.css para personalizar o look-n-se sentir lightbox.css

index.html: aplicación de exemplo da mesa de luz con dous contidos diferentes

lb_underlay_bkg.png: - Este é luz / Simi imaxe transparente que é utilizado o fondo para o underlay colección [underlay é a capa por baixo do lighbox, que impide que o usuario fai clic en calquera outra entidade na páxina, mentres que a colección está aberta]. Pode empregar calquera imaxe ou mesmo unha cor sólida para este fin, dependendo do deseño da páxina eo requisito.

icon_lb_close.gif: - A imaxe de manexar lightbox preto na esquina superior dereita da caixa de luz. Pode empregar calquera imaxe como por o proxecto

Vexa o Demo |
Descargar Zip Orixe Luz (Trasladado 1797 veces)

Por favor, imos ter os seus comentarios e feedback ...