Как сделать чтобы высота рассчитывалась не по размеру окна браузера, а по высоте 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% окна меня устраивает, то что нужно. Хотя тоже было бы интересно уметь и ей управлять с помощью родительского элемента, вдруг я другой лэндинг когда-нибудь делать буду... Заранее спасибо всем откликнувшимся:) |
alexchexes,
возможно просто уберите с Цитата:
// 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'); |
Воу! Это было так невероятно просто! Спасибо Вам огромное, милый человек!
|
alexchexes,
;) |
К слову, убирать
win.on('resize', function(e){ не потребовалось. Просто сделал вот так: var width = win.width(), height = 360, gallery_width, gallery_height, difference; и получил то, что мне нужно. |
alexchexes,
ну или так :) |
Часовой пояс GMT +3, время: 15:40. |