Не загружаются картинки
186
13 апреля 2017, 15:52
Подскажите пожалуйста, в чем может быть причина? Даже если я просто изменяю готовые(дефолтные) картинки, на свои, с таким же размером (1500х1000), форматом (jpg) и названием, то всё равно они не отображаются, как я представил это на скринах ниже. В чем здесь вся фишка? Я кликаю по первой стандартной фотке, открывается увеличенная, меняю на свою, ничего не открывается, когда кликаю... не понимаю.... помогите пожалуйста, уж очень мне это портфолио понравилось, а настроить не могу (
.portfolio {
background:#f1f1f1;
}
/* gallery */
.gallery {
overflow: hidden;
}
.gallery:after {
content: "";
display: inline-block;
width: 100%;
}
.gallery .mix {
color: #FFFFFF;
display: none;
font-size: 30px;
margin: 0 0 30px;
opacity: 0;
overflow: hidden;
text-align: center;
vertical-align: top;
}
.gallery .mix.full {
height: auto;
}
.gallery a.mix-cover img {
width: 100%;
}
.gallery a.mix-cover, .gallery span.cover {
background-color: #FFFFFF;
border-radius: 4px 4px 0 0;
display: block;
overflow: hidden;
}
.gallery.portfolio a.mix-cover, .gallery.portfolio a.mix-cover .overlay {
border-radius: 4px;
}
.gallery .mix a img, .gallery .mix a span.overlay {
border-radius: 4px 4px 0 0;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.1);
}
.gallery a.mix-cover {
position: relative;
transition: top 0.5s ease 0s;
}
.gallery span.cover {
background-color: #F4D432;
position: absolute;
top: -100%;
}
.gallery span.cover span {
color: #FFFFFF;
height: 50px;
left: 0;
line-height: 50px;
margin-top: -25px;
position: absolute;
right: 0;
top: 50%;
}
img.placeholder {
height: 100%;
width: 100%;
}
/* Overlay */
.overlay {
background-color: rgba(0, 0, 0, 0.48);
border: 0 solid rgba(255, 255, 255, 0.2);
bottom: 0;
left: 0;
opacity: 0;
position: absolute;
right: 0;
text-align: center;
top: 0;
transition: all 0.3s ease 0s;
z-index: 9;
height:100%;
width:100%;
cursor:pointer;
}
.overlay:hover {
opacity: 1;
}
.overlay i, .overlay span.title {
color: #FFFFFF;
font-size: 40px;
position: relative;
top: -60px;
transition: all 0.3s ease 0s;
}
.overlay span.title {
font-size: 30px;
}
.overlay:hover i, .overlay:hover span.title {
top: 10px;
}
span.valign {
display: inline-block;
height: 100%;
vertical-align: middle;
} <div class="row">
<div class="gallery">
<ul id="Grid" class="gcontainer">
<li class="col-md-4 col-sm-4 col-xs-12 mix bw portraits" data-cat="graphics">
<a data-toggle="modal" data-target="#portrait1" class="mix-cover">
<img class="horizontal" src="img/portrait1-sm.jpg" alt="placeholder">
<span class="overlay"><span class="valign"></span><span class="title">Portrait 1</span></span>
</a>
</li>
<li class="col-md-4 col-sm-4 col-xs-12 mix portraits" data-cat="graphics">
<a data-toggle="modal" data-target="#portrait2" class="mix-cover">
<img class="horizontal" src="img/portrait2.jpg" alt="placeholder">
<span class="overlay"><span class="valign"></span><span class="title">Portrait 2</span></span>
</a>
</li>
<li class="col-md-4 col-sm-4 col-xs-12 mix nature" data-cat="nature">
<a data-toggle="modal" data-target="#nature1" class="mix-cover">
<img class="horizontal" src="img/nature1.jpg" alt="placeholder">
<span class="overlay"><span class="valign"></span><span class="title">Nature 1</span></span>
</a>
</li>
<li class="col-md-4 col-sm-4 col-xs-12 mix portraits" data-cat="portraits">
<a data-toggle="modal" data-target="#portrait3" class="mix-cover">
<img class="horizontal" src="img/portrait3.jpg" alt="placeholder">
<span class="overlay"><span class="valign"></span><span class="title">Portrait 3</span></span>
</a>
</li>
<li class="col-md-4 col-sm-4 col-xs-12 mix portraits" data-cat="portraits">
<a data-toggle="modal" data-target="#portrait5" class="mix-cover">
<img class="horizontal" src="img/portrait5.jpg" alt="placeholder">
<span class="overlay"><span class="valign"></span><span class="title">Portrait 5</span></span>
</a>
</li>
<li class="col-md-4 col-sm-4 col-xs-12 mix nature" data-cat="nature">
<a data-toggle="modal" data-target="#nature" class="mix-cover">
<img class="horizontal" src="img/nature.jpg" alt="placeholder">
<span class="overlay"><span class="valign"></span><span class="title">Nature</span></span>
</a>
</li>
<li class="col-md-4 col-sm-4 col-xs-12 mix portraits" data-cat="portrait">
<a data-toggle="modal" data-target="#portrait4" class="mix-cover green">
<img class="vertical" src="img/portrait4.jpg" alt="portrait 4">
<span class="overlay"><span class="valign"></span><span class="title">Portrait 4</span></span>
</a>
</li>
<li class="col-md-4 col-sm-4 col-xs-12 mix bw nature all" data-cat="portrait">
<a data-toggle="modal" data-target="#forest" class="mix-cover green">
<img class="vertical" src="img/forest.jpg" alt="Forest">
<span class="overlay"><span class="valign"></span><span class="title">Forest</span></span>
</a>
</li>
<li class="col-md-4 col-sm-4 col-xs-12 mix bw nature all" data-cat="bw">
<a data-toggle="modal" data-target="#bw1" class="mix-cover green">
<img class="vertical" src="img/bw1.jpg" alt="Black and White">
<span class="overlay"><span class="valign"></span><span class="title">Black & White</span></span>
</a>
</li>
</ul>
<!-- Load Photo in Modal -->
<div class="modal fade" id="portrait1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-center">Portrait 1</h4>
</div>
<div class="modal-body">
<img class="thumbnail" alt="Portrait1" src="img/portrait1.jpg"/>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="portrait2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-center">Portrait 2</h4>
</div>
<div class="modal-body">
<img class="thumbnail" alt="Portrait1" src="img/portrait2.jpg"/>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="portrait3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-center">Portrait 3</h4>
</div>
<div class="modal-body">
<img class="thumbnail" alt="Portrait1" src="img/portrait3.jpg"/>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="portrait4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-center">Portrait 4</h4>
</div>
<div class="modal-body">
<img class="thumbnail" alt="Portrait1" src="img/portrait4.jpg"/>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="portrait5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-center">Portrait 5</h4>
</div>
<div class="modal-body">
<img class="thumbnail" alt="Portrait1" src="img/portrait5.jpg"/>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="nature" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-center">Nature</h4>
</div>
<div class="modal-body">
<img class="thumbnail" alt="nature" src="img/nature.jpg"/>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="nature1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-center">Nature 1</h4>
</div>
<div class="modal-body">
<img class="thumbnail" alt="nature" src="img/nature1.jpg"/>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="forest" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-center">Forest</h4>
</div>
<div class="modal-body">
<img class="thumbnail" alt="forest" src="img/forest.jpg"/>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="bw1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-center">Black and White</h4>
</div>
<div class="modal-body">
<img class="thumbnail" alt="forest" src="img/bw1.jpg"/>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /Load Photo in Modal -->
</div>
</div>
</div>
</div>Answer 1
стыдно признать, но не думал, что jpg и jpeg разные форматы. ошибка была в этом. /close
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47548 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30490 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23621 visits
- Как через css изменить цвет png изображения? 10345 visits
- Blob video url download 9952 visits
- Php curl запрос через прокси с авторизацией 9205 visits
- Работа с captcha vk api 8087 visits
© "hostciti.net" 15.11.2024 | 16:51