Галерея, помещенная в модальное окно Bootstrap
 

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

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

Поискала в интернетах, ничего похожего (без лишних выкрутасов с эффектами) не нашла, решила взять модальное окно bootstrap и совместить его с jquery каруселью.

Оно работает! Но не показывает первый слайд) переходишь на второй и обратно - все норм. Это происходит изза того, что каждая галерея сама по себе и имеет class="mygallery", происходит так, потому что галереи интегрированы в cms и выводятся циклом.

http://angelnn.ru/test/

<link type="text/css" rel="stylesheet" href="/js/tn3.css"></link>     		        
 <script type="text/javascript" src="/js/user/jquery-1.7.2.min.js?complete" charset="utf-8"></script>

<script type="text/javascript" src="/js/jquery-ui-1.8.2.custom.min.js"></script>					

<script type="text/javascript" src="/js/bootstrap.js"></script>		

<script type="text/javascript" src="/js/jquery.tn3lite.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.mygallery').tn3({
skinDir:"skins",
imageClick:"fullscreen",
image:{
maxZoom:1.5,
crop:true,
clickEvent:"dblclick",
transitions:[{
type:"blinds"
},{
type:"grid"
},{
type:"grid",
duration:460,
easing:"easeInQuad",
gridX:1,
gridY:8,
// flat, diagonal, circle, random
sort:"random",
sortReverse:false,
diagonalStart:"bl",
// fade, scale
method:"scale",
partDuration:360,
partEasing:"easeOutSine",
partDirection:"left"
}]
}
		
	});	
	});
</script>

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

Еще вижу, что в style атрибуты второго слайда записываются всякие значения, которые и делают картинку видимой, а с первым такого не происходит.
Что это может быть? Подскажите.

fancybox!!!

Meanna,

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

Meanna,
то есть на fancybox какая-то не каруселистая карусель для вас :( :cray:

Дошло, поставила) оставляю только первый thumb, остальные скрываю. но несколько fancybox на странице воспринимают все галереи как одно целое, class="fancybox-thumb" rel="fancybox-thumb" как я понимаю менять нельзя

<script>
$(document).ready(function() {
	$(".fancybox-thumb").fancybox({
		prevEffect	: 'none',
		nextEffect	: 'none',
		helpers	: {
			title	: {
				type: 'outside'
			},
			thumbs	: {
				width	: 50,
				height	: 50
			}
		}
	});
});
</script>

неужели придется прикреплять какой нибудь .fancybox-thumb_%id%
и несколько раз повторять скрипт?

Meanna,
аккуратно ставим это ... потом скрипты и стили закачайте к себе

<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
 <script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
 <script type='text/javascript' src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
 <link rel="stylesheet" href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
 <link rel="stylesheet" href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script>
$(function() {
   $('[href^="#modal"]').click(function(event) {
      event.stopPropagation();
      event.preventDefault()
      var id = $(this).attr('href');
      $.fancybox.open($("a", $(id)),{
      openEffect	: 'elastic',
      closeEffect	: 'elastic',

      closeBtn		: false,
      autoPlay: true,
      afterLoad: function() {
        this.title = $(this.element[0]).prevAll('h4').text();
    },

      helpers	: {
			title	: {
				type: 'float'
			},
			thumbs	: {
				width	: 50,
				height	: 50
			},
            buttons	: {}

		}})

   })
	});

</script>

Спасибо, поставила этот код к существующему, но fancybox-thumb по прежнему складываются в одну галерею. Совсем не вижу результата работы скрипта.

Заработало :thanks:
bootstrap был выпилен, но работает и без него, меня устраивает. Спасибо!!!
какие бы почитать книжки для развития в Jquery?

я читала "Изучаем Jquery 1.3" Джонатан Чаффер и видеоуроки на английском "Учим Jquery за 30 дней", выписывала примеры в файл, но ощущение до сих пор такое, что я контент менеджер в этом деле, а не разработчик(

:dance:
практика и гуглите
вот например http://habrahabr.ru/hub/jquery/
или тут