Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.06.2012, 16:22
Интересующийся
Отправить личное сообщение для cenzored Посмотреть профиль Найти все сообщения от cenzored
 
Регистрация: 05.06.2012
Сообщений: 13

jCarousel - как сделать чтобы подсвечивался текущий элемент управления?
Есть Carousel with external controls (Карусель с внешними элементами управления) - http://sorgalla.com/projects/jcarous..._controls.html. Всё бы хорошо, но как сделать так, чтобы номер текущего слайда подсвечивался? Интересует даже не номер, а кружочки такие как это обычно делается.

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 13.06.2012, 17:17
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

cenzored,
Изобразите желаемый итоговый вид на скриншоте, не слишком понятно
Ответить с цитированием
  #3 (permalink)  
Старый 14.06.2012, 12:00
Интересующийся
Отправить личное сообщение для cenzored Посмотреть профиль Найти все сообщения от cenzored
 
Регистрация: 05.06.2012
Сообщений: 13



Серенький кружочек внизу - активный слайд, остальные кружочки кликабельны, по клику происходит переход к соответствующему слайду.
Ответить с цитированием
  #4 (permalink)  
Старый 14.06.2012, 19:37
Интересующийся
Отправить личное сообщение для sergasd Посмотреть профиль Найти все сообщения от sergasd
 
Регистрация: 14.08.2011
Сообщений: 10

У каждого кружка должен быть атрибут "rel", равный позиции слайда.
initCallback : function(carousel){
    //получаем коллекцию кнопок
    var controls = $('.control_button');

    //вешаем событие на каждую кнопку
    controls.on('click', function(){
        //прокручиваем карусель на нужный слайд
        carousel.scroll($.jcarousel.intval($(this).attr('rel')));

        //удаляем у всех кнопок активный класс
        controls.removeClass('control_button_active');

        //добавляем текущей нажатой кнопке активный класс                            
        $(this).addClass('control_button_active');
    });
}


Если нет возможности добавить атрибут "rel", номер слайда можно найти через http://api.jquery.com/index/
Ответить с цитированием
  #5 (permalink)  
Старый 16.06.2012, 19:45
Интересующийся
Отправить личное сообщение для cenzored Посмотреть профиль Найти все сообщения от cenzored
 
Регистрация: 05.06.2012
Сообщений: 13

sergasd,
Спасибо, но я настолько плохо знаю javascript, что у меня не получается это прикруить.

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

сейчас там такой код:

function mycarousel_initCallback(carousel) {

    jQuery('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));

        return false;
    });

    jQuery('#mycarousel-next').bind('click', function() {
        carousel.next();
        return false;
    });

    jQuery('#mycarousel-prev').bind('click', function() {
        carousel.prev();
        return false;
    });
};


что в него нужно добавить?
Ответить с цитированием
  #6 (permalink)  
Старый 16.06.2012, 20:02
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

cenzored,
Вы можете
Сообщение от cenzored
Серенький кружочек внизу - активный слайд, остальные кружочки кликабельны, по клику происходит переход к соответствующему слайду
В данной реализации - кружочки прорисованы прям на картинке,
Мож и Вам голову не ломать - а прорисовать так же ? тады они на автомате будут посвечены ( минус один - кружки должны занимать точно туже позицию
http://s2.hostingkartinok.com/upload...35cfacd345.jpg
Ответить с цитированием
  #7 (permalink)  
Старый 16.06.2012, 20:50
Интересующийся
Отправить личное сообщение для cenzored Посмотреть профиль Найти все сообщения от cenzored
 
Регистрация: 05.06.2012
Сообщений: 13

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

Предложенное sergasd'ом решение где-то рядом, нужно только доработать чуть-чуть :-)
Ответить с цитированием
  #8 (permalink)  
Старый 16.06.2012, 21:55
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

cenzored,
Попробуйте выложить чистый работоспособный код без дополнений, в опере локальный файл у меня - виснет
Ответить с цитированием
  #9 (permalink)  
Старый 17.06.2012, 15:01
Интересующийся
Отправить личное сообщение для cenzored Посмотреть профиль Найти все сообщения от cenzored
 
Регистрация: 05.06.2012
Сообщений: 13

<!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="style.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="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('#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,
        auto: 2,
        wrap: 'circular',
        initCallback: mycarousel_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">

    <ul>
      <li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
      <li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
      <li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
      <li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
      <li><img width="590" height="270" src="http://kashpo/images/pic13.jpg" alt="" /></li>
    </ul>


  </div>

    <div class="jcarousel-control">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
    </div>


</div>
</body>
</html>


вот html, у меня всё работает
Ответить с цитированием
  #10 (permalink)  
Старый 17.06.2012, 15:10
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

cenzored,
На скрипты и стиль полную ссылку вставьте - иначе все придется повторять по установке карусели

<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать чтобы страница не обновлялась? teles Общие вопросы Javascript 5 25.05.2012 11:20
Как сделать так чтобы один скрипт работал во многих элементах Darkhan Общие вопросы Javascript 2 16.02.2012 17:13
КАК сделать чтобы кнопка PRINT не отображалась при печати?:?? xxxxx82 Элементы интерфейса 1 19.04.2011 14:58
Jcarousel. Как сделать непрерывную прокрутку изображений? Akimserg jQuery 3 01.04.2011 15:03
Как сделать активный элемент при ховере TicTac Общие вопросы Javascript 25 16.10.2010 22:12