Помощь со слайдером

- Den - · 12 июня 2011

Господа, кто шарит в jquery, помогите разобраться со слайдером.

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

Что-то я пилю его пилю, а оно все никак.

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

Если потребуется дам денег за доработку.

Изменено 12 июня 2011 пользователем - Den -

Critical Error · 12 июня 2011

Как ты его выводишь? В том смысле, наполняешь вручную, или там новости и т.п.

- Den - · 12 июня 2011

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

В данном случае это не играет роли - хоть вручную, хоть нет.

Но для меня главное понять, что нужно нарисовать в коде jquery, чтобы они заработали вместе и независимо друг от друга. У меня они то вообще не работают, то оба крутятся по нажатию на одну из кнопок и т.д.

Я пробовал сделать, как здесь. Но это вариант не подходит, потому что там графические кнопки, а у меня текстовые.

Critical Error · 12 июня 2011

Я делаю вывод списка (ul) скриншотов через доп. поле при оформлении новости. Сайт в подписи, данные там же, в любой новости посомтреть можно, та же каруселька.

<script type="text/javascript">

//<![CDATA[

	$(function() {

		$( ".screenshots ul, .screenshots2 ul" ).addClass( "jcarousel-skin-impulse" ).jcarousel({

			easing: "backout", // эффект при перелистывании

			scroll: 1,

			speed: 1500,

			visible: 3,

			wrap: 'circular'

		});

	});

//]]>

</script>

[xfgiven_screenshots]

<div class="screenshots">

[xfvalue_screenshots]

</div>

[/xfgiven_screenshots]


[xfgiven_screenshots]

<div class="screenshots2">

[xfvalue_screenshots]

</div>

[/xfgiven_screenshots]

Вот и все, все работает прекрасно

- Den - · 12 июня 2011

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

Если даже им дать разные id, то нифига не выходит.


function mycarousel_initCallback(carousel) {


				 jQuery('#next-jc, #next-jc2').bind('click', function() {

					  carousel.next();

					  return false;

				 });


				 jQuery('#prev-jc, #prev-jc2').bind('click', function() {

					  carousel.prev();

					  return false;

				 });


			};


			jQuery(document).ready(function() {

				 jQuery("#slider-jc, #slider-jc2").jcarousel({

					  scroll: 1,

					  wrap: 'circular',

					  initCallback: mycarousel_initCallback,

					  buttonNextHTML: null,

					  buttonPrevHTML: null

				 });

			});

Да, и 2-х слайдеров на одной странице на вашем сайте я так и не нашел.

Critical Error · 12 июня 2011

function mycarousel_initCallback(carousel) {                                                                                         jQuery('#next-jc, #next-jc2').bind('click', function() {                                          carousel.next();                                          return false;                                 });                                                         jQuery('#prev-jc, #prev-jc2').bind('click', function() {                                          carousel.prev();                                          return false;                                 });                                                         };                                                jQuery(document).ready(function() {                                 jQuery("#slider-jc, #slider-jc2").jcarousel({                                          scroll: 1,                                          wrap: 'circular',                                          initCallback: mycarousel_initCallback,                                          buttonNextHTML: null,                                          buttonPrevHTML: null                                 });                        });

Много тут лишнего. Очень!

Да, и 2-х слайдеров на одной странице на вашем сайте я так и не нашел.

Я на тот момент шаблон не сделал. Сейчас шаб переделал малехо специально чтоб показать и сразу ссылку где можно глянуть.

http://www.critical-error.ho.ua/films/31-pirates-of-the_caribbean-on-stranger-tides.html

Работает без идентификаторов на классах по той функции которую я выше выкладывал

- Den - · 12 июня 2011

Много тут лишнего. Очень!

Ну это не ко мне вопросы, а к разработчику карусели. Код его.

Работает

Да, работает, но в моём случае с текстовыми кнопками все иначе. Они не создаются плагином, как в случае с графическими кнопками, они прописываются вручную в коде и скрипт ориентируется по их id.

Загляните в код на этой странице и все будет понятно.

