Объясните как работает простой jQuery скрипт.

[Березовский]

<script type="text/javascript">
jQuery(document).ready(function($){
var select = $('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]');
select.attr('class', 'rlightbox');
$( ".rlightbox" ).rlightbox();
});
</script>

Вот линк на то о чем я говорю - http://berezovsky.org.ua/wptvk/

Сайт пашет на вордпрессе, этот код я дернул из плагина fancybox он насколько я понимаю автоматом добавляет к изображениям класс - rlightbox в моем случае. То есть раньше там был другой класс собсно фансибокса, этот класс .rlightbox нужен в моей карусели (шоб она горела синим пламенем).

Все работает нормально) изображения открываются во всплывающем окне, но почему-то нет перехода от одного изображения к следующему (даже если я вставил галерею..)

Конечно в плагине FancyBox есть переход от одного изображения к другому... но он падла нарушает мою карусель)

Может как-то можно исправить этот код который добавляет класс? или я туплю и дело вовсе не в нем? :-)

Благодарю за помощь...

Edited March 18, 2013 by Березовский

[Switch74]

Сначала скрипт ловит все картинки на странице, потом ставит им класс а потом обрабатывает все объекты с данным классом

Я так понимаю, что у тебя есть каруселька и картинки на странице, и когда ты хочешь листать карусельку у тебя начинает листать все картинки на странице. Тебе нужно сделать отбор объектов (картинок), только тех, что внутри карусельки:

var select = $('.carusel').children('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]');

но я давно уже не практиковал, возможно чего-то забыл проверяйте

возможно попроще будет

var select = $('.carusel').children('img');

Edited March 19, 2013 by Switch74

[SelenIT]

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

To group above elements (make a set), add some common class to them, preceded by a prefix (default is lb) and the underscore character

[Березовский]

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

To group above elements (make a set), add some common class to them, preceded by a prefix (default is lb) and the underscore character

Елы-палы)))))))))) теперь галерея работает в лайтбоксе))) благодарю!!! Вы меня просто спасли) вот что значит внимательно читать документацию)

Большое Вам человеческое спасибо) в знак уважения размещаю вашу ссылку на http://css-live.ru на своем вордпресс блоге - http://thiswordpress.com/

[Березовский]

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

To group above elements (make a set), add some common class to them, preceded by a prefix (default is lb) and the underscore character

Готово)

http://thiswordpress.com/change-wordpress-folder/ в сайдбаре внизу.

[Березовский]

Сначала скрипт ловит все картинки на странице, потом ставит им класс а потом обрабатывает все объекты с данным классом

Я так понимаю, что у тебя есть каруселька и картинки на странице, и когда ты хочешь листать карусельку у тебя начинает листать все картинки на странице. Тебе нужно сделать отбор объектов (картинок), только тех, что внутри карусельки:

var select = $('.carusel').children('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]');

но я давно уже не практиковал, возможно чего-то забыл проверяйте

возможно попроще будет

var select = $('.carusel').children('img');

кстати ваш вариант не ловит картинки) ну не пашет такой код, .carusel заменил естесно на мой #carousel но не пашет к сожалению, проблема уже решена, просто решил проверить ваш вариант) а еще вопрос тогда, у меня карусель это посты (вордпресс) в каждом посте я буду отображать еще и часть контента (там будет только галерея которую я вставляю в область контента) то есть у меня карусель состоит из полноценного поста. вернее нескольких постов, и лайтбок открывает мне ааабсолютно все изображения со всех постов.

Ну например у меня 3 поста, в каждом по три картинки, мне нужно чтобы лайтбокс галереей открывал всего по три картинки) а он конечно открывает все 9 :-) что тут можно придумать? собственно именно такой функционал мне и нужен в итоге... я был уверен что лайтбокс будет открывать галереей только те изображения что находится в посте, но он открывает их все) наверное надо там с циклом поработать... я про wordpress loop

[Switch74]

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

[Березовский]

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

Я ошибся) ваш код рабочий) просто у меня в #carousel есть посты с классом .post задал в скрипте этот класс

var select = $('.post')

и все пашет) теперь надо поиграться с классами чтобы сделать переключение изображений по посту включая галерею) в общем и Вы мне очень помогли)))) спасибо! буду писать тут если будут еще вопросы) безумно благодарен за помощь) я уже хотел стреляться)))))))

[Березовский]

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

Я тебя люблю)))))))))))))) ребята вы лучшиеееееее!!!!

смотри что я сделал) задал не статичный класс посту а

<?php post_class(); ?>

то есть в итоге у меня каждый новый пост идет с id например .post-47 далее .post-48

Остается только наклепать нужное количество постов) и всунуть их классы в скрипт который ищет и прикрепляет к изображениям класс лайтбокса)))

