Слайдер для видео и слайдер для картинок

sam4eq · January 19, 2012

Здравствуйте уважаемые форумчане! Перехожу сразу к сути вопроса

Необходимо найти слайдер видео и слайдер картинок для статичного сайта (все это на одной странице).

Слайдер видео: тут думаю все понятно, по аналогии со слайдером картинок, только видео с ютуба.

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

При этом у обоих слайдеров навигационные кнопки "вперед" и "назад".

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

Пока не знаю на сколько ясно я выразил то, что мне необходимо, по ходу общения думаю разберемся

Заранее огромное спасибо за все ответы

(сори если не туда запостил топик)

П.С.: Разумеется, я имею в виду не создание данных слайдеров с нуля, а поиск уже имеющихся с возможностью адаптации под свои нужды

Edited January 19, 2012 by sam4eq

sammasati · January 19, 2012

Такие слайдеры делаются на jQuery, и, в принципе, тут ничего сложно нету. В интернете полно как самих слайдеров так и учебных статей, объясняющих как их делать. Вот, например, одна. Можно ещё погуглить: так или так. Что именно крутить (картинку или видео) разницы нету.

sam4eq · January 20, 2012

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

sam4eq · January 20, 2012

Такие слайдеры делаются на jQuery, и, в принципе, тут ничего сложно нету. В интернете полно как самих слайдеров так и учебных статей, объясняющих как их делать. Вот, например, одна. Можно ещё погуглить: так или так. Что именно крутить (картинку или видео) разницы нету.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<link href="Untitled-4.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

</head>

<body>
<div id="gallery-wrap">
    <ul id="gallery">
        <li><a href="image1.jpg"><img src="thumb1.jpg" alt="" /></a></li>
        <li><a href="image2.jpg"><img src="thumb2.jpg" alt="" /></a></li>
        <li><a href="image3.jpg"><img src="thumb2.jpg" alt="" /></a></li>
        <li><a href="image1.jpg"><img src="thumb1.jpg" alt="" /></a></li>
        <li><a href="image2.jpg"><img src="thumb2.jpg" alt="" /></a></li>
        <li><a href="image3.jpg"><img src="thumb2.jpg" alt="" /></a></li>
    </ul>
</div>
<div id="gallery-controls">
    <a href="#" id="gallery-prev"><img src="images/prev.png" alt="" /></a>
    <a href="#" id="gallery-next"><img src="images/next.png" alt="" /></a>
</div>
<script type="text/javascript">
$(document).ready(function(){ 

    // Gallery
    if(jQuery("#gallery").length){

        // Declare variables
        var totalImages = jQuery("#gallery > li").length,
            imageWidth = jQuery("#gallery > li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth);

        jQuery("#gallery").width(totalWidth);

        jQuery("#gallery-prev").click(function(){
            if(jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")){
                jQuery("#gallery").animate({left : "+=" + imageWidth + "px"});
            }
            return false;
        });

        jQuery("#gallery-next").click(function(){
            if(jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")){
                jQuery("#gallery").animate({left : "-=" + imageWidth + "px"});
            }
            return false;
        });
    }

});
</script>
</body>
</html>

sammasati · January 20, 2012

Ну так оно и не должно открываться

Это только самая основа слайдера. А чтобы открывалось всплывающее окно нужно писать обработчик события (клика по картинке), выводить её в див, позиционировать этот див и прочее-прочее. Дерзайте, в инете полно информации по jQuery, и даже на русском. Ну, или наймите фрилансера

sam4eq · January 20, 2012

Ну так оно и не должно открываться 
Это только самая основа слайдера. А чтобы открывалось всплывающее окно нужно писать обработчик события (клика по картинке), выводить её в див, позиционировать этот див и прочее-прочее. Дерзайте, в инете полно информации по jQuery, и даже на русском. Ну, или наймите фрилансера

Спасибо за ответ! Уже справился, оказалось не слишком сложно, поковырялся в коде "демки" данного слайдшоу, нашел что надо, подставил - все работает Теперь только с видео слайдером разобраться надо будет Если возникнут проблемы я могу надеяться на вашу помощь?

sam4eq · January 20, 2012

упс... мультипост получился..

Edited January 20, 2012 by sam4eq

sammasati · January 20, 2012

Спасибо за ответ! Уже справился, оказалось не слишком сложно, поковырялся в коде "демки" данного слайдшоу, нашел что надо, подставил - все работает Теперь только с видео слайдером разобраться надо будет Если возникнут проблемы я могу надеяться на вашу помощь?

Только если не будете просить написать скрипты за Вас.

Пишите сюда, если будут какие-то вопросы. Помогу, чем смогу. Может ещё кто-нибудь подключится.

sam4eq · January 20, 2012

Только если не будете просить написать скрипты за Вас.
Пишите сюда, если будут какие-то вопросы. Помогу, чем смогу. Может ещё кто-нибудь подключится.

Все сделал, все работает, как только сайт запустят поделюсь ссылочкой

Проблема только в IE (ну это как обычно <_< ) вот думаю поискать какой нибудь скрип чтобы пользователям IE выскакивало сообщение о том, чтобы они сменили браузер

Sign In

Слайдер для видео и слайдер для картинок

Question

sam4eq

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

sammasati

Link to comment

Share on other sites

sam4eq

Link to comment

Share on other sites

sam4eq

Link to comment

Share on other sites

sammasati

Link to comment

Share on other sites

sam4eq

Link to comment

Share on other sites

sam4eq

Link to comment

Share on other sites

sammasati

Link to comment

Share on other sites

sam4eq

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information