Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.02.2014, 17:57
Новичок на форуме
Отправить личное сообщение для Meanna Посмотреть профиль Найти все сообщения от Meanna
 
Регистрация: 11.02.2014
Сообщений: 7

Галерея, помещенная в модальное окно 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 атрибуты второго слайда записываются всякие значения, которые и делают картинку видимой, а с первым такого не происходит.
Что это может быть? Подскажите.

Последний раз редактировалось Meanna, 11.02.2014 в 17:59.
Ответить с цитированием
  #2 (permalink)  
Старый 11.02.2014, 19:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от Meanna
без лишних выкрутасов с эффектами
Сообщение от Meanna
чтобы при щелчке по фотографии во всплывающем окне отображались остальные фотографии альбома.
fancybox!!!
Ответить с цитированием
  #3 (permalink)  
Старый 11.02.2014, 20:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Meanna,
Ответить с цитированием
  #4 (permalink)  
Старый 11.02.2014, 22:40
Новичок на форуме
Отправить личное сообщение для Meanna Посмотреть профиль Найти все сообщения от Meanna
 
Регистрация: 11.02.2014
Сообщений: 7

fancybox не подойдет. всплывать должно не только изображение но и карусель остальных связанных изображений. именно что карусель с превью в модальном окне
Ответить с цитированием
  #5 (permalink)  
Старый 12.02.2014, 00:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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


Последний раз редактировалось рони, 12.02.2014 в 00:57.
Ответить с цитированием
  #6 (permalink)  
Старый 12.02.2014, 11:55
Новичок на форуме
Отправить личное сообщение для Meanna Посмотреть профиль Найти все сообщения от Meanna
 
Регистрация: 11.02.2014
Сообщений: 7

Дошло, поставила) оставляю только первый 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%
и несколько раз повторять скрипт?
Ответить с цитированием
  #7 (permalink)  
Старый 12.02.2014, 12:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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>
Ответить с цитированием
  #8 (permalink)  
Старый 13.02.2014, 10:11
Новичок на форуме
Отправить личное сообщение для Meanna Посмотреть профиль Найти все сообщения от Meanna
 
Регистрация: 11.02.2014
Сообщений: 7

Спасибо, поставила этот код к существующему, но fancybox-thumb по прежнему складываются в одну галерею. Совсем не вижу результата работы скрипта.
Ответить с цитированием
  #9 (permalink)  
Старый 17.02.2014, 13:06
Новичок на форуме
Отправить личное сообщение для Meanna Посмотреть профиль Найти все сообщения от Meanna
 
Регистрация: 11.02.2014
Сообщений: 7

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

я читала "Изучаем Jquery 1.3" Джонатан Чаффер и видеоуроки на английском "Учим Jquery за 30 дней", выписывала примеры в файл, но ощущение до сих пор такое, что я контент менеджер в этом деле, а не разработчик(
Ответить с цитированием
  #10 (permalink)  
Старый 17.02.2014, 13:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от Meanna
Заработало

Сообщение от Meanna
какие бы почитать книжки для развития в Jquery?
практика и гуглите
вот например http://habrahabr.ru/hub/jquery/
или тут
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Bootstrap модальное окно igor.3dviz Общие вопросы Javascript 1 09.02.2014 13:27
модальное окно div'ом codingfighter Общие вопросы Javascript 28 03.09.2013 15:07
Как передать переменную в модальное окно sinsir jQuery 24 20.06.2013 16:59
bootstrap модальное окно гуня (X)HTML/CSS 1 03.04.2013 09:28
Посоветуйте как сделать модальное окно battrack jQuery 3 12.07.2012 15:42