Березовский

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

задай основному блоку position:relative; margin: 10% auto: на счет 10% вообще не уверен) но auto даст центровку, только ширину блока тоже обозначь обязательно, либо в процентах либо в конкретных пикселях. а с высотой просто поиграйся... как-то так) например - <table border="0" cellspacing="5" cellpadding="5" style="border:1px solid #000;position:relative;margin:20% auto;width: 800px; height: 600px"> если нужно только меню отцентрировать, напиши есть решение рабочее да и еще проверенное в резиновом дизайне.

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

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

<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 есть переход от одного изображения к другому... но он падла нарушает мою карусель) Может как-то можно исправить этот код который добавляет класс? или я туплю и дело вовсе не в нем? :-) Благодарю за помощь...

попробую этот вариант. благодарю.

да вагон вообще! есть варианты реализации на css есть на jquery погуглите лучше, на английском гуглите и точно найдете!

Карусельку я использую эту http://ryrych.github.com/rcarousel/ (там есть кстати свой лайтбокс, но он мне не нравится и не работает переход к другим фото в лайтбоксе). а ссылку на сайт я могу кинуть) но я его ворочаю, там карусель то работает то не работает)))

да не работает... смотрите скриншот. смотрите два скриншота. Скрин карусели с включенным лайтбоксом а это скрин карусели без включенного лайтбокса

http://berezovsky.org.ua/wptvk/ так выглядит слайдер с включенным плагином всплывающих изображений. а на скриншоте галерея в работе без этого плагина (плагины пробовал разные, fancybox, prettyphoto и т.д., везде одна и та же хрень).

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

<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('rel', 'fancybox'); select.fancybox(); }); </script> Код вырвал из всем известного плагина FancyBox насколько я догадываюсь именно он добавляет ко всем изображениям ссылку с этим же изображением и rel=fancybox все бы ничего, но с этим плагином у меня напряг, да и вообще с любым другим подобным... Есть карусель, картинки в ней генерируются с помощью php (сайт на Wordpress), хочется чтобы при нажатии на картинку в слайдере она увеличивалась с помощью fancybox, но этот плагин нарушает саму карусель, видимо есть нестыковка в скрипте карусели какая-то... так вот, с этой каруселькой идет свой рабочий скрипт всплывающих изображений, все пашет, но у меня картинки генерируются автоматом с помощью php кода, а скрипт всплывающих изображений будет работать если я дам к ссылке изображения определенный класс.. Задача - задать этот класс автоматом для изображений со ссылкой, так как это делает вышеуказанный код fancybox... Кто знает?

<img class="тут" src="" /> просто задайте класс как сказал администратор выше.

Может это поможет) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <style type="text/css"> body { font: 1em/150% Arial, Helvetica, sans-serif; } a { color: #669; text-decoration: none; } a:hover { text-decoration: underline; } h1 { font: bold 36px/100% Arial, Helvetica, sans-serif; } /************************************************************************************ STRUCTURE *************************************************************************************/ #pagewrap { padding: 5px; width: 960px; margin: 20px auto; } #header { height: 180px; position: relative; } #content { width: 600px; float: left; } #sidebar { position: relative; width: 300px; float: right; } #footer { clear: both; } /************************************************************************************ MEDIA QUERIES *************************************************************************************/ /* for 980px or less */ @media screen and (max-width: 980px) { #pagewrap { width: 94%; } #content { width: 65%; } #sidebar { width: 30%; } } /* for 700px or less */ @media screen and (max-width: 700px) { #content { width: auto; float: none; } #sidebar { width: auto; float: none; } } /* for 480px or less */ @media screen and (max-width: 480px) { #header { height: auto; } h1 { font-size: 24px; } #sidebar { display: none; } } /* border & guideline (you can ignore these) */ #content { background: #f8f8f8; } #sidebar { background: #f0efef; } #header, #content, #sidebar { margin-bottom: 5px; } #pagewrap, #header, #content, #sidebar, #footer { border: solid 1px #ccc; } </style> </head> <body> <div id="pagewrap"> <div id="header"> <h1>Header</h1> <p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p> </div> <div id="content"> <h2>Content</h2> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> <div id="sidebar"> <h3>Sidebar</h3> <p>text</p> <p>text</p> </div> <div id="footer"> <h4>Footer</h4> </div> </div> </body> </html>

спасибо кеп)))))))) Опера рулит))) там таблицей. но я бы списком сделал) или вообще тупо дивами. какие проблемы вообще? делаешь дивы с картинками и текстом) тем более размер фиксирован, ровняешь влево и все)

код :-)

на codecanyon - http://codecanyon.net/item/jquery-responsive-carousel/4239788

пользуйся @media only screen and (max-width: 1025px) { и задавай отдельные стили для соответствующих размеров экрана... честно сказать я так и не проникся тем, что ты хочешь сделать)))

прикрути к блоку картинку) задай ей display:none и абсолютное позиционирование. при наведении на текст задай ей display:block например... самый простейший тултип.

хорошо смотрится) как для начала)

ну а что мешает левый блок привязать к левой стороне?) position:absolute и left:0px ????? ничего никуда уезжать не будет...

Это смотря кто возьмется за дело)))

не сразу допер что вообще происходит на сайте)

Чем проще сайт для юзера, тем лучше, если это касается бизнеса (продажи чего либо на сайте, услуг или товара).

в топку старые браузеры)))