-2
Я работаю над плагином jquery, чтобы создавать столбцы в сетке, и у меня возникают трудности с образами. Я не уверен, что это какой-то css, который нужно изменить или javascript работает слишком быстро. Вот HTML:Проблемы с плагином jQuery и изображением
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<script src="gridilizer.js"></script>
<script>
$(document).ready(function() {
$(this).gridilizer();
});
</script>
<style>
body, html {
padding:0;
margin:0;
}
header {
background:#dcd;
height:200px;
font-size:100px;
text-align:center;
line-height:200px;
}
[data-rows] {
background:#dcdcdc;
}
</style>
</head>
<body>
<header>
GRIDILIZER.JS
</header>
<div class="row">
<div data-rows="7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut.
</div>
<div data-rows="5">
test8
</div>
</div>
<div class="row">
<div data-rows="12">
<img width="50%" src="http://images.wikia.com/powerlisting/images/b/b9/Mountain_wallpaper_005_1024.jpg" />
<p>Image</p>
</div>
</div>
<div class="row">
<div data-rows="3">
<h1>Headline</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut.
</div>
<div data-rows="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut.
</div>
<div data-rows="3">
test4
</div>
<div data-rows="3">
test4
</div>
</div>
</body>
</html>
И мой JavaScript:
(function($){
$.fn.extend({
gridilizer:function(){
// Style Row Here
$(".row").css({
'width':'95%',
'margin':'2% 2.5%',
'display':'block',
'float':'left'
//'min-height':'200px'
//'height':'auto',
//'overflow':'hidden'
});
//Get Elements with data-rows property
elem=$("[data-rows]");
// Set background color for border hack
color=$('body').css("background-color");
if(color='rgba(0,0,0,0)'){
$('body').css('background-color','#fff')
}
// Style each grid element
return elem.each(function(){
$this=$(this);
//Get number of rows
rows=$this.attr('data-rows');
//Math to find number of rows in a 12-grid area
width=(rows/12*100);
//Set border to background color
background=$this.parents(":not(.row)").css("background-color");
$this.css({
'width':width+'%',
'display':'block',
'float':'left',
'padding':'2% 5%',
'border':'10px solid '+background,
'-webkit-box-sizing':'border-box',
'-moz-box-sizing':'border-box',
'box-sizing':'border-box'
});
console.log($this.parent('.row').height());
height = $this.parent().height();
$this.height(height);
});
}
});
})(jQuery);
В чем проблема? что вы ожидаете от того, что происходит? – Mathletics
[link] (http://conlindurbin.kodingen.com/grid/) Это то, что происходит с изображением. Вместо того, чтобы сопоставлять размер, мое изображение просто переполняется. Взгляд в сетевых событиях показывает, что сначала загружается javascript. Не уверен, что это проблема. –
Ваша проблема с изображениями не ясна. Попробуйте поместить javascript на botton страницы, если вы считаете, что скрипт работает слишком быстро. –