|
Сложно ли сделать шаблон из свёрстанного
в CSS и HTML сайта для JOOMLA??
92
Дарья
Тамара, давайте я вам расскажу, как раз вчера с этим сидела))
в квадратных скобочках пишется любое слово/набор букв, например rel="lightbox[gal]" Если у вас на странице несколько картинок, то rel="lightbox[gal]" надо прописать в каждой, тогда они организуются в галерею и будут показываться по очереди. Если какую-то картинку на странице включать не нужно - квадратные скобочки убираете, просто rel="lightbox"
93
Дарья
Соответственно если у вас на странице 2 и более разных галереи, которые не надо смешивать в одном окне с фотографиями, делается так:
Первая галерея: <a href="images/big/1.jpg" rel="lightbox[gallery1]" title="тут название картинки"><img src="images/small/1.jpg" width="100" height="40" alt="Beautiful Horses" /></a> <a href="images/big/2.jpg" rel="lightbox[gallery1]" title="тут название картинки"><img src="images/small/3.jpg" width="100" height="40" alt="Beautiful Horses" /></a> <a href="images/big/3.jpg" rel="lightbox[gallery1]" title="тут название картинки"><img src="images/small/3.jpg" width="100" height="40" alt="Beautiful Horses" /></a> Вторая галерея: <a href="images/big/1.jpg" rel="lightbox[gallery2]" title="тут название картинки"><img src="images/small/1.jpg" width="100" height="40" alt="Beautiful Horses" /></a> <a href="images/big/2.jpg" rel="lightbox[gallery2]" title="тут название картинки"><img src="images/small/3.jpg" width="100" height="40" alt="Beautiful Horses" /></a> <a href="images/big/3.jpg" rel="lightbox[gallery2]" title="тут название картинки"><img src="images/small/3.jpg" width="100" height="40" alt="Beautiful Horses" /></a>
94
Tamara
Дарья, только что попробовала создать 1 галерею, - получилось! Спасибо большое за помощь!
А, может быть вы знаете как сделать следующее: я хочу чтобы видимой была только 1 картинка из галереи, но при нажатии на нее было возможно посмотреть всю галерею, перелистывая фотографии? Как скрыть остальные фото, кроме заглавной? Спасибо заранее)
95
Дарья
приходят на ум только кустарные методы вроде скрытия картинок в hidden элемент, или установки нулевых размеров (не знаю, можно ли так, не пробовала...) попробуйте!
96
Александр
мдя про rel я че-то упустил ((
есть еще 1 "кустарный" способ ))) немножко хитро.. умный ) создаем див в размер вашей картинки.. вкладываем туда эту самую картинку первой, а за ней все остальные картинки после чего проаисываем в обрамляющем Div свойство overflow: hidden и он скрывает все что в него не влезает, следовательно и все остальные картинки. так-то ) о свойстве оверфлоу можно прочесть тут http://http://www.htmlbook.ru/css/overflow.html ) код получится примерно такой <div style="overflow: hidden; width: 100px; height: 200px;"><img src="1.jpg " alt="" /><img src="2.jpg " alt="" /><img src="3.jpg " alt="" /></div>
97
Tamara
Спасибо, сейчас попробую=)
98
Tamara
Наверное, я что то не так делаю но у меня не получается, появляетс первая картинка, но она никак не реагирует на клик по ней.
99
Дарья
а <a href=""></a> то добавили?
100
Tamara
Спасибо, получилось =))
101
Александр
вообще я так прикинул ... вам же по идеи даже картинки не нужны..
просто пишете 1 ссылку <a href="/img/1_big.jpg" rel="litebox[a]"><img src="/img/1small.jpg" /></a><a heref='/img/2_big.jpg' rel="litebox[a]"></a> <a heref='/img/2_big.jpg' rel="litebox[a]"></a> <a heref='/img/3_big.jpg' rel="litebox[a]"></a> <a heref='/img/4_big.jpg' rel="litebox[a]"></a> я не пробовал но должно сработать ) Если с работает то лучше использовать именно этот способ. в нем есть 1 + клиенту не придется подгружать спрятанные изображения в браузер, соответственно скорость работы сайта на клиентской машине увеличится, а расход трафика уменьшится
102
Tamara
Спасибо!
103
Tamara
Честно говоря, только что хотела попробовать этот способ, но не могу понять с чего начать.
Что значит "даже картинки не нужны" и "клиенту не придется подгружать спрятанные изображения в браузер", я же все-равно даю ссылку на спрятанное в браузер изображение? Или где эти изображения хранятся? Почему вместо <a href=></a> появилось <a heref=></a> ? Подскажите пожалуйста.
104
Александр
начну с конца. .) heref Это очепятка ) конечно же правильно писать href
"я же все-равно даю ссылку на спрятанное в браузер изображение" визуально они кончено спрятаны. ПОльзователь их не увидит, но браузер их должен будет загрузить, так как эти изображения описаны кодом. Браузеру все равно увидит их пользователь или нет. Дальше я думаю понятно. Пользователь со слабой скоростью будет долго ждать пока вся страница загрузится. А пользователям лимитных тарифов придется еще за это платить. "Что значит "даже картинки не нужны"" это значит, что внутри тега <a ></a>Нам не нужно прописывать картинку если в ссылке указан rel="litebox[a]". и пользователь который к вам зайдет не потеряет лишнего времени и траффика. Честно говоря, только что хотела попробовать этот способ, но не могу понять с чего начать. а тут все просто... сделайте все тоже самое что было в посте выше с одной лишь разницей <div> больше не нужен, а всем то картинок которые идут после первой (заглавной которая должна быть видимой) по удаляйте тэги <img />. должно сработать... <a href="images/big/1.jpg" rel="lightbox[gallery1]" title="тут название картинки"><img src="images/small/1.jpg" width="100" height="40" alt="Beautiful Horses" /></a> <a href="images/big/2.jpg" rel="lightbox[gallery1]" title="тут название картинки"></a> <a href="images/big/3.jpg" rel="lightbox[gallery1]" title="тут название картинки"></a> <a href="images/big/4.jpg" rel="lightbox[gallery1]" title="тут название картинки"></a> <a href="images/big/5.jpg" rel="lightbox[gallery1]" title="тут название картинки"></a> <a href="images/big/6.jpg" rel="lightbox[gallery1]" title="тут название картинки"></a> как то так
105
Дарья
Мне даже интересно что получится :)
106
Александр
у меня все получилось. Как надо )
107
Tamara
Александр, я пытаюсь внести этот код в Backend нашего сайта, но получается как то так:
http://http://www.ukrtech.com/inews/977854.html, точнее ничего не получается, при нажатии на маленьку, большая картинка открывается просто взамен маленькой, но нет этого красивого эффекта затемнения и открытия поверх темного фона в новом окне. Подскажите, пожалуйста, почему так происходит?
108
Александр
Вы забыли добавить событие на загрузку
<body onload="initLightbox()"> это подключает скриптик лайт бокса.. скоре всего из за этого и не работает .. пропишите. Если проблема не устранится будем думать дальше ) Удачи! )
109
Александр
а тут вообще мясо какое-то )) откда-то у вас там боди в боди взялось не понятно.. я разберусь позже
<br><span class=s9><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><br><script type="text/javascript" src="js/prototype.lite.js"></script><br><script type="text/javascript" src="js/moo.fx.js"></script><br><script type="text/javascript" src="js/litebox-1.0.js"></script><br><body onload="initLightbox()"><br><STYLE type="text/css"><br>IMG{border-style:none}<br>A{ text-de coration:none;font-size:11;font-weight:800}<br></STYLE&# 62;<p>< a href=[url=http://4-webmaster.info/go.php?to=http://ukrtech.com/faqpi cture/977786.jpg]http://http://ukrtech.com/faqpicture/977786.jpg[ ;/url] rel="lightbox[gal1]" title="Foto 1"><img src=[url=http://4-webmaster.info/go.php?to=http://ukrtech.com/faqpic ture/977795.jpg]http://http://ukrtech.com/faqpicture/977795.jpg[ /url]></a><p><a href=[url=http://4-webmaster.info/go.php?to=http://ukrtech.com/faqpi cture/977785.jpg]http://http://ukrtech.com/faqpicture/977785.jpg[ ;/url] rel="lightbox[gal1]" title="Foto 2"><img src=[url=http://4-webmaster.info/go.php?to=http://ukrtech.com/faqpic ture/977794.jpg]http://http://ukrtech.com/faqpicture/977794.jpg[ /url]></a><p><a href=[url=http://4-webmaster.info/go.php?to=http://ukrtech.com/faqpi cture/977784.jpg]http://http://ukrtech.com/faqpicture/977784.jpg[ ;/url] rel="lightbox[gal1]" title="Foto 3"><img src=[url=http://4-webmaster.info/go.php?to=http://ukrtech.com/faqpic ture/977793.jpg]http://http://ukrtech.com/faqpicture/977793.jpg[ /url]></a><p><a href=[url=http://4-webmaster.info/go.php?to=http://ukrtech.com/faqpi cture/977783.jpg]http://http://ukrtech.com/faqpicture/977783.jpg[ ;/url] rel="lightbox[gal1]" title="Foto 4"><img src=[url=http://4-webmaster.info/go.php?to=http://ukrtech.com/faqpic ture/977792.jpg]http://http://ukrtech.com/faqpicture/977792.jpg[ /url]></a><br></BODY><br></span> <BR><BR> </td>
110
Александр
ВСе понял )) вы встроили код который вам давали не разбирая его.. )
дело в том что в любом htm lфайле может быть 1 <body> </body> в котором находится все содержимое. все что идет до него это описательная часть заголовок и шапка. в шапку прописываются подключаемые скриты, стили, мето данные и иногда стили и скрипты (не подключенные файлами). подробнее можно прочесть тут если будет время. http://http://www.htmlbook.ru/html/body.html ну водщем так... уберите от туда боди <STYLE type="text/css"><br>IMG{border-style:none}<br>A{ text-de coration:none;font-size:11;font-weight:800}<br></STYLE&# 62; в тэге style заключаются только стиливое описание следовательно <br > там лишний текст должен выглядить так. <STYLE type="text/css"> IMG {border-style:none;} A {text-decoration:none;font-size:11;font-weight:800;} </STYLE> пробелы и переносы на новую строку сделаны только для удобства, на самом деле их правильнее писать в строку, но это сильно осложняет вам жизнь в последствии. Я настоятельно советую перенести все стили в нутрь тэга <head></head> так э как и <linc rel= ....> если у вас в док тайпе написано, что у вас html документ вам не следует закрывать <img /> подобным способом. это синтаксис xhtml. Если вы пишите сайт в xhtml у вас НЕ должно быть тэгов начинающихся с большой буквы.. они вообще не должны иметь больших букв.
111
Александр
мдя у вас там вообще док тайпа нет...
Давайте так... я позже разберу весь ваш сайт и покажу в каких строках и какие у вас есть ошибки.. и попробуем их исправить вместе.
112
Tamara
Хорошо, спасибо большое, буду ждать)
113
Александр
в общем я посмотрел приерно половину от странички.
) я теперь почти уверен что это CMS (КЭП во мне не дремлет) следовательно ошибок в коде почти нет, за исключением той части в кторой кто-то влез ) или их допустили когда делали шаблон. ошибки следующие и только верхней части сайта. <!DOCTYPE html > <!--1. [url=http://4-webmaster.info/go.php?to=http://usabili.ru/news/2009/0 3/20/doctype.html]http://http://usabili.ru/news/2009/03/20/doctype.h tml[/url]--> <html> <head> <base href="http://www.ukrtech.com:80/"> <title>Укртех. Новости > OOO "СвязьЭлектроМонтаж".</title> <meta http-equiv="description" content="<link rel='stylesheet' href='css/lightbox.css' type='text/css' media='screen' /><!--2. Здесь у вас что то пропало. что именно не могу сказать ниогда с таким не сталкивался. Факт в том что у вас не закрыт тэг мета а в свойстве content почему то лежит другой тжг линка такова быть не может--> <script type='text/javascript' src='js/prototype.lite.js'></script> <script type='text/javascript' src='js/moo.fx.js'></script> <script type='text/javascript'..." > <!--3. лишняя ковычка, не понятное троиточие. Его быть не должно--> <meta http-equiv="keywords" content="OOO "СвязьЭлектроМонтаж"."> <!--4. не должне находиться в тели скрипта --> <script> <!--5. Этот тэг сдесь лишний. у вас уже есть 1 незакрытый скриптовый тэг. Либо удалите этот либо закройте тэг выше.--> <!-- function s(n,v){ document.forms[0].x_fw_linkname.value=n; document.forms[0].x_fw_linkvalue.value=v; document.forms[0].submit(); }//--> </script> <STYLE type="text/css"> </STYLE> <link rel=stylesheet type="text/css" href="/s/ukrtech.css"> </head> их я пометил комментариями если не вкрсе они заключены в <!-- такую конструкцию--> рядом с тем место где ошибка разметил их с описанием. ну и + то о чем в #111 посте говорил у вас тоже нужно будет исправить.... то есть из той части что описана в #110 убрать body и подключить лайт бокс в тот тэг боди что у вас в сайте на самом верху У меня не заходит вконтакт один раз выбило и не заходит уже неделю,что при етом делать?
|
Загрузка. Пожалуйста, подождите...
Категория: 
Tamara