Компьютерный форум NoWa.cc - Добавить стиль к блоку с изображениями

Компьютерный форум NoWa.cc (https://nowa.cc/index.php)

- CSS (https://nowa.cc/forumdisplay.php?f=313)

- - Добавить стиль к блоку с изображениями (https://nowa.cc/showthread.php?t=347999)

Paraplegic

17.11.2011 19:33

Добавить стиль к блоку с изображениями

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

<style type="text/css">
.images{position:relative; float:left}
</style>

<?php if (isset($filenames)) : ?>
<?php foreach ($filenames as $k => $filename) : ?>
<div id="images">
<img src="<?php echo HOST . 'imagesCatalog/' . $filename ?>"
alt="" id="photo_mini_<?php echo $k ?>"class="photo_mini" />
</div>
<?php endforeach ?>
<?php endif ?>

zss	18.11.2011 07:11

Re: Добавить стиль к блоку с изображениями

Попробуйте
.images{position:relative; float:left;overflow:scroll}

Paraplegic

18.11.2011 12:54

Re: Добавить стиль к блоку с изображениями

Спасибо конечно, что откликнулись, но если б всё было так просто, то не обращался бы за помощью. Всё это и не только перепробавал - не получается...

zss	18.11.2011 14:03

Re: Добавить стиль к блоку с изображениями

overflow:scroll надо добавить к обрамляющему блоку,
а блок с изображением позиционировать абсолютно, тогда получается

Код:

<head>

<style type="text/css">

.images{position:absolute; float:left;top:0;}

</style>

<script language="javascript">

function SetPosition(id,n,imageWidth)

{

        st=document.getElementById(id).style;

        st.left=n*imageWidth+"px";

}

</script>

</head>

<body>

<div style="overflow:scroll">

<div class="images" id="1"><img src="a.jpg"/></div>

<div class="images" id="2"><img src="a.jpg"/></div>

<div class="images" id="3"><img src="a.jpg"/></div>

<div class="images" id="4"><img src="a.jpg"/></div>

</div>

<script language="javascript">

SetPosition("1",0,200);

SetPosition("2",1,200);

SetPosition("3",2,200);

SetPosition("4",3,200);

</script>

</body>

Paraplegic

18.11.2011 17:01

Re: Добавить стиль к блоку с изображениями

Сергей Сергеевич, извините, я пока чайник в этих делах, но для чего это,
<div class="images" id="1"><img src="a.jpg"/></div>
<div class="images" id="2"><img src="a.jpg"/></div>
<div class="images" id="3"><img src="a.jpg"/></div>
<div class="images" id="4"><img src="a.jpg"/></div>
если у меня изображения вытаскиваются из БД и их может быть разное кол-во

zss	18.11.2011 18:56

Re: Добавить стиль к блоку с изображениями

Ну, я это написал для примера.
У Вас в цикле php код должен для каждого изображения вставлять div с изображением
<div class="images" id="n"><img src="xxxxxxxx.jpg"/></div>
и функцию SetPosition("n",n,ШиринаИзображения),
n - номер изображения.

p.s. обратите внимание, что стиль .images - это стиль класса, а не одиночного элемента
(у Вас была ошибка).

Paraplegic

18.11.2011 21:40

Re: Добавить стиль к блоку с изображениями

Если б ещё кто рассказал как это всё слепить, вместе с моим php кодом. Эх, трудно быть бестолковому:wow:

zss	19.11.2011 11:02

Re: Добавить стиль к блоку с изображениями

примерно так.

Код:

<head>

<style type="text/css">

.images{position:absolute; float:left;top:0;}

</style>

<script language="javascript">

function SetPosition(id,n,imageWidth)

{

        st=document.getElementById(id).style;

        st.left=n*imageWidth+"px";

}

</script>

</head>

....

<div style="overflow:scroll">

<?php 

if (isset($filenames))

{ 

     $i=0;

     foreach ($filenames as $k => $filename) 

     {

         echo '<div class="images" id="'.$i.'">';

         echo '<img src="'. HOST . 'imagesCatalog/' . $filename. ' " id="photo_mini_'.$k.' "class="photo_mini" />';

         echo '</div>';

         echo '<script language="javascript">';

         echo 'SetPosition("'.$i.'",'.$i.',200)';

         echo '</script>';

         $i++; 

      }endforeach;



}endif;

?>

</div>

Paraplegic

19.11.2011 12:40

Re: Добавить стиль к блоку с изображениями

Выдаёт ошибку:
Parse error: syntax error, unexpected T_ENDFOREACH in C:\WebServers\home\luban.by\www\skins\tpl\form\sho w.tpl on line 79

52 <head>
53 <style type="text/css">
54 .images{position:absolute; float:left;top:0;}
55 </style>
56 <script language="javascript">
57 function SetPosition(id,n,imageWidth)
58 {
59 st=document.getElementById(id).style;
60 st.left=n*imageWidth+"px";
61 }
62 </script>
63 </head>
64 ....
65 <div style="overflow:scroll">
66 <?php
67 if (isset($filenames))
68 {
69 $i=0;
70 foreach ($filenames as $k => $filename)
71 {
72 echo '<div class="images" id="'.$i.'">';
73 echo '<img src="'. HOST . 'imagesCatalog/' . $filename. ' " id="photo_mini_'.$k.' "class="photo_mini" />';
74 echo '</div>';
75 echo '<script language="javascript">';
76 echo 'SetPosition("'.$i.'",'.$i.',200)';
77 echo '</script>';
78 $i++;
79 }endforeach;
80
81 }endif;
82 ?>
83 </div>

zss	19.11.2011 13:57

Re: Добавить стиль к блоку с изображениями

уберите endforeach и endif:

Код:

77 echo '</script>';

78 $i++;

79 }

80

81 }

Если еще будут ошибки, пользуйтесь интернет справочниками,
например, по вышеприведенной ошибке
http://php-mysql.h1.ru/foreach.php
там видно, что после закрывающей скобки комментарий не предусмотрен.
Почему работал Ваш первоначальный код - непонятно.

Paraplegic

19.11.2011 16:33

Re: Добавить стиль к блоку с изображениями

Кое-что подправил в стилях, и о чудо, получилось то что надо, но появилась другая проблема - перестал работать скрипт увеличения изображения по клике на превью.

Текущее время: 11:57. Часовой пояс GMT +3.

Время генерации страницы 0.02676 секунды с 9 запросами