Javascript.RU

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

Как сделать чтобы высота рассчитывалась не по размеру окна браузера, а по высоте diva
Здравствуйте, Форумчане!

Проблема следующая.

Есть вот такая замечательная галерея tutorialzine.com/2013/05/diagonal-fade-gallery
Моя цель - сделать не отдельную страницу с такой галереей, а встроить её в существующий лендинг.
К сожалению, я дундук в javascript, программировании вообще, да и лэндинг я делаю в WYSIWYG редакторе, изредка корректируя выходной html и css. Но кое-какого результата уже добился, за исключением того что встроенная мной галерея отображается сейчас криво, потому что высота её рассчитывается не исходя из размеров дива, в который я её приспособил, а, согласно скрипту из файла script.js, равняется высоте окна браузера.

Собственно, вот часть кода этого скрипта, отвечающая за рассчёт размеров галереи:

// Monitor window resizing or changing device orientation
  win.on('resize', function(e){

    var width = win.width(),
      height = win.height(),
      gallery_width, gallery_height,
      difference;

    // How many photos can we fit on one line?
    max_w_photos = Math.ceil(width/photo_default_size);

    // Difference holds how much we should shrink each of the photos
    difference = (max_w_photos * photo_default_size - width) / max_w_photos;

    // Set the global width variable of the pictures.
    picture_width = Math.ceil(photo_default_size - difference);

    // Set the gallery width
    gallery_width = max_w_photos * picture_width;

    // Let's do the same with the height:

    max_h_photos = Math.ceil(height/photo_default_size);
    difference = (max_h_photos * photo_default_size - height) / max_h_photos;
    picture_height = Math.ceil(photo_default_size - difference);
    gallery_height = max_h_photos * picture_height;

    // How many photos to show per page?
    per_page = max_w_photos*max_h_photos;

    // Resize the gallery holder
    gallery.width(gallery_width).height(gallery_height);

    gallery.trigger('window-resized');

  }).resize();


Что (и на что) здесь нужно изменить, чтобы размер всегда был равен размеру родительского div'а?

P.S. Ширина в 100% окна меня устраивает, то что нужно. Хотя тоже было бы интересно уметь и ей управлять с помощью родительского элемента, вдруг я другой лэндинг когда-нибудь делать буду...

Заранее спасибо всем откликнувшимся
Ответить с цитированием
  #2 (permalink)  
Старый 06.02.2016, 01:07
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

alexchexes,
возможно просто уберите с
Сообщение от alexchexes
 win.on('resize', function(e){
и в строке 4-5 задайте ту величину что Вам надо , типа
// Monitor window resizing or changing device orientation
  

    var width = 100,
      height = 100,
      gallery_width, gallery_height,
      difference;

    // How many photos can we fit on one line?
    max_w_photos = Math.ceil(width/photo_default_size);

    // Difference holds how much we should shrink each of the photos
    difference = (max_w_photos * photo_default_size - width) / max_w_photos;

    // Set the global width variable of the pictures.
    picture_width = Math.ceil(photo_default_size - difference);

    // Set the gallery width
    gallery_width = max_w_photos * picture_width;

    // Let's do the same with the height:

    max_h_photos = Math.ceil(height/photo_default_size);
    difference = (max_h_photos * photo_default_size - height) / max_h_photos;
    picture_height = Math.ceil(photo_default_size - difference);
    gallery_height = max_h_photos * picture_height;

    // How many photos to show per page?
    per_page = max_w_photos*max_h_photos;

    // Resize the gallery holder
    gallery.width(gallery_width).height(gallery_height);

    gallery.trigger('window-resized');

Последний раз редактировалось Mess4me, 06.02.2016 в 01:10.
Ответить с цитированием
  #3 (permalink)  
Старый 06.02.2016, 01:41
Новичок на форуме
Отправить личное сообщение для alexchexes Посмотреть профиль Найти все сообщения от alexchexes
 
Регистрация: 06.02.2016
Сообщений: 3

Воу! Это было так невероятно просто! Спасибо Вам огромное, милый человек!
Ответить с цитированием
  #4 (permalink)  
Старый 06.02.2016, 01:42
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

alexchexes,
Ответить с цитированием
  #5 (permalink)  
Старый 06.02.2016, 01:59
Новичок на форуме
Отправить личное сообщение для alexchexes Посмотреть профиль Найти все сообщения от alexchexes
 
Регистрация: 06.02.2016
Сообщений: 3

К слову, убирать
win.on('resize', function(e){

не потребовалось. Просто сделал вот так:

var width = win.width(),
			height = 360,
			gallery_width, gallery_height,
			difference;


и получил то, что мне нужно.
Ответить с цитированием
  #6 (permalink)  
Старый 06.02.2016, 02:03
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

alexchexes,
ну или так
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Высота страницы по высоте окна браузера Николян (X)HTML/CSS 4 16.01.2014 20:12
Как сделать, чтобы при заходе на страницу открывались в 2-х окнах 2 ссылки ? autobuh Общие вопросы Javascript 1 26.08.2013 15:27
как сделать чтобы оба скрипти работали sarik Общие вопросы Javascript 18 15.02.2013 15:43
Как сделать чтобы форум прогружался прежде, чем информеры? schipun Ваши сайты и скрипты 2 01.02.2013 23:47
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24