jQuery

CLOUD ZOOM - эффектное увеличение изображений или товара на jQuery

Суббота, 26 апреля 2014 г.
Рубрика: Web-мастеринг
Метки:
Просмотров: 13818
Подписаться на комментарии по RSS

Cloud Zoom

Cloud Zoom - качественный и легкий jQuery-скрипт позволяющий масштабировать изображения. Хорошо подходит для детально показа товара в интернет-магазине, где весьма популярен.

К примеру, он используется на сайте интернет-магазина Еldorado, в чем легко убедиться если заглянете в код странички, собственно там же можно посмотреть работу скрипта в действии. Cloud Zoom имеет довольно много настроек, совместим со всеми современными браузерами и даже древним IE6 (сам не проверял), кроме того весит скрипт всего навсего 7Kb.

С сайта на сайт кочует практически одно и то же описание (долбаные копипастеры) этого чудесного скрипта и ссылка на скачивание версии V1.02, в то время как на github давно лежит версия Cloud Zoom V1.03.

Насколько я понял, новая версия Cloud Zoom V3.1 платная и начинается от 25 евро да лицензию на один сайт, а вот старая версия имеет MIT License, то есть мы можем спокойно использовать её в своих проектах, за что спасибо автору. Я правда нашел один недостаток в скрипте, а именно невозможность показывать разные заголовки при выводе галереи изображений. Версию скрипта, где данная проблема устранена, можно скачать с моего сайта, ссылка есть в конце статьи. Пример работы скрипта.

читать полностью →

Slider Kit - лёгкий и мультифункциональный jQuery плагин

Наткнулся тут на один очень качественный, легкий и в то же время функциональный jQuery плагин Slider Kit. Позволяет создавать практически любой тип слайд-шоу от простой фото-галереи до навороченных новостных крутилок с временной шкалой и всевозможными эффектами. Имеется встроенная поддержка как горизонтальных, так и вертикальных слайдеров с навигацией, карусели и вообще практически всё что душа пожелает.

Есть одно "но", необходимы хотя бы начальные знания и представления о том как работает jQuery, понимание построения правил CSS. В этом случае, вы получаете поистине уникальный инструмент, который позволяет делать эффектные слайдеры и представления ваших данных.

К сожалению, официальная страничка плагина сейчас не открывается http://www.kyrielles.net/sliderkit/sliderkit_en.html

Плагин можно скачать с гугла https://code.google.com/p/sliderkit/, тем более в архиве присутствуют все примеры и полное описание.

читать полностью →

Кнопка «Вверх» для сайта на jQuery от Яндекса

Четверг, 23 мая 2013 г.
Рубрика: Web-мастеринг
Метки: |
Просмотров: 9732
Подписаться на комментарии по RSS
наверх

Привет! Сегодня расскажу о том, как легко прикрутить к любому блогу или форуму кнопку "ВВЕРХ" как у меня на сайте. Удобства и интерактивности никогда не бывает много, тем более, когда это не занимает много времени. Этот простой и легкий скрипт на jQuery я подсмотрел на Yandex и сделал себе аналогичный.

Вообще, в настоящее время, разработка сайтов всё больше напоминает конструктор. В сети полно готовых скриптов и модулей, которые остается только грамотно скомпоновать на своем сайте. Но, для этого, всё-таки, необходимо иметь начальные знания и представления о CSS, PHP и JavaScript.

Понадобится всего пара минут времени для создания красивой и работающей кнопочки "Наверх"! (единственное условие - у вас должна быть подключена библиотека jQuery).

читать полностью →

Избранные jQuery галереи и слайдеры

Вторник, 21 мая 2013 г.
Рубрика: Web-мастеринг
Метки: | |
Просмотров: 10224
Подписаться на комментарии по RSS

Современные сайты, за редким исключением, не обходятся без какого нибудь слайдера или ротатора изображений. Это реально оживляет картинку и радует глаз, ведь встречают, как известно, по одежке.