Critical Error · 12 июня 2011

А почему не сделать с графическими кнопками?

<!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" xml:lang="en-us">

<head>

<title>jCarousel Examples</title>

<link href="http://sorgalla.com/projects/jcarousel/style.css" rel="stylesheet" type="text/css" />

<!--

  jQuery library

-->

<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script>

<!--

  jCarousel library

-->

<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>

<!--

  jCarousel skin stylesheet

-->

<link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />


<style type="text/css">


/**

 * Additional styles for the controls.

 */

.jcarousel-control {

    margin-bottom: 10px;

    text-align: center;

}


.jcarousel-control a {

    font-size: 75%;

    text-decoration: none;

    padding: 0 5px;

    margin: 0 0 5px 0;

    border: 1px solid #fff;

    color: #eee;

    background-color: #4088b8;

    font-weight: bold;

}


.jcarousel-control a:focus,

.jcarousel-control a:active {

    outline: none;

}


.jcarousel-scroll {

    margin-top: 10px;

    text-align: center;

}


.jcarousel-scroll form {

    margin: 0;

    padding: 0;

}


.jcarousel-scroll select {

    font-size: 75%;

}


#mycarousel-next,

#mycarousel-prev {

    cursor: pointer;

    margin-bottom: -10px;

    text-decoration: underline;

    font-size: 11px;

}


</style>


<script type="text/javascript">

/**

 * We use the initCallback callback

 * to assign functionality to the controls

 */

function mycarousel_initCallback(carousel) {

    jQuery('.jcarousel-control a').bind('click', function() {

        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));

        return false;

    });


    jQuery('.jcarousel-scroll select').bind('change', function() {

        carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);

        return false;

    });


    jQuery('#mycarousel-next').bind('click', function() {

        carousel.next();

        return false;

    });


    jQuery('#mycarousel-prev').bind('click', function() {

        carousel.prev();

        return false;

    });

};


// Ride the carousel...

jQuery(document).ready(function() {

    jQuery("#mycarousel").jcarousel({

        scroll: 1,

        initCallback: mycarousel_initCallback,

        // This tells jCarousel NOT to autobuild prev/next buttons

        buttonNextHTML: null,

        buttonPrevHTML: null

    });

});



function mycarousel2_initCallback(carousel) {

    jQuery('.jcarousel-control a').bind('click', function() {

        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));

        return false;

    });


    jQuery('.jcarousel-scroll select').bind('change', function() {

        carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);

        return false;

    });


    jQuery('#mycarousel2-next').bind('click', function() {

        carousel.next();

        return false;

    });


    jQuery('#mycarousel2-prev').bind('click', function() {

        carousel.prev();

        return false;

    });

};


// Ride the carousel...

jQuery(document).ready(function() {

    jQuery("#mycarousel2").jcarousel({

        scroll: 1,

        initCallback: mycarousel2_initCallback,

        // This tells jCarousel NOT to autobuild prev/next buttons

        buttonNextHTML: null,

        buttonPrevHTML: null

    });

});

</script>


</head>

<body>

