Правила Форума редакция от 22.06.2020 |
|
|
|
|
|
Опции темы | Опции просмотра | Language |
17.11.2011, 18:33 | #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 ?> |
|
Реклама: | Рекомендуем супермаркет KNS - процессор AMD Ryzen 5 8500G OEM - Подарок каждому покупателю! | шарм делюкс сахара нуар 80х160 рет рект натуральный | руки вверх с 10 октября | Рекомендуем супермаркет КНС.ру - M393A8G40BB4-CWECO - билеты на футбол в подарок каждому покупателю | Yahoo и LinkedIn |
18.11.2011, 06:11 | #2 |
Постоялец
Пол: Регистрация: 05.02.2007
Адрес: Москва
Сообщений: 662
Репутация: 271
|
Re: Добавить стиль к блоку с изображениями
Попробуйте
.images{position:relative; float:left;overflow:scroll}
__________________
Сергей Сергеевич |
18.11.2011, 11:54 | #3 |
Re: Добавить стиль к блоку с изображениями
Спасибо конечно, что откликнулись, но если б всё было так просто, то не обращался бы за помощью. Всё это и не только перепробавал - не получается...
|
|
18.11.2011, 13:03 | #4 |
Постоялец
Пол: Регистрация: 05.02.2007
Адрес: Москва
Сообщений: 662
Репутация: 271
|
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>
__________________
Сергей Сергеевич |
18.11.2011, 16:01 | #5 |
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, 17:56 | #6 |
Постоялец
Пол: Регистрация: 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 в 17:58.. |
18.11.2011, 20:40 | #7 |
Re: Добавить стиль к блоку с изображениями
Если б ещё кто рассказал как это всё слепить, вместе с моим php кодом. Эх, трудно быть бестолковому
|
|
19.11.2011, 10:02 | #8 |
Постоялец
Пол: Регистрация: 05.02.2007
Адрес: Москва
Сообщений: 662
Репутация: 271
|
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>
__________________
Сергей Сергеевич Последний раз редактировалось zss; 19.11.2011 в 10:20.. |
Сказали спасибо: |
19.11.2011, 11:40 | #9 |
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, 12:57 | #10 |
Постоялец
Пол: Регистрация: 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 в 13:01.. |
Сказали спасибо: |
19.11.2011, 15:33 | #11 |
Re: Добавить стиль к блоку с изображениями
Кое-что подправил в стилях, и о чудо, получилось то что надо, но появилась другая проблема - перестал работать скрипт увеличения изображения по клике на превью.
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
вопрос владельцам струйников Lexmark Z45/55/65, по блоку питания | s1974 | Компьютерные проблемы | 1 | 16.04.2011 23:13 |
Не получается подключить материнскую карту к системному блоку | Nikiss | Компьютерные проблемы | 1 | 13.03.2011 08:45 |
Программа по блоку доступа в папку | LexRider | Скорая помощь | 11 | 30.01.2009 19:50 |
Проблема с изображениями в .chm | Hotel Six | Microsoft Windows | 3 | 28.01.2008 21:29 |
|
|