X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Помогите разобраться с фотографиями
Кера
Кера
Topic Starter сообщение 27.6.2015, 1:03; Ответить: Кера
Сообщение #1


Здравствуйте.
Имею шаблон одностраничного сайта. На сайте есть галерея. Наводишь на фото курсор появляются две кнопки одна "подробнее" другая "увеличить".  

Вторая кнопка работает как положено, а первая при нажатии, показывает фото и текст к ней.

Проблема в том, что для всех фотографий показывает один и тот же текст, а как присвоить каждой фотографии свой текст не получается.


Имеется в файле index.html (можно посмотреть во вложении)



<div id="grid-container" class="cbp-l-grid-projects">
<ul>
<li class="cbp-item identity">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap"><img src="img/projects/01.jpg" alt="" width="100%"></div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<a href="project.details.php?project_id=01" class="cbp-singlePageInline cbp-l-caption-buttonLeft">Подробно</a>
<a href="img/projects/01.jpg" class="cbp-lightbox cbp-l-caption-buttonRight"><i class="fa fa-search icon"></i></a>
</div>
</div>
</div>
</div>
</li>
<li class="cbp-item web-design logo">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap"><img src="img/projects/02.jpg" alt="" width="100%"></div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<a href="project.details.php?project_id=02" class="cbp-singlePageInline cbp-l-caption-buttonLeft">more info</a>
<a href="img/projects/02.jpg" class="cbp-lightbox cbp-l-caption-buttonRight">view larger</a>
</div>
</div>
</div>
</div>
</li>
<li class="cbp-item graphic logo">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap"><img src="img/projects/03.jpg" alt="" width="100%"></div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<a href="project.details.php?project_id=03" class="cbp-singlePageInline cbp-l-caption-buttonLeft">more info</a>
<a href="img/projects/03.jpg" class="cbp-lightbox cbp-l-caption-buttonRight">view larger</a>
</div>
</div>
</div>
</div>
</li>
<li class="cbp-item web-design graphic">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap"><img src="img/projects/04.jpg" alt="" width="100%"></div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<a href="project.details.php?project_id=04" class="cbp-singlePageInline cbp-l-caption-buttonLeft">more info</a>
<a href="img/projects/04.jpg" class="cbp-lightbox cbp-l-caption-buttonRight">view larger</a>
</div>
</div>
</div>
</div>
</li>
<li class="cbp-item web-design">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap"><img src="img/projects/05.jpg" alt="" width="100%"></div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<a href="project.details.php?project_id=05" class="cbp-singlePageInline cbp-l-caption-buttonLeft">more info</a>
<a href="img/projects/05.jpg" class="cbp-lightbox cbp-l-caption-buttonRight">view larger</a>
</div>
</div>
</div>
</div>
</li>
<li class="cbp-item web-design">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap"><img src="img/projects/06.jpg" alt="" width="100%"></div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<a href="project.details.php?project_id=06" class="cbp-singlePageInline cbp-l-caption-buttonLeft">more info</a>
<a href="img/projects/06.jpg" class="cbp-lightbox cbp-l-caption-buttonRight">view larger</a>
</div>
</div>
</div>
</div>
</li>
<li class="cbp-item graphic logo">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap"><img src="img/projects/07.jpg" alt="" width="100%"></div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<a href="project.details.php?project_id=07" class="cbp-singlePageInline cbp-l-caption-buttonLeft">more info</a>
<a href="img/projects/07.jpg" class="cbp-lightbox cbp-l-caption-buttonRight">view larger</a>
</div>
</div>
</div>
</div>
</li>
<li class="cbp-item graphic">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap"><img src="img/projects/08.jpg" alt="" width="100%"></div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<a href="project.details.php?project_id=08" class="cbp-singlePageInline cbp-l-caption-buttonLeft">more info</a>
<a href="img/projects/08.jpg" class="cbp-lightbox cbp-l-caption-buttonRight">view larger</a>
</div>
</div>
</div>
</div>
</li>
<li class="cbp-item web-design graphic">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap"><img src="img/projects/09.jpg" alt="" width="100%"></div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<a href="project.details.php?project_id=09" class="cbp-singlePageInline cbp-l-caption-buttonLeft">more info</a>
<a href="img/projects/09.jpg" class="cbp-lightbox cbp-l-caption-buttonRight">view larger</a>
</div>
</div>
</div>
</div>
</li>
<li class="cbp-item web-design">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap"><img src="img/projects/10.jpg" alt="" width="100%"></div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<a href="project.details.php?project_id=10" class="cbp-singlePageInline cbp-l-caption-buttonLeft">more info</a>
<a href="img/projects/10.jpg" class="cbp-lightbox cbp-l-caption-buttonRight">view larger</a>
</div>
</div>
</div>
</div>
</li>
<li class="cbp-item logo">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap"><img src="img/projects/11.jpg" alt="" width="100%"></div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<a href="project.details.php?project_id=11" class="cbp-singlePageInline cbp-l-caption-buttonLeft">more info</a>
<a href="img/projects/11.jpg" class="cbp-lightbox cbp-l-caption-buttonRight">view larger</a>
</div>
</div>
</div>
</div>
</li>
<li class="cbp-item graphic web-design">
<div class="cbp-caption">
<div class="cbp-caption-defaultWrap"><img src="img/projects/12.jpg" alt="" width="100%"></div>
<div class="cbp-caption-activeWrap">
<div class="cbp-l-caption-alignCenter">
<div class="cbp-l-caption-body">
<a href="project.details.php?project_id=12" class="cbp-singlePageInline cbp-l-caption-buttonLeft">more info</a>
<a href="img/projects/12.jpg" class="cbp-lightbox cbp-l-caption-buttonRight">view larger</a>
</div>
</div>
</div>
</div>
</li>

