Слайдер товара как в интернет-магазинах

Добрый день посетители этого замечательного ресурса, я простой пользователь который черпает идеи с этого сайта, и считает его по праву самым лучшем в своей тематике, вдохновлённый работой Tiaurusa, я смог построить довольно большой портал объявлений на базе движка WordPress, ссылку я даю не ради рекламы, да оно мне и ненужно, просто если у кого то возникнут вопросы по внедрению интересного функционала этого сайта, задавайте с удовольствием отвечу.

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

1. Вот так собственно говоря выглядит сам слайдер:

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

function changeimg(imgSrc){
 document.getElementById("base_image").src = imgSrc;
 document.getElementById("image_url").href = imgSrc;
}

Понятно, что этот скрипт отвечает за общую структуру и работу слайдера.

3. Код для вывода слайдера через произвольные поля выглядит так:

</pre>
<p>4. Теперь немного css классов для этого кода, понятно, что я лишь даю пример для творчества, css каждый редактирует под себя и свои нужды:</p>
<pre>.leftbox {
width:20%;
float: left;
position: relative;
text-align: center;
display: block;
}
.NextImages {
display: block;
position: relative;
width: 17%;
margin-left:2%;
margin-top:-10px;
border: 1px solid #fff;
}
#base_image{
display: block;
position: relative;
width: 98%;
margin-right:3px;
margin-left:3px;
}
.back {
float: left;
display: block;
}

5. Ну а теперь будем разбираться, что к чему. Ну во первых я подготовил небольшой пример, чтоб наглядно было видно и ясно, о чём именно я пытался Вам рассказать, находится он по ссылке тут. Теперь создавая запись и добавляя в произвольные поля slide, slide-1, slide-2, slide-3, slide-4 ссылки изображений которые можно взять в библиотеке медиафайлов, кликнувши непосредственно по изображению, или при добавление нового изображения, везде прописывается путь к файлу вот именно его и надо вставлять в произвольное поле, я долго искал способ автоматизирования этой задачи, но к сожалению не нашёл такового, поэтому всё приходиться делать ручками, но я бы не назвал этот процесс трудоёмким, заказчик почти сразу наловчился выполнять эту задачу. Далее слайдер мы создали, но картинки ведь бываю большими и маленькими, квадратными и прямоугольные, так вот что бы этот процесс довести до автоматизма, в том плане, что картинки должны быть урезаны по данным нам параметрам я использовал простой скрипт который Вы можете скачать в интернете и поместить в корневую папку вашего сайта названия ему timthumb.php также много информации по нему есть на этом сайте, достаточно воспользоваться поиском. Ну и последний момент на который хотелось бы обратить внимание это реализации плагина Easy FancyBox про который Вы можете также прочесть на этом сайте.

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

Также читайте обзор шаблона Bono для современных интернет-магазинов со встроенным слайдером.