Как сделать открытие картинок в аякс окне на форуме ...
|
|
|
2010-07-01Дата: Четверг, 01.07.2010, 00:28 | Сообщение # 1 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Тема про превьюшко, картинки при клике ......... и прочее - в таком духе ... на тему «как» ...
| | |
|
|
2011-10-14Дата: Пятница, 14.10.2011, 11:29 | Сообщение # 61 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
likbezz, доброе утро! К сожалению опять чехарда у меня какая-то получается: в мозилле картинки выстраиваются по 4. По 5 не хотят ни под каким МОИМ соусом... код такой: Code div.imgBox{width:650px;clear:both;overflow:hidden;} div.imgBox a{display:block;float:left;width:126px;height:126px;line-height:125px;background-color:#CCC;text-align:center;border:1px solid #999;vertical-align:middle;margin-right:3px;margin-bottom:3px;} div.imgBox a img{display:inline;}
Сообщение отредактировал Diz6942 - Пятница, 14.10.2011, 12:52 | | |
|
|
2011-10-15Дата: Суббота, 15.10.2011, 03:57 | Сообщение # 62 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Quote (Diz6942) likbezz, доброе утро! К сожалению опять чехарда у меня какая-то получается: в мозилле картинки выстраиваются по 4. По 5 не хотят ни под каким МОИМ соусом... код такой: Code div.imgBox{width:650px;clear:both;overflow:hidden;} div.imgBox a{display:block;float:left;width:126px;height:126px;line-height:125px;background-color:#CCC;text-align:center;border:1px solid #999;vertical-align:middle;margin-right:3px;margin-bottom:3px;} div.imgBox a img{display:inline;} Под каким “соусом”? Вы ни капельки не изменили стили. ...
Меняете стили: Строка 136 С вот этого: Code .eMessage img, .eText img {background: #fff; padding: 4px !important; border-bottom: 1px solid #ccc !important; margin: 5px !important;} На вот это: Code .eMessage img,.eText img{background:#fff;padding:3px!important;border:1px solid #999!important;margin:3px;} ...
Ниже: Строки 142 - 144 На вот это: Code div.imgBox{width:650px;clear:both;overflow:hidden;} div.imgBox a{display:block;float:left;width:124px;height:124px;background-color:#CCC;text-align:center;border:1px solid #999;margin-right:3px;margin-bottom:3px;} div.imgBox a img{display:inline;max-height:110px!important;max-width:110px!important;} ...
Скачиваете себе на сайт скрипт: showImgPlus.js и меняете ссылку, там где у вас прописано (ищи в шаблонах):
на то, что скачали. На крайняк, меняете на вот это: Code <script type="text/javascript" src="http://likbezz.ru/_source/_js/ext/showImgPlus.js"></script> ...
Вот вам пример. ☑ Пример ... ...
Тема картинок закрыта. ...
| | |
|
|
2011-10-20Дата: Четверг, 20.10.2011, 11:11 | Сообщение # 63 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
likbezz, здравствуйте! И хотела бы закрыть тему, да не получается. После того как все переставила страница материала стала глючить: если добавляешь текст, то меню и все остальное опять уезжает вниз. Но беспокоить Вас не стала - тема же закрыта... А сегодня попыталась добавить новый материал и вот что получается см. Фотка на страницу материала добавляется, а на всех остальных страницах ее нет. НИГДЕ НИЧЕГО со вчерашнего дня не меняла. Это как такое может быть?????????? Помогите, пожалуйста.
Сообщение отредактировал Diz6942 - Четверг, 20.10.2011, 14:24 | | |
|
|
2011-10-20Дата: Четверг, 20.10.2011, 19:02 | Сообщение # 64 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Diz6942, Quote (Diz6942) А сегодня попыталась добавить новый материал и вот что получается см. Фотка на страницу материала добавляется, а на всех остальных страницах ее нет. НИГДЕ НИЧЕГО со вчерашнего дня не меняла. Это как такое может быть?????????? Помогите, пожалуйста. Так у вас в материале «проба» текста нет (краткое содержание) - по этому и не выводится ... - Подозреваю, что вы блок с картинками воткнули в блок <?if($MESSEGE$)?> ...
| | |
|
|
2011-10-21Дата: Пятница, 21.10.2011, 13:25 | Сообщение # 65 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
likbezz, спасибо! Все наладилось.))))))))))) Может вопрос не в эту тему, но хотелось бы узнать как на фотки(рамки) автоматом добавлять нумерацию? от 1 до 10? Поможете? В очередной раз...
Сообщение отредактировал Diz6942 - Пятница, 21.10.2011, 14:27 | | |
|
|
2011-10-21Дата: Пятница, 21.10.2011, 16:29 | Сообщение # 66 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Diz6942, Quote (Diz6942) likbezz, спасибо! Все наладилось Я так и думал )
Quote (Diz6942) хотелось бы узнать как на фотки(рамки) автоматом добавлять нумерацию? от 1 до 10? При помощи условных операторов - добавлять номер в дополнительный элемент (span, например), или класс к блоку с картинкой и фоновой картинкой с номером заданной этому классу. ...
Quote (Diz6942) Поможете? В очередной раз... Нет. У вас есть всё чтобы сделать это собственными силами. ...
Добавлено (21.10.2011, 17:00) --------------------------------------------- Diz6942, Quote (Diz6942) Я ведь не мастер по конструированию сайтов, а дизайнер интерьеров. А я системный администратор, и что? Какое это имеет значение? Вы взялись разрабатывать свой сайт, так извольте ...
| | |
|
|
2011-10-21Дата: Пятница, 21.10.2011, 16:47 | Сообщение # 67 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Quote Нет. У вас есть всё чтобы сделать это. Очень жаль... Я ведь не мастер по конструированию сайтов, а дизайнер интерьеров. Представьте ситуацию: Вы приходите ко мне на сайт и просите помочь Вам в оформлении Вашей новостройки. Я помогаю Вам с выбором системы отопления. Потом помогаю спроектировать систему кондиционирования и вентиляции. А когда в очередной раз Вам понадобится моя помощь,например в выборе стиля, я скажу что у Вас все есть для самостоятельного решения... И все же - спасибо Вам за помощь. Вы мне очень во многом помогли.
Сообщение отредактировал Diz6942 - Пятница, 21.10.2011, 17:04 | | |
|
|
2011-10-21Дата: Пятница, 21.10.2011, 17:15 | Сообщение # 68 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Diz6942, Quote (Diz6942) Представьте ситуацию: Вы приходите ко мне на сайт и просите помочь Вам в оформлении Вашей новостройки. Я помогаю Вам с выбором системы отопления. Потом помогаю спроектировать систему кондиционирования и вентиляции. А когда в очередной раз Вам понадобится моя помощь,например в выборе стиля, я скажу что у Вас все есть для самостоятельного решения... А представьте такую: вы приходите ко мне и просите помочь по сайту, я помогаю, потом ещё что-то и ещё ... И что? - теперь я обязан помогать вам до скончания веков? Так как вы “дизайнер”, и изучить простейшие методы работы с HTML/CSS у вас нет ни времени, ни возможности, ни желания. Так что ли? ...
Тема была интересной - лично мне, востребованной - пользователям, я вам помог - преследовал свои, личные цели - интерес + полезная информация для сайта. Вставлять же номерки на картинки - это очень специфично и востребовано вряд ли будет. И, самое главное, мне не интересно, во всяком случае, на данный момент. ...
| | |
|
|
2011-10-21Дата: Пятница, 21.10.2011, 18:12 | Сообщение # 69 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
А впрочем... когда есть свободная минутка ) ... Вот так должен выглядеть блок для картинок: Quote (HTML) <?if($IMG_URL1$)?><a class="n1" href="$IMG_URL1$" target="_blank" title="Нажмите, для просмотра в полном размере..."><img src="$IMG_SMALL_URL1$" alt="" /></a><?endif?> <?if($IMG_URL2$)?><a class="n2" href="$IMG_URL2$" target="_blank" title="Нажмите, для просмотра в полном размере..."><img src="$IMG_SMALL_URL2$" alt="" /></a><?endif?> ... и так далее ...
Вот такие стили: Code div.imgBox a.n1,div.imgBox a.n2,div.imgBox a.n3,div.imgBox a.n4,div.imgBox a.n5,div.imgBox a.n6,div.imgBox a.n7,div.imgBox a.n8,div.imgBox a.n9,div.imgBox a.n10{background:#CCC url('http://likbezz.ru/_example/sites/_part1/design-architec/n01-10.png') no-repeat 100px 2px;} div.imgBox a.n2{background-position:100px -128px;} div.imgBox a.n3{background-position:100px -258px;} div.imgBox a.n4{background-position:100px -388px;} div.imgBox a.n5{background-position:100px -518px;} div.imgBox a.n6{background-position:100px -648px;} div.imgBox a.n7{background-position:100px -778px;} div.imgBox a.n8{background-position:100px -908px;} div.imgBox a.n9{background-position:100px -1038px;} div.imgBox a.n10{background-position:100px -1168px;} ... Где: Code div.imgBox a.n2{background-position:100px -128px;} 100px - положение по горизонтали, -128px - положение по вертикали. Высчитывается - из первоначального положения минус 130. Например: Положение «01» == 2px (по вертикали) -130 == -128. -128 - 130 == - 258 ... («-» на «-» даёт «+») ... и так далее ... ...
Вот такой результат:
...
А вот пример:
☑ Пример (нумерация картинок) ... ...
Цифры можно перерисовать под свой стиль/размер/цвет ... Стили можно изменить под своё положение, у меня - справа снизу. ... Или вот такой вариант:
Вот так должен выглядеть блок для картинок: Quote (HTML) <?if($IMG_URL1$)?><a href="$IMG_URL1$" target="_blank" title="Нажмите, для просмотра в полном размере..."><img src="$IMG_SMALL_URL1$" alt="" /><b>01</b></a><?endif?> <?if($IMG_URL2$)?><a href="$IMG_URL2$" target="_blank" title="Нажмите, для просмотра в полном размере..."><img src="$IMG_SMALL_URL2$" alt="" /><b>02</b></a><?endif?> ... и так далее ...
Вот такие стили: Сюда добавляем: Quote (CSS) div.imgBox a{display:block;float:left;width:124px;height:124px;background-color:#CCC;text-align:center;border:1px solid #999;margin-right:3px;margin-bottom:3px;position:relative;} И далее: Code div.imgBox a b{display:block;position:absolute;z-index:1;width:20px;height:15px;left:104px;top:110px;color:#000;font:bold 12px/1.2 Verdana,sans-serif;} * html div.imgBox a b{left:102px;top:108px;} div.imgBox a:hover b,div.imgBox a:hover{color:#F00;text-decoration:none;} ...
Результат вот такой:
...
Пример:
☑ Пример (нумерация картинок №2) ... ... ...
Стили для отображения цифр можно менять - семейство, размер, начертание, насыщенность, цвет. То же самое, и при наведении - событии :hover ... ...
| | |
|
|
2011-10-21Дата: Пятница, 21.10.2011, 21:43 | Сообщение # 70 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
likbezz, спасибо. И не только за коды! Чтобы сделать номера НЕ жирными и меньших размеров,что нужно поменять? Чувствую, что тутCode font:bold 12px/1.2 Verdana,sans-serif;} , а что и как - не знаю... Только не ругайте двоечника.
Пробовала вот так изменитьCode font: 8px/1.2 Verdana,sans-serif;} , но ничего не меняется.
Сообщение отредактировал Diz6942 - Пятница, 21.10.2011, 22:30 | | |
|
|
2011-10-21Дата: Пятница, 21.10.2011, 22:54 | Сообщение # 71 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Diz6942, Quote (Diz6942) Чтобы сделать номера НЕ жирными и меньших размеров,что нужно поменять? Чувствую, что тут Ага, точно. Quote (Diz6942) а что и как - не знаю... Справочник по CSS. Версия v3.0 (Copyright © 2008 Влад Мержевич)
Где: Code font:bold 12px/1.2 Verdana,sans-serif;} bold - Устанавливает насыщенность шрифта (Варианты: bold | bolder | lighter | normal | 100 | 200 | 300 | ... | 800 | 900) 12px - Размер (Варианты: от 0 - ∞) 1.2 - Устанавливает интерлиньяж (межстрочный интервал) (В данном случае множитель) Verdana,sans-serif - Шрифт и семейство. ...
Quote (Diz6942) Пробовала вот так изменить, но ничего не меняется. Да, неужели ... ссылку. Code font:normal 8px/1.2 Verdana,sans-serif; ...
| | |
|
|
2011-10-22Дата: Суббота, 22.10.2011, 00:36 | Сообщение # 72 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Quote Да, неужели ... ссылку. Шесть маленьких буковок "normal" - и все работает!
Сообщение отредактировал Diz6942 - Суббота, 22.10.2011, 00:41 | | |
|
|
2011-10-22Дата: Суббота, 22.10.2011, 03:16 | Сообщение # 73 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Diz6942, Quote (Diz6942) Шесть маленьких буковок "normal" - и все работает! Можно и короче ) Code font:400 8px/1.2 Verdana,sans-serif; - 3 символа - результат тот же ) ...
| | |
|
|
2011-10-26Дата: Среда, 26.10.2011, 08:47 | Сообщение # 74 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Доброго дня! Таким (см.выше) способом выводится до 10 картинок. А можно больше? скажем до 20? и как?
Сообщение отредактировал Diz6942 - Среда, 26.10.2011, 08:47 | | |
|
|
2011-10-26Дата: Среда, 26.10.2011, 14:26 | Сообщение # 75 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Diz6942, Quote (Diz6942) Доброго дня! Таким (см.выше) способом выводится до 10 картинок. А можно больше? скажем до 20? и как? Нет, системным оператором $IMG_URLx$ выводятся только 10 (десять) картинок. Остальное только скриптом ... или руками. ...
| | |
|