</ul>
</div>



 

Кроме этого есть файл project.details.php с таким содержимым:

 




<div class="cbp-l-inline">
<div class="cbp-l-inline-left">
<img src="img/projects/<?php echo $_GET["project_id"]; ?>.jpg" class="cbp-l-project-img">
</div>

<div class="cbp-l-inline-right">
<div class="cbp-l-inline-title">Заголовок </div>
<div class="cbp-l-inline-subtitle">Здесь эпиграф</div>
<div class="cbp-l-inline-desc">
Это какой нибудь текст, который выходит со всеми фотографиями, например hggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggg
</div>
</div>
</div>



Заранее благодарю за советы!!!


Сообщение отредактировал BLIK - 27.6.2015, 1:19
Прикрепленные файлы
Прикрепленный файл  project.details.php.txt ( 820 байт ) Кол-во скачиваний: 132
Прикрепленный файл  index.html.txt ( 7,95 килобайт ) Кол-во скачиваний: 123
 
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ixman
ixman
сообщение 27.6.2015, 10:10; Ответить: ixman
Сообщение #2


Кера, живой бы пример увидеть 
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zhil_hb
Zhil_hb
сообщение 27.6.2015, 11:43; Ответить: Zhil_hb
Сообщение #3


Попробуйте прописать к картинке тайтлы. Я например реализовал у себя на сайте галлерею таким образом: мини картинка, нажимаешь на нее она увеличивается и показывается к ней текст, прописанный в тайтл.

Хотя возможно, у вас и другая ситуация...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ixman
ixman
сообщение 27.6.2015, 12:08; Ответить: ixman
Сообщение #4


Evgeniy3200, так вот и я так подумал, но может ещё браться и из параметра alt. Хотел увидеть живой пример и попробовать через манипуляции с html кодом, там бы точно можно было понять что и куда
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zhil_hb
Zhil_hb
сообщение 27.6.2015, 12:19; Ответить: Zhil_hb
Сообщение #5


Ixman, ну да, на  "пациенте" всегда быстрее разберешься, что и где болит :D  особенно когда есть такая полезная функция для верстки, как просмотр кода элемента!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Кера
Кера
Topic Starter сообщение 27.6.2015, 15:38; Ответить: Кера
Сообщение #6


Всем привет! Благодарю за внимание!
Живой пример, (пациент) здесь   www.vorota.asker.su
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Zhil_hb
Zhil_hb
сообщение 27.6.2015, 16:04; Ответить: Zhil_hb
Сообщение #7


Кера, все легко решается, если я правильно понял. Под кнопкой подробно еть ссылка, которая ведет на определнный файл.

Как в корне сайта называется точно файл " project.details.php.txt  " ???
Наадо или в одном файле сделать разные блоки и присвоить им айди или сделать на каждый id свой файл с текстом
Кера, попробуйте в файл project.details.php добавить следующий код

<div class="cbp-l-inline">
<div class="cbp-l-inline-left">
<img src="img/projects/<?php echo $_GET["project_id=1"]; ?>.jpg" class="cbp-l-project-img">
</div>

<div class="cbp-l-inline-right">
<div class="cbp-l-inline-title">Ворота Боярские узорные арочные </div>
<div class="cbp-l-inline-subtitle">Размер 3.3 х 2.35</div>
<div class="cbp-l-inline-desc">
Minus commodi consequatur provident quae. Nihil, alias, vel consequatur ab aliquam aspernatur optio harum facilis excepturi
mollitia autem voluptas cum ex veniam numquam quia repudiandae in iure. Assumenda, vel provident molestiae perferendis officia
commodi asperiores earum sapiente inventore quam deleniti mollitia consequatur expedita quaerat natus praesentium beatae!
</div>
</div>
</div>

<div class="cbp-l-inline">
<div class="cbp-l-inline-left">
<img src="img/projects/<?php echo $_GET["project_id=2"]; ?>.jpg" class="cbp-l-project-img">
</div>

