Следите за новостями любимого конструктора сайтов uCoz в социальных сетях!
У вас не закрыт вот этот див
<div id="content-top">
Нужно либо удалить, либо добавить </div>
Выслать Код шаблона от чего от диза или от слайдера?)
благодарю вас за отзывчивость. А где стоит этот код? ну то есть где закрывать?)
Я уже знаком с вашим предыдущим вопросом. Выложите код из шаблона Страницы сайта и код слайдера. Я посмотрю где ошибка.
Код стр сайта <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>$SITE_NAME$ - $MODULE_NAME$</title> <?$META_DESCRIPTION$?> <?$META_KEYWORDS$?> <link type="text/css" rel="StyleSheet" href="/_st/my.css" /> </head> <body> $ADMIN_BAR$ <div id="all"> <div id="top-stripe"></div> $GLOBAL_AHEADER$ <div style="height: 5px; margin: auto; overflow: hidden;"></div> <div id="content"> <div id=content-top></div> <div id="content-mid"> <div id="maincol"> <!-- <middle> --> <!-- <body> -->$CONTENT$<!-- </body> --> <!-- </middle> --> </div> <div id="rightcol"> <div id="soc"> <?if($RSS_LINK$)?><a href="$RSS_LINK$" target="_blank" title="RSS" class="soc-rss"></a><?endif?> <a href="http://del.icio.us/post?url=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Del.icio.us" class="soc-del"></a> <a href="http://www.facebook.com/share.php?u=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="FaceBook" class="soc-facebook"></a> <a href="http://memori.ru/link/?sm=1&u_data[url]=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Memori" class="soc-memori"></a> <a href="http://vkontakte.ru/share.php?url=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Vkontakte" class="soc-vkontakte"></a> <a href="http://twitter.com/share?url=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Twitter" class="soc-twitter"></a> </div> $GLOBAL_CLEFTER$ </div> <div style="clear: both;"></div> </div> $GLOBAL_BFOOTER$ </div> </div> </body> </html>
Код слайдера <div class="sidebar"> <div class="sidebar-top"></div> <div class="sidebar-mid"> $GLOBAL_SLADER$ </div> <div class="sidebar-bot"></div> </div> <div id="maincont"> <div align="center"><div id="msg_slideshow" class="msg_slideshow"> <div id="msg_wrapper" class="msg_wrapper"></div> <div id="msg_controls" class="msg_controls"> <a href="#" id="msg_prev" class="msg_prev"></a> <a href="#" id="msg_pause_play" class="msg_pause"></a> <a href="#" id="msg_next" class="msg_next"></a> </div> <div id="msg_thumbs" class="msg_thumbs"> <div class="msg_thumb_wrapper"> <a href="#"> <img src="/_tbkp/1.jpg" alt="http://shadowhunters.ucoz.net/_tbkp/1.jpg"/> </a> <a href="#"> <img src="/_tbkp/7138235.png" alt="http://delena.ucoz.ru/_tbkp/7138235.png"/> </a> <a href="#"> <img src="/_tbkp/1.jpg" alt="http://shadowhunters.ucoz.net/_tbkp/1.jpg"/> </a> <a href="#"> <img src="/_tbkp/2.jpg" alt="http://shadowhunters.ucoz.net/_tbkp/2.jpg"/> </a> <a href="#"> <img src="/_tbkp/33a89ede2a6ef9482db8d453d2520abf.jpg" alt="http://delena.ucoz.ru/_tbkp/33a89ede2a6ef9482db8d453d2520abf.jpg"/> </a> <a href="#"> <img src="/_tbkp/222.jpg" alt="http://delena.ucoz.ru/_tbkp/222.jpg"/> </a> <a href="#"> <img src="/_tbkp/2225799251.jpg" alt="http://delena.ucoz.ru/_tbkp/5799251.jpg"/> </a> <a href="#"> <img src="/_tbkp/gggggggeds.jpg" alt="http://delena.ucoz.ru/_tbkp/gggggggeds.jpg"/> </a> <a href="#"> <img src="/_tbkp/5799232.jpg" alt="http://delena.ucoz.ru/_tbkp/5799232.jpg"/> </a> <a href="#"> <img src="/_tbkp/111.jpg" alt="http://delena.ucoz.ru/_tbkp/111.jpg"/> </a> <a href="#"> <img src="/_tbkp/5799236.jpg" alt="http://delena.ucoz.ru/_tbkp/5799236.jpg"/> </a> </div> <a href="#" id="http://shadowhunters.ucoz.net/img/thumb_next" class="http://shadowhunters.ucoz.net/img/_thumb_next"></a> <a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a> <a href="#" id="msg_thumb_close" class="msg_thumb_close"></a> <span class="msg_loading"></span> </div>
<!-- </скриптик2> --> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-7243260-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); $(function() { /** * interval : time between the display of images * playtime : the timeout for the setInterval function * current : number to control the current image * current_thumb : the index of the current thumbs wrapper * nmb_thumb_wrappers : total number of thumbs wrappers * nmb_images_wrapper : the number of images inside of each wrapper */ var interval = 4000; var playtime; var current = 0; var current_thumb = 0; var nmb_thumb_wrappers = $('#msg_thumbs .msg_thumb_wrapper').length; var nmb_images_wrapper = 6; /** * start the slideshow */ play(); /** * show the controls when * mouseover the main container */ slideshowMouseEvent(); function slideshowMouseEvent(){ $('#msg_slideshow').unbind('mouseenter') .bind('mouseenter',showControls) .andSelf() .unbind('mouseleave') .bind('mouseleave',hideControls); } /** * clicking the grid icon, * shows the thumbs view, pauses the slideshow, and hides the controls */ $('#msg_grid').bind('click',function(e){ hideControls(); $('#msg_slideshow').unbind('mouseenter').unbind('mouseleave'); pause(); $('#msg_thumbs').stop().animate({'top':'0px'},500); e.preventDefault(); }); /** * closing the thumbs view, * shows the controls */ $('#msg_thumb_close').bind('click',function(e){ showControls(); slideshowMouseEvent(); $('#msg_thumbs').stop().animate({'top':'-230px'},500); e.preventDefault(); }); /** * pause or play icons */ $('#msg_pause_play').bind('click',function(e){ var $this = $(this); if($this.hasClass('msg_play')) play(); else pause(); e.preventDefault(); }); /** * click controls next or prev, * pauses the slideshow, * and displays the next or prevoius image */ $('#msg_next').bind('click',function(e){ pause(); next(); e.preventDefault(); }); $('#msg_prev').bind('click',function(e){ pause(); prev(); e.preventDefault(); }); /** * show and hide controls functions */ function showControls(){ $('#msg_controls').stop().animate({'right':'15px'},500); } function hideControls(){ $('#msg_controls').stop().animate({'right':'-110px'},500); } /** * start the slideshow */ function play(){ next(); $('#msg_pause_play').addClass('msg_pause').removeClass('msg_play'); playtime = setInterval(next,interval) } /** * stops the slideshow */ function pause(){ $('#msg_pause_play').addClass('msg_play').removeClass('msg_pause'); clearTimeout(playtime); } /** * show the next image */ function next(){ ++current; showImage('r'); } /** * shows the previous image */ function prev(){ --current; showImage('l'); } /** * shows an image * dir : right or left */ function showImage(dir){ /** * the thumbs wrapper being shown, is always * the one containing the current image */ alternateThumbs(); /** * the thumb that will be displayed in full mode */ var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')') .find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')') .find('img'); if($thumb.length){ var source = $thumb.attr('alt'); var $currentImage = $('#msg_wrapper').find('img'); if($currentImage.length){ $currentImage.fadeOut(function(){ $(this).remove(); $('<img />').load(function(){ var $image = $(this); resize($image); $image.hide(); $('#msg_wrapper').empty().append($image.fadeIn()); }).attr('src',source); }); } else{ $('<img />').load(function(){ var $image = $(this); resize($image); $image.hide(); $('#msg_wrapper').empty().append($image.fadeIn()); }).attr('src',source); } } else{ //this is actually not necessary since we have a circular slideshow if(dir == 'r') --current; else if(dir == 'l') ++current; alternateThumbs(); return; } } /** * the thumbs wrapper being shown, is always * the one containing the current image */ function alternateThumbs(){ $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')') .hide(); current_thumb = Math.ceil(current/nmb_images_wrapper); /** * if we reach the end, start from the beggining */ if(current_thumb > nmb_thumb_wrappers){ current_thumb = 1; current = 1; } /** * if we are at the beggining, go to the end */ else if(current_thumb == 0){ current_thumb = nmb_thumb_wrappers; current = current_thumb*nmb_images_wrapper; } $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')') .show(); } /** * click next or previous on the thumbs wrapper */ $('#msg_thumb_next').bind('click',function(e){ next_thumb(); e.preventDefault(); }); $('#msg_thumb_prev').bind('click',function(e){ prev_thumb(); e.preventDefault(); }); function next_thumb(){ var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')'); if($next_wrapper.length){ $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')') .fadeOut(function(){ ++current_thumb; $next_wrapper.fadeIn(); }); } } function prev_thumb(){ var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')'); if($prev_wrapper.length){ $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')') .fadeOut(function(){ --current_thumb; $prev_wrapper.fadeIn(); }); } } /** * clicking on a thumb, displays the image (alt attribute of the thumb) */ $('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){ var $this = $(this); $('#msg_thumb_close').trigger('click'); var idx = $this.index(); var p_idx = $this.parent().index(); current = parseInt(p_idx*nmb_images_wrapper + idx + 1); showImage(); e.preventDefault(); }).bind('mouseenter',function(){ var $this = $(this); $this.stop().animate({'opacity':1}); }).bind('mouseleave',function(){ var $this = $(this); $this.stop().animate({'opacity':0.5}); }); /** * resize the image to fit in the container (400 x 400) */ function resize($image){ var theImage = new Image(); theImage.src = $image.attr("src"); var imgwidth = theImage.width; var imgheight = theImage.height; var containerwidth = 700; var containerheight = 250; if(imgwidth > containerwidth){ var newwidth = containerwidth; var ratio = imgwidth / containerwidth; var newheight = imgheight / ratio; if(newheight > containerheight){ var newnewheight = containerheight; var newratio = newheight/containerheight; var newnewwidth =newwidth/newratio; theImage.width = newnewwidth; theImage.height= newnewheight; } else{ theImage.width = newwidth; theImage.height= newheight; } } else if(imgheight > containerheight){ var newheight = containerheight; var ratio = imgheight / containerheight; var newwidth = imgwidth / ratio; if(newwidth > containerwidth){ var newnewwidth = containerwidth; var newratio = newwidth/containerwidth; var newnewheight =newheight/newratio; theImage.height = newnewheight; theImage.width= newnewwidth; } else{ theImage.width = newwidth; theImage.height= newheight; } } $image.css({ 'width' :theImage.width, 'height':theImage.height }); } }); </script> </div>
CCS /*--------------------- General styles start ---------------------*/ .msg_slideshow{align:center; width:700px; height:250px; padding:10px; position:relative; overflow:hidden; background:#101010 url(../img/loading.gif) no-repeat center center; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .msg_slideshow a{ outline:none; } .msg_slideshow a img{ border:none; } .msg_wrapper{ width:700px; height:250px; position:relative; margin:0; padding:0; display:table-cell; text-align:center; vertical-align:middle; } .msg_wrapper img{ display: inline-block!important; vertical-align:middle; -moz-box-shadow:0px 0px 10px #000; -webkit-box-shadow:0px 0px 10px #000; box-shadow:0px 0px 10px #000; } .msg_controls{ position:absolute; bottom:15px; right:-100px; width:82px; height:26px; z-index: 20; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background-color:#000; opacity:0.8; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); } .msg_controls a{ float:left; background-color:#000; width:20px; height:20px; margin:3px 3px; opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); background-repeat:no-repeat; background-position: center center; } .msg_controls a:hover{ opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99); } .msg_controls a.msg_grid{ background-image:url(http://shadowhunters.ucoz.net/img/grid.png); } .msg_controls a.msg_prev{ background-image:url(http://shadowhunters.ucoz.net/img/prev.png); } .msg_controls a.msg_next{ background-image:url(http://shadowhunters.ucoz.net/img/next.png); } .msg_controls a.msg_pause{ background-image:url(http://shadowhunters.ucoz.net/img/pause.png); } .msg_controls a.msg_play{ background-image:url(http://shadowhunters.ucoz.net/img/play.png); } .msg_thumbs{ background:#000; position:absolute; width:255px; height:166px; top:-230px; left:50%; padding:30px; margin:0 0 0 -155px; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; -moz-box-shadow:1px 1px 5px #000; -webkit-box-shadow:1px 1px 5px #000; box-shadow:1px 1px 5px #000; opacity:0.9; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); overflow:hidden; } .msg_thumb_wrapper{ position:absolute; width:255px; height:166px; top:30px; left:30px; z-index:30; } .msg_thumb_wrapper a{ display:block; width:140px; height:50px; float:left; margin:4px; opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); } .msg_thumbs a.msg_thumb_next, .msg_thumbs a.msg_thumb_prev{ width:18px; height:20px; background-repeat:no-repeat; background-position: center center; position:absolute; top:50%; margin-top:-10px; opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); } .msg_thumbs a.msg_thumb_next:hover, .msg_thumbs a.msg_thumb_prev:hover{ opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99); } .msg_thumbs a.msg_thumb_next{ background-image:url(http://shadowhunters.ucoz.net/img/next_thumb.png); right:5px; } .msg_thumbs a.msg_thumb_prev{ background-image:url(http://shadowhunters.ucoz.net/img/prev_thumb.png); left:5px; } .msg_thumbs a.msg_thumb_close{ position:absolute; bottom:0px; width:50px; left:50%; margin:0 0 0 -25px; background:#202020 url(http://shadowhunters.ucoz.net/img/up.png) no-repeat center center; height:16px; opacity:0.7; -moz-border-radius:5px 5px 0 0; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; border-top-left-radius:5px; border-top-right-radius:5px; } .msg_thumbs a.msg_thumb_close:hover{ opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=99); } .msg_loading{ position:absolute; background:transparent url(http://shadowhunters.ucoz.net/img/loading.gif) no-repeat center center; top:50%; left:50%; width:50px; height:50px; margin:-25px 0 0 -25px; z-index:25; display:none; } Далее все как обычно
Создаете глобальный блок SLIDER. В него вставляете
<div id="msg_slideshow" class="msg_slideshow"> <div id="msg_wrapper" class="msg_wrapper"></div> <div id="msg_controls" class="msg_controls"> <a href="#" id="msg_prev" class="msg_prev"></a> <a href="#" id="msg_pause_play" class="msg_pause"></a> <a href="#" id="msg_next" class="msg_next"></a> </div> <div id="msg_thumbs" class="msg_thumbs"> <div class="msg_thumb_wrapper"> <a href="#"><img src="/_tbkp/1.jpg" alt="http://shadowhunters.ucoz.net/_tbkp/1.jpg"/></a> <a href="#"><img src="/_tbkp/7138235.png" alt="http://delena.ucoz.ru/_tbkp/7138235.png"/></a> <a href="#"><img src="/_tbkp/1.jpg" alt="http://shadowhunters.ucoz.net/_tbkp/1.jpg"/></a> <a href="#"><img src="/_tbkp/2.jpg" alt="http://shadowhunters.ucoz.net/_tbkp/2.jpg"/></a> <a href="#"><img src="/_tbkp/33a89ede2a6ef9482db8d453d2520abf.jpg" alt="http://delena.ucoz.ru/_tbkp/33a89ede2a6ef9482db8d453d2520abf.jpg"/></a> <a href="#"><img src="/_tbkp/222.jpg" alt="http://delena.ucoz.ru/_tbkp/222.jpg"/></a> <a href="#"><img src="/_tbkp/2225799251.jpg" alt="http://delena.ucoz.ru/_tbkp/5799251.jpg"/></a> <a href="#"><img src="/_tbkp/gggggggeds.jpg" alt="http://delena.ucoz.ru/_tbkp/gggggggeds.jpg"/></a> <a href="#"><img src="/_tbkp/5799232.jpg" alt="http://delena.ucoz.ru/_tbkp/5799232.jpg"/></a> <a href="#"><img src="/_tbkp/111.jpg" alt="http://delena.ucoz.ru/_tbkp/111.jpg"/></a> <a href="#"><img src="/_tbkp/5799236.jpg" alt="http://delena.ucoz.ru/_tbkp/5799236.jpg"/></a> </div> <a href="#" id="http://shadowhunters.ucoz.net/img/thumb_next" class="http://shadowhunters.ucoz.net/img/_thumb_next"></a> <a href="#" id="msg_thumb_prev" class="msg_thumb_prev"></a> <a href="#" id="msg_thumb_close" class="msg_thumb_close"></a> <span class="msg_loading"></span> </div> </div> </div>
В шаблон страницы сайта сразу после
<div id="maincol">
вставляете $GLOBAL_SLIDER$
Чудо вы луковое и чесноковое)) Читаем внимательно и делаем. Скачиваем архив с файлами. Закидываем их через файловый менеджер в папку slider (если ее нет, то создаем). Далее идем в Панель управления - Дизайн - Управление дизайном (CSS) самой первой строчкой вставляем:
@import '/slider/slider.css'
После, в глобальном блоке вставляем то, что я писал выше. Ничего более там быть не должно!
И затем переходим в шаблон Страницы сайта и вставляем такой код:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>$SITE_NAME$ - $MODULE_NAME$</title> <?$META_DESCRIPTION$?> <?$META_KEYWORDS$?> <link type="text/css" rel="StyleSheet" href="/_st/my.css" /> </head> <body> $ADMIN_BAR$ <div id="all"> <div id="top-stripe"></div> $GLOBAL_AHEADER$ <div style="height: 5px; margin: auto; overflow: hidden;"></div> <div id="content"> <div id=content-top></div> <div id="content-mid"> <div id="maincol"> $GLOBAL_SLIDER$ <!-- <middle> --> <!-- <body> -->$CONTENT$<!-- </body> --> <!-- </middle> --> </div> <div id="rightcol"> <div id="soc"> <?if($RSS_LINK$)?><a href="$RSS_LINK$" target="_blank" title="RSS" class="soc-rss"></a><?endif?> <a href="http://del.icio.us/post?url=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Del.icio.us" class="soc-del"></a> <a href="http://www.facebook.com/share.php?u=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="FaceBook" class="soc-facebook"></a> <a href="http://memori.ru/link/?sm=1&u_data[url]=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Memori" class="soc-memori"></a> <a href="http://vkontakte.ru/share.php?url=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Vkontakte" class="soc-vkontakte"></a> <a href="http://twitter.com/share?url=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Twitter" class="soc-twitter"></a> </div> $GLOBAL_CLEFTER$ </div> <div style="clear: both;"></div> </div> $GLOBAL_BFOOTER$ </div> </div> <script type="text/javascript"> $(function { $.getScript("/slider/slider.js"); }); </script> </body> </html>