Форум » Вопросы дизайна » Тема взаимопомощи (продолжение) » Ответить
Тема взаимопомощи (продолжение)
Ge-Gra: Для публикации просьб о помощи и ответов на вопросы.
Zoltan: CharlieCarbon конкретно там, кажется, слизали плугин с джумлы. Вообще, есть очень похожие query slider плугины, carousel или slideshow. Другое дело, что их настолько много, что проще выдрать этот скрипт прямо из того сайта, или найти из готовых шаблонов и достать оттуда, к примеру, есть шаблон для DLE с похожим плугином, Gamer Life (который тоже от джумлы адаптирован).
CharlieCarbon: Zoltan пишет: проще выдрать этот скрипт прямо из того сайта ух, не проще, там такие дебри они нафигачили... Спасибо, поищу шаблоны
Zoltan: CharlieCarbon Если что, можно вот так.. <html> <script type="text/javascript" src="http://путь_к_скрипту/jquery.js"></script> <style> #tabs { position: relative; z-index:3; top:-60px; width: 100%; } #boxLinks { list-style: none; overflow: hidden; } #boxLinks li { display: inline; } #boxLinks li a { padding: 5px 10px; color: black; text-decoration: none; border: 1px solid #ccc; float: left; display: block; margin-left: -1px; position: relative; left: 1px; } #boxLinks li a:hover { color: #fff; background: #000; } #boxLinks li.current a { background: red; } #box { height: 250px; border: 1px solid #ccc; overflow: hidden; padding: 0px 30px 0px 30px; position: relative; top: -1px; } .box { display: none; height: 250px; overflow: auto; display: block; position: relative; overflow-x: hidden; } #box1:target, #box2:target, #box3:target { display: block; } </style> <script> $(function(){ $('li.tabs').click(function(){ $('li.tabs').removeClass('current'); $(this).addClass('current'); }); }); </script> <div id="box"> <div id="box3" class="box"> BOX3 <!--[if IE]><b>.</b><![endif]--> </div> <div id="box1" class="box"> BOX1 <!--[if IE]><b>.</b><![endif]--></div> <div id="box2" class="box"> BOX2 <!--[if IE]><b>.</b><![endif]--></div> </div> <div id="tabs"> <ul id="boxLinks" > <li class="tabs"><a href="#box2" >Tab 2</a></li> <li class="tabs"><a href="#box1">Tab 1</a></li> <li class="tabs"><a href="#box3">Tab 3</a></li> </ul> </div> </html> Если не подключать jquery, то выделенное жирным не нужно, но не будет выделять кликнутый элемент. Разберёшься?
Serifa: Че то вы всякие интересные скрипты не в той теме всё время постите! И говорите помедленнее, я записываю! Вдруг однажды пригодится. Мало ли... Итак, для чего нужен этот код?
CharlieCarbon: Zoltan пишет: Разберёшься? давно в этом не варился, но разберусь, наверное. Вообще все скрипты, которые к себе ставил, разбирал методом тыка, так что норм) Так, кстати, начинаешь понимать то, о чем раньше и не догадывался xD Спасибо
Zoltan: Serifa пишет: Итак, для чего нужен этот код? оно делает вот такую фигню CharlieCarbon Дык тут только стиль настроить (: а кто не методом тыка всё делает, покажи мне? не родился тот человек, который может сделать всё как надо с первого раза если что, спрашивай
CharlieCarbon: Zoltan, не знаю, разбирается ли здесь кто-то еще в этом кроме тебя, поэтому прошу тебя)) http://willsmith.forum24.ru/ - форум http://sandbox.scriptiny.com/javascript-slideshow/# -шаблон (этот подходит для моих целей идеально просто) Но вот подогнать его проблематично, хотя так хорошо начиналось. Теперь мозг просто в шоке. В общем в чем трабла: миниатюры внизу не передвигаются. Стрелочки Slide left и right неактивны. Вот тут то и пришел капздец моему моску. Почему??? Как это исправить? КОд там открытый, но кину его и сюда, чтоб не копошился там теряя время. стили: #slideshow {list-style:none; color:#fff} #slideshow span {display:none} #wrapper {width:306px; margin:5px auto; display:none} #wrapper * {margin:0; padding:0} #fullsize {position:relative; width:300px; height:150px; padding:2px; border:1px solid #ccc; background:#000} #information {position:absolute; bottom:0; width:300px; height:0; background:#000; color:#fff; overflow:hidden; z-index:200; opacity:.7; filter:alpha(opacity=70)} #information h3 {padding:4px 8px 3px; font-size:7px} #information p {padding:0 8px 8px; font-size:5px} #image {width:300px} #image img {position:absolute; z-index:25; width:auto} .imgnav {position:absolute; width:25%; height:50px; cursor:pointer; z-index:150} #imgprev {left:0; background:url(http://sandbox.scriptiny.com/javascript-slideshow/images/left.gif) left center no-repeat} #imgnext {right:0; background:url(http://sandbox.scriptiny.com/javascript-slideshow/images/right.gif) right center no-repeat} #imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)} .linkhover {background:url(http://sandbox.scriptiny.com/javascript-slideshow/images/link.gif) center center no-repeat} #thumbnails {margin-top:15px} #slideleft {float:left; width:20px; height:81px; background:url(http://sandbox.scriptiny.com/javascript-slideshow/images/scroll-left.gif) center center no-repeat; background-color:#222} #slideleft:hover {background-color:#333} #slideright {float:right; width:20px; height:81px; background:#222 url(http://sandbox.scriptiny.com/javascript-slideshow/images/scroll-right.gif) center center no-repeat} #slideright:hover {background-color:#333} #slidearea {float:left; position:relative; width:266px; margin-left:0px; height:81px; overflow:hidden} #slider {position:absolute; left:0; height:81px} #slider img {cursor:pointer; border:1px solid #666; padding:2px} Код слайдерав таблице: <td colspan="1" rowspan="2" style="height: 171px; vertical-align: top;"><ul id="slideshow"> <li> <h3>Уилл Смит дебютирует в режиссуре</h3> <span>http://willsmith.my1.ru/design/forum/news/directors.jpg</span> <p>Рано или поздно все популярные голливудские актеры делают это — пробуют снимать кино. Уилл Смит, считающийся самым...</p> <a href="#"><img src="http://willsmith.my1.ru/design/forum/news/directors.jpg" width="125" hight="75" alt="Director" /></a> </li> <li> <h3>Fresh Prince</h3> <span>http://willsmith.my1.ru/design/forum/news/FPbig.jpg</span> <p>Обновлены все видео 1 сезона Fresh Prince of Bel Air</p> <img src="http://willsmith.my1.ru/design/forum/news/FPbig.jpg" width="125" hight="75" alt="Fresh Prince" /> </li> </ul> <div id="wrapper"> <div id="fullsize"> <div id="imgprev" class="imgnav" title="Previous Image"></div> <div id="imglink"></div> <div id="imgnext" class="imgnav" title="Next Image"></div> <div id="image"></div> <div id="information"> <h3></h3> <p></p> </div> </div> <div id="thumbnails"> <div id="slideleft" title="Slide Left"></div> <div id="slidearea"> <div id="slider"></div> </div> <div id="slideright" title="Slide Right"></div> </div> </div> <script type="text/javascript" src="http://sandbox.scriptiny.com/javascript-slideshow/compressed.js"></script> <script type="text/javascript"> $('slideshow').style.display='none'; $('wrapper').style.display='block'; var slideshow=new TINY.slideshow("slideshow"); window.onload=function(){ slideshow.auto=true; slideshow.speed=5; slideshow.link="linkhover"; slideshow.info="information"; slideshow.thumbs="slider"; slideshow.left="slideleft"; slideshow.right="slideright"; slideshow.scrollSpeed=4; slideshow.spacing=5; slideshow.active="#fff"; slideshow.init("slideshow","image","imgprev","imgnext","imglink"); } </script> </td> Меня заело на этом, очень нужен взгляд третьего лица. Спасибо upd: еще и блок thumbnails и стили slide не реагирую на изменение высоты с 81 на 75...OMG!
Zoltan: CharlieCarbon О, это по моей части (: там есть див, который ловит все клики по верхней, большой картинке, imglink. Проблема в том, что он слишком велик и закрыл нижний слайдер, т.е до слайдера клик не доходит, он попадает в невидимый див. #imglink {position:absolute; height:306px; width:100%; z-index:100; opacity:.4; filter:alpha(opacity=40)} Поставь размер 150пикселей (высота картинки) CharlieCarbon пишет: upd: еще и блок thumbnails и стили slide не реагирую на изменение высоты с 81 на 75...OMG! Разве? Оо сейчас, вроде, всё окей там
CharlieCarbon: Zoltan пишет: Разве? Оо нет, это был мой тупизм Х_х Zoltan пишет: Поставь размер 150пикселей (высота картинки) невероятно!))) Спасибо за подсказку. БОЛЬШОЕ!)) наконец то я могу теперь обрадовать скромную кучку фанатов новым дизом)) *Пошел дорисовывать и скрипты все ставить*
Zoltan: CharlieCarbon не за что, обращайся (: CharlieCarbon пишет: *Пошел дорисовывать и скрипты все ставить*\\ гифки мне твои понравились :D
CharlieCarbon: Zoltan пишет: гифки мне твои понравились :Dкнопки что ли?) Я поиздевался над закрытыми разделами, да)
Morning: Добрый день. Ребятаааа. Сос! Помоги, пожалуйте довести дизайн до ума! Подскажите, пожалуйста, какой код нужно, чтобы графически "закрыть" форум? Я имею ввиду, чтобы внизу фон был законченным, а не обрывался. вот как здесь, пример http://francexviii.forum24.ru/ или вот тут http://borgia.forum24.ru/ Внизу табличка закрыта, выглядит как одна большая картина. На втором сайте еще лучше видн. Идут баннеры, а потом конец форума в виде рамки. Вот мне также надо. Чтобы это сделать, нужен код? И куда такой код вставлять?) Плюс, у меня форум с боковой таблицей. Помогите!!! Спасибо заранее за помощь)
CharlieCarbon: Morning пишет: Чтобы это сделать, нужен код? И куда такой код вставлять?) Плюс, у меня форум с боковой таблицей. Помогите!!! Спасибо заранее за помощь) во-первых: ссылку на форум. Мы не видим, какая там боковая таблица и что вообще происходит. во-вторых: зачем плодить темы? тема для помощи по дизайну уже существует. в-третьих: предварительный ответ на ваш вопрос. На той же "Боргии" внизу под таблицей просто стоит изображение. Оно сделано так, что создает впечатление "закрытости". На этом принципе строится любое подобное действо. Если хотите поместить баннеры туда, то нужно делать в виде таблицы (код таблиц обычной, калибруете ее по размеру и вставляете фоном всё ту же картинку).
Tsunami: Салют, дамы и господа! У меня назрел такой вот вопрос: а как на бордовский форум установить свой фавикон? Делать их умею, так что с форматом всё ок. Но вот какой html-код нужен? P.S. Гугл мне не очень помог, найденные коды пробовал подстроить под себя. Не сработало.
Zoltan: <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="http://урл_до_иконки/favicon.ico" /> В поле новостей, первой строчкой перед всем, должно сработать. И сразу же желательно в отдельной вкладке открыть саму иконку и обновить, очень уж любят браузеры её кешировать.
полная версия страницы