Parece que la obsesión de la industria del diseño web en este momento es la capacidad de crear una "sección destacada". Si bien una vez puede haber requerido mucha habilidad, ese ya no es el caso. En este screencast, te mostraré cómo crear fácilmente una sección destacada desplazable usando uno de los temas populares de Theme Forest como referencia. Vamos a entrar en eso!
* Lo siento por la calidad de audio menos que perfecta. Quería tomar un micrófono de condensador esta semana, pero he estado muy ocupado. Prometo que me encarguen de eso lo antes posible. Además, si está interesado en crear tutoriales en video para nosotros, envíeme un correo electrónico a [email protected].
Puedes ver y comprar el tema de Justin aquí.
Como siempre con un nuevo complemento, el primer paso es visitar el sitio web del creador y descargar el complemento. Todo lo que necesitará es un pequeño archivo de JavaScript y, por supuesto, una copia de la biblioteca principal de jQuery. Mientras esté en el sitio, tómese unos minutos para repasar los conceptos. Se sorprenderá de lo sencilla que es la implementación, ¿hablando relativamente (o escribiendo?).
Una vez que haya guardado el archivo Javascript en su disco duro, importe en una nueva aplicación web como.
* Tenga en cuenta que debe importar la biblioteca central antes de jFlow. De lo contrario, obtendrá algunos errores evidentes!
Para usar el complemento jFlow, deberá comprender la función de algunos ID y clases..
No 1 No 2 Numero 3Aquí hay una imagen destacada. Bonito!
Aquí hay otra imagen destacada. Bonito!
Aquí hay una última imagen destacada muy interesante. Bonito!
Vamos a repasar esto un poco.
El código que tenemos que escribir es bastante simple. Primero, revise el guión final, y luego repasaré cada línea.
$ (función () $ ("# controller"). jFlow (diapositivas: "#slides", ancho: "980px", altura: "313px", duración: 600););
Eso es!. Primero, estamos a la espera de que el documento esté listo para ser recorrido. Luego, tomamos nuestro controlador div y llamamos al método "jFlow". Hay muchos parámetros disponibles para nosotros, pero solo usaremos algunos.
Lo único que querrás implementar es un estilo CSS. Sin embargo, jFlow funcionará perfectamente sin él. Eso obviamente solo sería por razones estéticas. Si deseas más información, repaso el estilo un poco más en el screencast.
Lo único que querrás implementar es un estilo CSS. Sin embargo, jFlow funcionará perfectamente sin él. Eso obviamente solo sería por razones estéticas. Si deseas más información, repaso el estilo un poco más en el screencast.
El diseño que se ve arriba es intencionalmente simple. Te lo dejo a ti para que imagines todos los diferentes usos.!
Hace unas semanas, Chris Coyier creó un tutorial sobre un complemento similar: "codaSlider". Personalmente, he usado el complemento en un par de proyectos, sin embargo, he encontrado que jFlow es mucho más simple y fácil de usar. De cualquier manera, ambos son potentes complementos. Úsalos sabiamente.
Puede agregar nuestra fuente RSS a sus podcasts de ITUNES haciendo lo siguiente:
¡Deberias hacer eso! El screencast también se podrá buscar en ITUNES en las próximas veinticuatro horas.
Este es el sitio de inicio del plugin jFlow. Le ayudará a comenzar con el archivo Javascript junto con algunos ejemplos útiles..
Visita la página web
Si desea obtener más información o simplemente ganar algo de dinero extra, asegúrese de visitar ThemeForest.net..
Visita la página web
Echa un vistazo a otro plugin de jQuery que realiza una función similar. En este tutorial, Chris Coyier te mostrará cómo puedes implementar el plugin coda slider para crear un blogroll hermoso.
Lee el artículo