Представляю собственную подборку наиболее интересных, оригинальных и эффектных, на мой взгляд, слайдеров на jQuery. Основное отличие от других подобных обзоров - практическая направленность, слайдеры и галереи, которые либо уже использовал в своих проектах, либо собираюсь использовать в будущем, а не просто собранные для массовости, абы какие скрипты. Заодно почищу закладки в браузере - будут храниться в блоге.


TN3 Gallery

jQuery галерея и слайд-шоу. TN3 Gallery

читать полностью →

Простой и красивый спойлер на jQuery

Вторник, 27 сентября 2011 г.
Рубрика: Web-мастеринг
Метки: |
Просмотров: 26956
Подписаться на комментарии по RSS

Сегодня хочу рассказать о простом и, в то же время, довольно эффектном способе отображения текста на сайте. Наверняка вы не раз встречались со спойлерами на различных ресурсах, в основном при организации вертикальных выпадающих меню или скрытия/отображения дополнительной информации. Спойлеры помогают не загромождать станицу, сделать текст более читаемым и добавляют интерактивности.

Спойлер будем делать на jQuery. Данный вариант предполагает неограниченную вложенность и кроссбраузерность.

Пример того, что должно получиться

Выдержка из Wiki:

Спо?йлер, англ. to spoil — «гадить», «отравлять», «портить».

В языках программирования HTML, Javascript и т.п. спойлером называют скрывающийся (или показывающийся) объект (текст, картинка и т.д.).

Не правда-ли, довольно не плохой эффект? К тому же позволяющий прятать не только текст, но и картинки, таблицы, да вообще практически любую html разметку.

Как видите, под спойлером прячется не простой текст, а с html разметкой. Ну что, пришло время рассказать, как вся эта красота делается.

читать полностью →

jQuery слайдшоу jqFancyTransitions

Среда, 15 июня 2011 г.
Рубрика: Web-мастеринг
Метки: |
Просмотров: 5974
Подписаться на комментарии по RSS

слайдшоу jqFancyTransitions

Так уж получилось, что темы последних статей посвящены исключительно WEB строительству и всему что с этим связано. Что поделать, на то он и блог, чтобы писать о том, чем занимаюсь в данный отрезок времени. И сегодня продолжу начатую тему - рассказ мой будет о замечательном jQuery плагине jqFancyTransitions. Демо можно посмотреть на сайте разработчика.

jqFancyTransitions предельно простой в установке и использовании JQuery плагин для создания эффектного слайд-шоу на вашем сайте. По заявлению разработчика, jqFancyTransitions совместим с Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+, т.е. корректно работает во всех современных браузерах.

читать полностью →

Лучшие слайдеры (слайдшоу) на jQuery

Воскресенье, 23 января 2011 г.
Рубрика: Web-мастеринг
Метки: |
Просмотров: 15070
Подписаться на комментарии по RSS

Современный сайт без фреймворков jQuery или MooTools уже сложно представить. В новом проекте сайта-визитки для одной строительной компании решил использовать слайдер на jQuery.

Писать слайдер самостоятельно для бюджетного сайта удовольствие сомнительное, сродни изобретению велосипеда, тем более в сети есть множество готовых свободных решений данной задачи, причем сделанных профессионально и очень качественно. Цель статьи - написать о наиболее понравившихся слайдерах, написанных на jQuery. На мой взгляд, по настоящему достойных плагинов оказалось не много. Основные требования, кроме естественно красоты, малый размер, скорость работы и совместимость с наиболее популярными браузерами, включая IE6.

Описания установки можно найти на официальных сайтах плагинов, если возникнут затруднения, то в одной из следующих статей постараюсь рассказать на примере как и что нужно делать. Итак, знакомьтесь:

s3Slider jQuery plugin

| демо

s3Slider jQuery plugin

Плагин подходит для создания небольших слайдшоу с комментариями, причем легко интегрируется в проект. Выглядит довольно симпатично, хоть и используется единственный эффект смены изображений. Впрочем, лучше один раз увидеть что можно получить, так что смотрите демо.

читать полностью →