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

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

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

Paraplegic · 18.11.2011, 12:54

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

zss · 18.11.2011, 14:03

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

Сергей Сергеевич, извините, я пока чайник в этих делах, но для чего это,
<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

Ну, я это написал для примера.
У Вас в цикле 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

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

zss · 19.11.2011, 11:02

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

Код:

<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

Выдаёт ошибку:
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

уберите endforeach и endif:

Код:

77 echo '</script>';
78 $i++;
79 }
80
81 }

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

Paraplegic · 19.11.2011, 16:33

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

17.11.2011, 19:33	#1
Paraplegic Неактивный пользователь Пол: Регистрация: 07.02.2011 Сообщений: 19 Репутация: 1	Добавить стиль к блоку с изображениями Ниже приведён код вывода превью изображений, изображения выводятся горизонтально в одну линию, никак не могу добиться, чтобы когда количество превью превышает ширину блока, появлялась горизонтальная полоса прокрутки. <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 ?>

18.11.2011, 07:11	#2
zss Постоялец Пол: Регистрация: 05.02.2007 Адрес: Москва Сообщений: 662 Репутация: 271	Re: Добавить стиль к блоку с изображениями Попробуйте .images{position:relative; float:left;overflow:scroll} __________________ Сергей Сергеевич

18.11.2011, 12:54	#3
Paraplegic Неактивный пользователь Пол: Регистрация: 07.02.2011 Сообщений: 19 Репутация: 1	Re: Добавить стиль к блоку с изображениями Спасибо конечно, что откликнулись, но если б всё было так просто, то не обращался бы за помощью. Всё это и не только перепробавал - не получается...

18.11.2011, 17:01	#5
Paraplegic Неактивный пользователь Пол: Регистрация: 07.02.2011 Сообщений: 19 Репутация: 1	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> если у меня изображения вытаскиваются из БД и их может быть разное кол-во

18.11.2011, 18:56	#6
zss Постоялец Пол: Регистрация: 05.02.2007 Адрес: Москва Сообщений: 662 Репутация: 271	Re: Добавить стиль к блоку с изображениями Ну, я это написал для примера. У Вас в цикле php код должен для каждого изображения вставлять div с изображением <div class="images" id="n"><img src="xxxxxxxx.jpg"/></div> и функцию SetPosition("n",n,ШиринаИзображения), n - номер изображения. p.s. обратите внимание, что стиль .images - это стиль класса, а не одиночного элемента (у Вас была ошибка). __________________ Сергей Сергеевич Последний раз редактировалось zss; 18.11.2011 в 18:58..

18.11.2011, 21:40	#7
Paraplegic Неактивный пользователь Пол: Регистрация: 07.02.2011 Сообщений: 19 Репутация: 1	Re: Добавить стиль к блоку с изображениями Если б ещё кто рассказал как это всё слепить, вместе с моим php кодом. Эх, трудно быть бестолковому

19.11.2011, 12:40	#9
Paraplegic Неактивный пользователь Пол: Регистрация: 07.02.2011 Сообщений: 19 Репутация: 1	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>

19.11.2011, 13:57	#10
zss Постоялец Пол: Регистрация: 05.02.2007 Адрес: Москва Сообщений: 662 Репутация: 271	Re: Добавить стиль к блоку с изображениями уберите endforeach и endif: Код: 77 echo '</script>'; 78 $i++; 79 } 80 81 } Если еще будут ошибки, пользуйтесь интернет справочниками, например, по вышеприведенной ошибке http://php-mysql.h1.ru/foreach.php там видно, что после закрывающей скобки комментарий не предусмотрен. Почему работал Ваш первоначальный код - непонятно. __________________ Сергей Сергеевич Последний раз редактировалось zss; 19.11.2011 в 14:01..

19.11.2011, 16:33	#11
Paraplegic Неактивный пользователь Пол: Регистрация: 07.02.2011 Сообщений: 19 Репутация: 1	Re: Добавить стиль к блоку с изображениями Кое-что подправил в стилях, и о чудо, получилось то что надо, но появилась другая проблема - перестал работать скрипт увеличения изображения по клике на превью.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
вопрос владельцам струйников Lexmark Z45/55/65, по блоку питания	s1974	Компьютерные проблемы	1	16.04.2011 23:13
Не получается подключить материнскую карту к системному блоку	Nikiss	Компьютерные проблемы	1	13.03.2011 09:45
Программа по блоку доступа в папку	LexRider	Скорая помощь	11	30.01.2009 20:50
Проблема с изображениями в .chm	Hotel Six	Microsoft Windows	3	28.01.2008 22:29