<div id="wrap">

  <h1>jCarousel</h1>

  <h2>Riding carousels with jQuery</h2>


  <h3>Carousel with external controls</h3>

  <p>

    This carousel shows how to control it from outside.

  </p>


  <div id="mycarousel" class="jcarousel-skin-tango">

    <div class="jcarousel-control">

      <a href="#">1</a>

      <a href="#">2</a>

      <a href="#">3</a>

      <a href="#">4</a>

      <a href="#">5</a>

      <a href="#">6</a>

      <a href="#">7</a>

      <a href="#">8</a>

      <a href="#">9</a>

      <a href="#">10</a>

    </div>


    <ul>

      <li><img width="75" height="75" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" /></li>

    </ul>


    <div class="jcarousel-scroll">

      <form action="">

        <a href="#" id="mycarousel-prev">&laquo; Prev</a>

        <select>

          <option value="1">Scroll 1 item per click</option>

          <option value="2">Scroll 2 items per click</option>

          <option value="3">Scroll 3 items per click</option>

          <option value="4">Scroll 4 items per click</option>

          <option value="5">Scroll 5 items per click</option>

        </select>

        <a href="#" id="mycarousel-next">Next &raquo;</a>

      </form>

    </div>


  </div>


  <div id="mycarousel2" class="jcarousel-skin-tango">

    <div class="jcarousel-control">

      <a href="#">1</a>

      <a href="#">2</a>

      <a href="#">3</a>

      <a href="#">4</a>

      <a href="#">5</a>

      <a href="#">6</a>

      <a href="#">7</a>

      <a href="#">8</a>

      <a href="#">9</a>

      <a href="#">10</a>

    </div>


    <ul>

      <li><img width="75" height="75" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" /></li>

      <li><img width="75" height="75" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" /></li>

    </ul>


    <div class="jcarousel-scroll">

      <form action="">

        <a href="#" id="mycarousel2-prev">&laquo; Prev</a>

        <select>

          <option value="1">Scroll 1 item per click</option>

          <option value="2">Scroll 2 items per click</option>

          <option value="3">Scroll 3 items per click</option>

          <option value="4">Scroll 4 items per click</option>

          <option value="5">Scroll 5 items per click</option>

        </select>

        <a href="#" id="mycarousel2-next">Next &raquo;</a>

      </form>

    </div>


  </div>



</div>

</body>

</html>

Вот рабочий пример, там уже думаю разберешься.

Изменено 12 июня 2011 пользователем Critical Error

- Den - · 12 июня 2011

Продублировать функцию у меня тоже проскакивала мысль, но что-то я о ней быстро забыл, думал, что можно сделать более компактно, но раз так работает, то пусть будет. Спасибо!

А почему не сделать с графическими кнопками?

Дизайн подразумевает текстовые

Critical Error · 12 июня 2011

<script type="text/javascript">

//<![CDATA[

        $(function() {

                $( ".screenshots ul, .screenshots2 ul" ).addClass( "jcarousel-skin-impulse" ).jcarousel({

                        easing: "backout", // эффект при перелистывании

                        scroll: 1,

                        speed: 1500,

                        visible: 3,

                        wrap: 'circular'

                });

                $( ".jcarousel-next" ).html( "Next &raquo;" );

                $( ".jcarousel-prev" ).html( "Prev &laquo;" );

        });

//]]>

</script>

И настроить в css позиционирование кнопок и их стиль, чтоб не было графики При таком выводе карусели появляются кнопки графические при помощи контейнеров с классами jcarousel-next и jcarousel-prev, соответственно. И, соответственно, для этих div'ов настраиваем css, чтоб не было фона в виде графики и вот этим:


                $( ".jcarousel-next" ).html( "Next &raquo;" );

                $( ".jcarousel-prev" ).html( "Prev &laquo;" );

добавляем в эти контейнеры текст. Ну и в css для них там можно настроить cursor: pointer; ... и т.д. как для ссылки... думаю направление мысли понял.

Если что, спрашивай.

Изменено 12 июня 2011 пользователем Critical Error

Войти

Помощь со слайдером

Рекомендованные сообщения

- Den - 32

Ссылка на сообщение

Поделиться на других сайтах

Critical Error 155

Ссылка на сообщение

Поделиться на других сайтах

- Den - 32

Ссылка на сообщение

Поделиться на других сайтах

Critical Error 155

Ссылка на сообщение

Поделиться на других сайтах

- Den - 32

Ссылка на сообщение

Поделиться на других сайтах

Critical Error 155

Ссылка на сообщение

Поделиться на других сайтах

- Den - 32

Ссылка на сообщение

Поделиться на других сайтах

Critical Error 155

Ссылка на сообщение

Поделиться на других сайтах

- Den - 32

Ссылка на сообщение

Поделиться на других сайтах

Critical Error 155

Ссылка на сообщение

Поделиться на других сайтах

Присоединяйтесь к обсуждению

Форум

Активность