Перейти к содержимому



Помогите разобраться с фотографиями

#1 Кера

Кера
  • Пользователь
  • 6 сообщений
  • Репутация: 0
0

Отправлено 27 Июнь 2015 - 00:03

Здравствуйте.

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

 

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

 

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

 

 

Имеется в файле 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">
Это какой нибудь текст, который выходит со всеми фотографиями,  например hgggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>
    </div>
</div>

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

Прикрепленные файлы


 

 

Сообщение отредактировал BLIK: 27 Июнь 2015 - 00:19

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Помогите разобраться с формой
  2. Помогите разобраться с шаблоном
  3. Помогите разобраться с микроразметкой
  4. Помогите разобраться со скриптом
  5. Помогите разобраться с Javascript

#2 Ixman

Ixman
  • Пользователь PRO
  • 2 165 сообщений
  • Репутация: 436

Отправлено 27 Июнь 2015 - 09:10

@Кера, живой бы пример увидеть 


  • 0

#3 Evgeniy3200

Evgeniy3200
  • Пользователь PRO
  • 1 149 сообщений
  • Репутация: 268

Отправлено 27 Июнь 2015 - 10:43

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

 

Хотя возможно, у вас и другая ситуация...


  • 0

Если вы можете наугад в полной темноте пробраться к собственной кровати, ни разу не ушибившись, значит, пора путешествовать!



#4 Ixman

Ixman
  • Пользователь PRO
  • 2 165 сообщений
  • Репутация: 436

Отправлено 27 Июнь 2015 - 11:08

@Evgeniy3200, так вот и я так подумал, но может ещё браться и из параметра alt. Хотел увидеть живой пример и попробовать через манипуляции с html кодом, там бы точно можно было понять что и куда


  • 0

#5 Evgeniy3200

Evgeniy3200
  • Пользователь PRO
  • 1 149 сообщений
  • Репутация: 268

Отправлено 27 Июнь 2015 - 11:19

@Ixman, ну да, на  "пациенте" всегда быстрее разберешься, что и где болит :D  особенно когда есть такая полезная функция для верстки, как просмотр кода элемента!


  • 0

Если вы можете наугад в полной темноте пробраться к собственной кровати, ни разу не ушибившись, значит, пора путешествовать!



#6 Кера

Кера
    Topic Starter
  • Пользователь
  • 6 сообщений
  • Репутация: 0

Отправлено 27 Июнь 2015 - 14:38

Всем привет! Благодарю за внимание!

Живой пример, (пациент) здесь   www.vorota.asker.su


  • 0

#7 Evgeniy3200

Evgeniy3200
  • Пользователь PRO
  • 1 149 сообщений
  • Репутация: 268

Отправлено 27 Июнь 2015 - 15:04

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

 

Как в корне сайта называется точно файл " 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.

 

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

 

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


  • 0

Если вы можете наугад в полной темноте пробраться к собственной кровати, ни разу не ушибившись, значит, пора путешествовать!



#8 Кера

Кера
    Topic Starter
  • Пользователь
  • 6 сообщений
  • Репутация: 0

Отправлено 27 Июнь 2015 - 15:48

Файл называется 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. Попробую.

Спасибо.


  • 0

#9 miketomlin

miketomlin
  • Пользователь
  • 261 сообщений
  • Репутация: 35

Отправлено 27 Июнь 2015 - 17:27

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


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


  • 0

#10 Кера

Кера
    Topic Starter
  • Пользователь
  • 6 сообщений
  • Репутация: 0

Отправлено 28 Июнь 2015 - 00:25

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


 

 

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

 

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

 

Может быть так что проблема из-за того что сайт на поддомене?


Вот головняк! :angry:


Попробую разместить на домене


Сообщение отредактировал Кера: 28 Июнь 2015 - 00:19

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru