Как сделать открытие картинок в аякс окне на форуме ...

likbezz

2010-07-01Дата: Четверг, 01.07.2010, 00:28 | Сообщение # 1

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Тема про превьюшко, картинки при клике ......... и прочее - в таком духе ... на тему «как» ...

Diz6942

2011-10-14Дата: Пятница, 14.10.2011, 11:29 | Сообщение # 61

Лейтенант

Группа: Проверенные

Сообщений: 50

Награды: 0

Репутация: 0

Статус: 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

likbezz

2011-10-15Дата: Суббота, 15.10.2011, 03:57 | Сообщение # 62

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Quote (Diz6942)

likbezz, доброе утро! К сожалению опять чехарда у меня какая-то получается:
в мозилле картинки выстраиваются по 4. По 5 не хотят ни под каким МОИМ соусом...
код такой:

Code

Под каким “соусом”?
Вы ни капельки не изменили стили.
...

Меняете стили:
Строка 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

...

Вот вам пример.
☑ Пример ...
...

Тема картинок закрыта.
...

Прикрепления: 0777809.png (4.4 Kb)

Diz6942

2011-10-20Дата: Четверг, 20.10.2011, 11:11 | Сообщение # 63

Лейтенант

Группа: Проверенные

Сообщений: 50

Награды: 0

Репутация: 0

Статус: Offline

likbezz, здравствуйте! И хотела бы закрыть тему, да не получается.
После того как все переставила страница материала стала глючить: если добавляешь текст, то меню и все остальное опять уезжает вниз. Но беспокоить Вас не стала - тема же закрыта...
А сегодня попыталась добавить новый материал и вот что получается см. Фотка на страницу материала добавляется, а на всех остальных страницах ее нет. НИГДЕ НИЧЕГО со вчерашнего дня не меняла. Это как такое может быть?????????? Помогите, пожалуйста.

Сообщение отредактировал Diz6942 - Четверг, 20.10.2011, 14:24

likbezz

2011-10-20Дата: Четверг, 20.10.2011, 19:02 | Сообщение # 64

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Diz6942,

Quote (Diz6942)

А сегодня попыталась добавить новый материал и вот что получается см. Фотка на страницу материала добавляется, а на всех остальных страницах ее нет. НИГДЕ НИЧЕГО со вчерашнего дня не меняла. Это как такое может быть?????????? Помогите, пожалуйста.

Так у вас в материале «проба» текста нет (краткое содержание) - по этому и не выводится ...
- Подозреваю, что вы блок с картинками воткнули в блок <?if($MESSEGE$)?> ...

Diz6942

2011-10-21Дата: Пятница, 21.10.2011, 13:25 | Сообщение # 65

Лейтенант

Группа: Проверенные

Сообщений: 50

Награды: 0

Репутация: 0

Статус: Offline

likbezz, спасибо! Все наладилось.)))))))))))
Может вопрос не в эту тему, но хотелось бы узнать как на фотки(рамки) автоматом добавлять нумерацию? от 1 до 10? Поможете? В очередной раз... smile

Сообщение отредактировал Diz6942 - Пятница, 21.10.2011, 14:27

likbezz

2011-10-21Дата: Пятница, 21.10.2011, 16:29 | Сообщение # 66

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Diz6942,

Quote (Diz6942)

likbezz, спасибо! Все наладилось

Я так и думал )

Quote (Diz6942)

хотелось бы узнать как на фотки(рамки) автоматом добавлять нумерацию? от 1 до 10?

При помощи условных операторов - добавлять номер в дополнительный элемент (span, например), или класс к блоку с картинкой и фоновой картинкой с номером заданной этому классу.
...

Quote (Diz6942)

Поможете? В очередной раз...

Нет.
У вас есть всё чтобы сделать это собственными силами.
...

Добавлено (21.10.2011, 17:00)
---------------------------------------------
Diz6942,

Quote (Diz6942)

Я ведь не мастер по конструированию сайтов, а дизайнер интерьеров.

А я системный администратор, и что? Какое это имеет значение?
Вы взялись разрабатывать свой сайт, так извольте ...

Diz6942

2011-10-21Дата: Пятница, 21.10.2011, 16:47 | Сообщение # 67

Лейтенант

Группа: Проверенные

Сообщений: 50

Награды: 0

Репутация: 0

Статус: Offline

Quote

Нет.
У вас есть всё чтобы сделать это.

Очень жаль... sad

Я ведь не мастер по конструированию сайтов, а дизайнер интерьеров.
Представьте ситуацию: Вы приходите ко мне на сайт и просите помочь Вам в оформлении Вашей новостройки. Я помогаю Вам с выбором системы отопления. Потом помогаю спроектировать систему кондиционирования и вентиляции. А когда в очередной раз Вам понадобится моя помощь,например в выборе стиля, я скажу что у Вас все есть для самостоятельного решения...
И все же - спасибо Вам за помощь. Вы мне очень во многом помогли.

Сообщение отредактировал Diz6942 - Пятница, 21.10.2011, 17:04

likbezz

2011-10-21Дата: Пятница, 21.10.2011, 17:15 | Сообщение # 68

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Diz6942,

Quote (Diz6942)

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

А представьте такую: вы приходите ко мне и просите помочь по сайту, я помогаю, потом ещё что-то и ещё ...
И что? - теперь я обязан помогать вам до скончания веков? Так как вы “дизайнер”, и изучить простейшие методы работы с HTML/CSS у вас нет ни времени, ни возможности, ни желания. Так что ли?
...

Тема была интересной - лично мне, востребованной - пользователям, я вам помог - преследовал свои, личные цели - интерес + полезная информация для сайта.
Вставлять же номерки на картинки - это очень специфично и востребовано вряд ли будет. И, самое главное, мне не интересно, во всяком случае, на данный момент.
...

likbezz

2011-10-21Дата: Пятница, 21.10.2011, 18:12 | Сообщение # 69

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: 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 ...
...

Прикрепления: 6278161.png (28.5 Kb) · 0185451.png (28.4 Kb)

Diz6942

2011-10-21Дата: Пятница, 21.10.2011, 21:43 | Сообщение # 70

Лейтенант

Группа: Проверенные

Сообщений: 50

Награды: 0

Репутация: 0

Статус: Offline

likbezz, спасибо. И не только за коды! smile

Чтобы сделать номера НЕ жирными и меньших размеров,что нужно поменять?
Чувствую, что тут

Code

font:bold 12px/1.2 Verdana,sans-serif;}

, а что и как - не знаю...
Только не ругайте двоечника.

Пробовала вот так изменить

Code

font: 8px/1.2 Verdana,sans-serif;}

, но ничего не меняется.

Сообщение отредактировал Diz6942 - Пятница, 21.10.2011, 22:30

likbezz

2011-10-21Дата: Пятница, 21.10.2011, 22:54 | Сообщение # 71

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Diz6942,

Quote (Diz6942)

Чтобы сделать номера НЕ жирными и меньших размеров,что нужно поменять?
Чувствую, что тут

Ага, точно.

Quote (Diz6942)

а что и как - не знаю...

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;

...

Diz6942

2011-10-22Дата: Суббота, 22.10.2011, 00:36 | Сообщение # 72

Лейтенант

Группа: Проверенные

Сообщений: 50

Награды: 0

Репутация: 0

Статус: Offline

Quote

Да, неужели ... ссылку.

Шесть маленьких буковок "normal" - и все работает! smile

Сообщение отредактировал Diz6942 - Суббота, 22.10.2011, 00:41

likbezz

2011-10-22Дата: Суббота, 22.10.2011, 03:16 | Сообщение # 73

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Diz6942,

Quote (Diz6942)

Шесть маленьких буковок "normal" - и все работает!

Можно и короче )

Code

font:400 8px/1.2 Verdana,sans-serif;

- 3 символа - результат тот же )
...

Diz6942

2011-10-26Дата: Среда, 26.10.2011, 08:47 | Сообщение # 74

Лейтенант

Группа: Проверенные

Сообщений: 50

Награды: 0

Репутация: 0

Статус: Offline

Доброго дня! Таким (см.выше) способом выводится до 10 картинок. А можно больше? скажем до 20? и как?

Сообщение отредактировал Diz6942 - Среда, 26.10.2011, 08:47

likbezz

2011-10-26Дата: Среда, 26.10.2011, 14:26 | Сообщение # 75

Аццкий кодер

Группа: Администраторы

Сообщений: 9093

Награды: 23

Репутация: 459

Статус: Unknown

Diz6942,

Quote (Diz6942)

Доброго дня! Таким (см.выше) способом выводится до 10 картинок. А можно больше? скажем до 20? и как?

Нет, системным оператором $IMG_URLx$ выводятся только 10 (десять) картинок.
Остальное только скриптом ... или руками.
...

Как сделать открытие картинок в аякс окне на форуме ... - Страница 5

Как сделать...

Страница 5 из 9 « 1 2 3 4 5 6 7 8 9 »
Модератор форума: likbezz

Возможно будет интересно
	Тема	Обновления