неа........((((((((((

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

блин.

Edited March 19, 2013 by Березовский

[Switch74]

Про общий класс с подчеркиванием не забыл или это я уже все в одну кучу путаю?

[Березовский]

Про общий класс с подчеркиванием не забыл или это я уже все в одну кучу путаю?

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

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

Вопрос - как ограничить влияние Лайтбокса в цикле одного поста включая галерею в этом посте?

Вот код карусели -

<div id="content">
<div id="carousel">[/size][/font][/color]
<?php query_posts( array('cat' => 1, 'showposts' => 18) ); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post();?>
<div <?php post_class(); ?>>
<?php
if ( has_post_thumbnail()) {
   $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
   echo '<a href="' . $large_image_url[0] . '" >';
   the_post_thumbnail();
   echo '</a>';
}
?>
  <div class="excerpt">
  <h1><?php the_title(); ?></h1>
   <p><?php the_excerpt(); ?></p>
  </div>
  <div class="entry-content">
<?php the_content(); ?>
  </div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<a href="#" id="ui-carousel-next"><span>next</span></a>
    <a href="#" id="ui-carousel-prev"><span>prev</span></a>
    <div id="pages"></div>
<?php>wp_reset_query();?>
</div><!-- end content -->

Галерея находится в <?php the_content(); ?>

Это скрипт который добавляет ко всем изображениям класс лайтбокса -

<script type="text/javascript">
jQuery(document).ready(function($){
var select = $('.post-49, .post-1 ').find('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]');
select.attr('class', 'lb_rlightbox');
$( ".lb_rlightbox" ).rlightbox();
});
</script>

как видно из первого кода я заменил класс поста .post на <div <?php post_class(); ?>> думал что прописав в скрипте отдельные классы для каждого поста решит вопрос.. но лайтбокс в данном случае создает галерею для тех постов, которые я прописал в скрипте, и соединяет их в одну большую лайтбокс-галерею...

Нужно чтобы они не соединялись а работали отдельно.

Буду благодарен за любую информацию в этом направлении.

[Switch74]

могу предположить только то, что:

var select = $('.post-49, .post-1 ')

это означает создать лайтбокс для постов 49 и 1

дальше вы всем картинкам из этих постов ставите класс

и к этому классу привязываете обработчик лайтбокса

select.attr('class', 'lb_rlightbox');
$( ".lb_rlightbox" ).rlightbox();

если мое предположение верно, то могу предложить делать так:

в PHP вставлять уникальный id (1,...,49), а class=post

var select = $('.post').each(function(n,post)
{
$(post).find('a[href$=".bmp"],a[href$=".gif"],...').attr('class', 'lb_rlightbox_'+$(post).attr('id'));
$( ".lb_rlightbox_"+$(post).attr('id')).rlightbox();
});

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

если лайтбокс отрабатывает только с теми картинками класс которых был передан, то все должно работать

PS

за работоспособность кода не отвечаю, давно не практиковал, но логика надеюсь понятна

Edited March 22, 2013 by Switch74

[Березовский]

ого) да логика понятна) кода будет много)) но ничего. главное чтобы работало) попробую и отпишусь о результатах) спасибо!

[Березовский]

Я немного туплю) плохо разбираюсь в скриптах...

я сделал для поста класс post статичный и

<div id="post-<?php the_ID(); ?>" class="post">

Id который автоматом генерируется для каждого поста..

пожалуйста дабы я понял где писать ID поста в скрипте) приведите пример скрипта с двумя разными ID, например #post-47 и #post-49 куда я их должен впихнуть в этом скрипте?

<script type="text/javascript">
jQuery(document).ready(function($){
var select = $('.post').each(function(n,post)
{
$(post).find('a[href$=".bmp"],a[href$=".gif"],...').attr('class', 'lb_rlightbox_'+$(post).attr('id'));
$( ".lb_rlightbox_"+$(post).attr('id')).rlightbox();
});
});
</script>

и вообще правильно ли я поставил закрывающие и открывающие скобки))))

Спасибо большое)

[Switch74]

ну вроде все верно, ID в скрипте писать не нужно, там все автоматом достается, получается

берем первый пост и присваиваем всем картинкам в нем класс lb_rlightbox_post-1

$(post).find('a[href$=".bmp"],a[href$=".gif"],...').attr('class', 'lb_rlightbox_'+$(post).attr('id'));

после для всех картинок имеющих класс lb_rlightbox_post-1 привязываем обработчик лайтбокса

$( ".lb_rlightbox_"+$(post).attr('id')).rlightbox();

Если эта схема заработает, то я бы предложил оптимизировать весь код так:

в PHP поставили постам в карусели class=post и id=post-1

для всех картинок, которые в этом посте проставь класс равные id этого поста, в нашем случае class=post-1

тогда весь скрипт превратится в

<scripttype="text/javascript">
jQuery(document).ready(function($){
var select = $('.post').each(function(n,post)
{
$(post).find("."+$(post).attr('id')).rlightbox();
});
});
</script>

Таким образом немного разгрузится клиентская машина

Edited March 23, 2013 by Switch74

[Березовский]

Жесть... надо учить js :-) все работает как по волшебству))) я неделю пытался выяснить как это реализовать))) благодарю. просто слов нет выразить свою благодарность) нужна будет какая-то либо помощь) обязательно обращайтесь, постараюсь помочь!

С Уважением