<div class="cbp-l-inline-right">
<div class="cbp-l-inline-title">Новый текст </div>
<div class="cbp-l-inline-subtitle">Размер 3.3 х 2.35</div>
<div class="cbp-l-inline-desc">
НОваожвлипатидоитлпатилпатилатидвлпидалаьжыдвжыавжыаждвыалывджлаждывлаждывлажыдв
алждывлажыдвлажыдвлажыдвumenda, vel provident molestiae perferendis officia
commodi asperiores earum sapiente inventore quam deleniti mollitia consequatur e
</div>
</div>
</div> 

Где на каждую картинку собственная чсть текста.

Ссылка на главной имеет следующий вид:

<a href="project.details.php?project_id=02" class="cbp-singlePageInline cbp-l-caption-buttonLeft">more info</a>
 

тут самое главное ссылка ведет в файл в определенную часть файла, т.е. в данном примере project_id=02, в часть с id равным 2.

В этом файле м создаем эту часть и прописываем то, что нужно. 

В теории так, но если бы был доступ к самим файлам сайта, можно было бы точнее все сказать и сделать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Кера
Кера
Topic Starter сообщение 27.6.2015, 16:48; Ответить: Кера
Сообщение #8


Файл называется project.details.php
Я перепробовал много вариантов уже запутался, этот вроде тоже был. проверю еще раз позже, сейчас не за комп. При таком варианте если не ошибаюсь фотографий вообще нет, а оба текста появляются на всех картинках. Но я попробую и уточню детали.
Я пробовал создать для каждой картинки свой аналогичный файл project.details.php , в результате получается все ровно, но непонятка с кодировкой, кирилицу переводит в звездочки. И морока это для каждой фотки мутить, а вдруг их сотни три, к примеру. Должно быть решение попроще, типа того, что предлагает Evgeniy3200 (надеюсь получится :) ), просто не догоню какое :huh:  .
Я точно могу сказать, что не пробовал в этой строке 
<img src="img/projects/<?php echo $_GET["project_id=2"]; ?>.jpg" class="cbp-l-project-img">    из того же файла. прописывать "project_id=2" вместо "project_id=02", может ли быть дело в 0. Попробую.
Спасибо.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
miketomlin
miketomlin
сообщение 27.6.2015, 18:27; Ответить: miketomlin
Сообщение #9


Файл должен иметь расширение .php. По-хорошему всю разметку нужно оставить на стороне клиента, а из базы подтягивать адрес картинки (хотя адрес картинки завязан на id, поэтому его можно сразу формировать), тайтл, сабтайтл и описание. В крайнем случае можно сделать, чтобы php-скрипт сам вставлял данные в разметку из базы.
Значение GET-параметра всегда строковое. Т.е. если передаете в качестве значения параметра 02, то графический файл должен называться 02.jpg. Что касается текстовых данных, по ним у вас пока нет рабочего решения.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Кера
Кера
Topic Starter сообщение 28.6.2015, 1:25; Ответить: Кера
Сообщение #10


Evgeniy3200, не получается! Картинок вообще нет, зато есть два одинаковых текста.

(miketomlin @ 27.6.2015, 20:27) *
Файл должен иметь расширение .php. По-хорошему всю разметку нужно оставить на стороне клиента, а из базы подтягивать адрес картинки (хотя адрес картинки завязан на id, поэтому его можно сразу формировать), тайтл, сабтайтл и описание. В крайнем случае можно сделать, чтобы php-скрипт сам вставлял данные в разметку из базы. Значение GET-параметра всегда строковое. Т.е. если передаете в качестве значения параметра 02, то графический файл должен называться 02.jpg. Что касается текстовых данных, по ним у вас пока нет рабочего решения.


Сайт не имеет админки. И базы данных нет(если Вы это имеете ввиду) Редактируется из Notepad. Я к тому же новичок и половину не понял, что Вы написали. 

Может быть так что проблема из-за того что сайт на поддомене?
Вот головняк! :angry:
Попробую разместить на домене


Сообщение отредактировал Кера - 28.6.2015, 1:19
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите вспомнить рекламного бота Телеграм для обмена рекламой
0 Mixatraider 678 21.2.2024, 23:42
автор: Mixatraider
Открытая тема (нет новых ответов) Помогите рещить проблему с монитором.
Почему низкое разрешение при подключении монитора через displayport?
0 Levels 1693 11.12.2020, 0:48
автор: Levels
Открытая тема (нет новых ответов) Помогите кто нибудь получить партнерку Росбанк!
7 heisenberg_mw 2302 7.8.2020, 9:28
автор: heisenberg_mw
Открытая тема (нет новых ответов) Помогите найти тему пожалуйста
7 virtas 12374 24.7.2020, 17:02
автор: -JamesSmips-
Открытая тема (нет новых ответов) Помогите с поиском доноров
3 tehno_music 3322 4.11.2019, 17:15
автор: goblin78


 



RSS Текстовая версия Сейчас: 19.3.2024, 9:39
Дизайн