Nikiror 12 Опубликовано 17 сентября, 2011 Share Опубликовано 17 сентября, 2011 Не работают на одной страницы 2 скрипта, однако если они работают на разных страницах, то все отлично. Что делать? Цитата Ссылка на сообщение Поделиться на другие сайты
vit9696 415 Опубликовано 17 сентября, 2011 Share Опубликовано 17 сентября, 2011 Вы бы хотя бы какие-то подробности дали, а то вопрос мягко сказать в небо.... 1) Какие скрипты 2) Где 3) На каком языке Цитата Ссылка на сообщение Поделиться на другие сайты
Nikiror 12 Опубликовано 17 сентября, 2011 Автор Share Опубликовано 17 сентября, 2011 Вы бы хотя бы какие-то подробности дали, а то вопрос мягко сказать в небо....1) Какие скрипты 2) Где 3) На каком языке Не работают 2 скрипта на одной странице: один просмотрщик фотографий, второй на автоматическую смену баннеров. Раскрывающийся текст: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="SHORTCUT ICON" href="images/favicon.ico" type="image/x-icon"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Школа № 25 </title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-1.2.6.js"></script> <script type="text/javascript" src="js/jquery.fancybox.js"></script> <script type="text/javascript" src="js/jquery.pngFix.js"></script> <script type="text/javascript" src="js/jquery.metadata.js"></script> <link rel="stylesheet" type="text/css" href="fancy.css" /> <script type="text/javascript"> $(document).ready(function(){ $("#gallery a").fancybox({ hideOnContentClick: true, overlayShow: true, overlayOpacity: 0.5, zoomSpeedIn: 1500, zoomSpeedOut:600 }); </script> <script type="text/javascript"> $(document).ready(function() { //Set Default State of each portfolio piece $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 7000); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); }); </script> </head> <body onload="initialize1();initialize2()" onunload="GUnload()"> <div class="container"> <div class="header1" > </div> <script type="text/javascript">jquery.noConflict();</script> <!-- end .header1 --> <!-- #banner --> <div id="banner" > <div class="container2"> <div class="folio_block"> <div class="main_view"> <div class="window"> <div class="image_reel"><a href="#"><img src="images/banner1.png" alt="" /></a><a href="#"><img src="images/banner2.png" alt="" /></a> <a href="#"><img src="images/banner3.png" alt="" /></a> <a href="#"><img src="images/banner4.png" alt="" /></a> </div> </div> <div class="paging"> <a rel="1" href="#">1</a> <a rel="2" href="#">2</a> <a rel="3" href="#">3</a> <a rel="4" href="#">4</a> </div> </div> </div> </div> </div> <!--end .banner--> <div class="content" align="center"> <!-- end #banner --> <div id="collazh" id="collazh" align="center"> <table width="804" display="inline"> <tr> <td width="192" height="140"> <a href="images/full/x_8afac274.jpg" rel="fancy-tour" title="Россия - Греция 1 : 0"><img src="images/x_8afac274.jpg" width="191" height="136" alt="Фото номер 1" /></a></td> <td height="140"><a href="images/full/x_d0a40845.jpg" ><img src="images/x_d0a40845.jpg" alt="фото" width="191" height="136" align="middle"></a></td> <td width="200"><a href="images/full/x_85c7be63.jpg" ><img src="images/x_85c7be63.jpg" alt="фото" width="195" height="136" align="middle"></a></td> <td width="199"><a href="images/full/x_f773c286.jpg"><img src="images/x_f773c286.jpg" alt="фото" width="195" height="136" align="middle" ></a></td> </tr> <tr> <td colspan="4"> <hr width="800px" color="#006666"> <hr width="800px" color="#006666"> <!-- #collazh --></td> </tr> <tr> <td width="193"> <a href="images/full/x_bfa1a24b.jpg" ><img src="images/x_bfa1a24b.jpg" alt="фото" width="191" height="136" align="middle"></a></td> <td><a href="images/full/x_787ef0c1.jpg" ><img src="images/x_787ef0c1.jpg" alt="фото" width="201" height="136" align="middle"></a></td> <td><a href="images/full/x_2a711d35.jpg" ><img src="images/x_2a711d35.jpg" alt="фото" width="189" height="137" align="middle"></a></td> <td><a href="images/full/x_bbd55691.jpg" ><img src="images/x_bbd55691.jpg" alt="фото" width="199" height="140" align="middle"></a></td> </tr> </table> <!-- end #collazh --> </div> <!-- end .content --></div> <div class="footer" visibility="visible"> <div class="footer2"> </div> <!-- end .footer --></div> <!-- end .container --></div> </body> </html> Цитата Ссылка на сообщение Поделиться на другие сайты
Urotsuki 122 Опубликовано 18 сентября, 2011 Share Опубликовано 18 сентября, 2011 style.cssjquery.fancybox.js jquery.pngFix.js jquery.metadata.js fancy.css Можно с полными путями к файлам (можно не с того, а с других сайтов), и посмотреть рабочие версии страниц со скриптами по отдельности? Цитата Ссылка на сообщение Поделиться на другие сайты
Nikiror 12 Опубликовано 18 сентября, 2011 Автор Share Опубликовано 18 сентября, 2011 Можно с полными путями к файлам (можно не с того, а с других сайтов), и посмотреть рабочие версии страниц со скриптами по отдельности? Такс вот галерея: http://www.linkexchanger.su/2008/66.html И как она работает: http://www.linkexchanger.su/example_jquery/fancybox.html. (Откройте просмотр кода страница и вы в начале увидите ссылки на файлы скрипта и тд.) Если не найдете, я кину ссылки. Просмотрщик баннера: http://maksis.ru/jquery-karusel.html Цитата Ссылка на сообщение Поделиться на другие сайты
Urotsuki 122 Опубликовано 19 сентября, 2011 Share Опубликовано 19 сентября, 2011 Спасибо модераторам за то что удалили мое сообщение! Благодаря этому я более глубоко вникнул в проблему, что позволило без проблем найти ее решение. Nikiror, вот что я изменил: 1) Убрал JQuery 1.3 и оставил только 1.2.6; 2) Немного переделал структуру блоков; 3) Для Fancybox сделал список, вместо таблицы. код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="SHORTCUT ICON" href="images/favicon.ico" type="image/x-icon"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Школа № 25 </title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script> <script type="text/javascript" src="1_files/jquery00.js"></script> <script type="text/javascript" src="1_files/jquery01.js"></script> <script type="text/javascript" src="1_files/jquery02.js"></script> <link rel="stylesheet" type="text/css" href="1_files/fancy000.css" /> <style type="text/css"> /* Расположение миниатюр на странице */ ul { list-style:none; } ul li { display:inline; } a img { border:none; } p { margin-left:40px; font-family: "Trebuchet MS", Tahoma, Verdana sans-serif; font-size: 8pt; width:440px; } </style> <style type="text/css"> *{outline: none;} img {border: 0;} .container { width: 790px; padding: 0; margin: 0 auto; } .folio_block { position: absolute; left: 50%; top: 50%; margin: -140px 0 0 -395px; } /*--Main Container--*/ .main_view { float: left; position: relative; } /*--Window/Masking Styles--*/ .window { height:286px; width: 790px; overflow: hidden; /*--Hides anything outside of the set width/height--*/ position: relative; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img {float: left;} /*--Paging Styles--*/ .paging { position: absolute; bottom: 40px; right: -7px; width: 178px; height:47px; z-index: 100; /*--Assures the paging stays on the top layer--*/ text-align: center; line-height: 40px; background: url(2_files/paging_b.png) no-repeat; display: none; /*--Hidden by default, will be later shown with jQuery--*/ } .paging a { padding: 5px; text-decoration: none; color: #fff; } .paging a.active { font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } .paging a:hover {font-weight: bold;} </style> <script type="text/javascript"> $(document).ready(function(){ $("#gallery a").fancybox({ hideOnContentClick: true, overlayShow: true, overlayOpacity: 0.5, zoomSpeedIn: 1500, zoomSpeedOut:600 }); }); </script> <script type="text/javascript"> $(document).ready(function() { //Set Default State of each portfolio piece $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 7000); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); }); </script> </head> <body> <div class="container"> <div class="folio_block"> <div class="main_view"> <div class="window"> <div class="image_reel"> <a href="#"><img src="images/banner1.png" alt="" /></a> <a href="#"><img src="images/banner2.png" alt="" /></a> <a href="#"><img src="images/banner3.png" alt="" /></a> <a href="#"><img src="images/banner4.png" alt="" /></a></div> </div> <div class="paging"> <a rel="1" href="#">1</a> <a rel="2" href="#">2</a> <a rel="3" href="#">3</a> <a rel="4" href="#">4</a> </div> </div> </div> </div> </div> <!--end .banner--> <div class="content" align="center"> <!-- end #banner --> <div id="collazh" align="center"> <ul id="gallery"> <li><a rel="fancy-tour" href="images/full/x_8afac274.jpg" title="Россия - Греция 1 : 0"><img src="images/x_8afac274.jpg" alt="" /></a></li> <li><a rel="fancy-tour" href="images/full/x_d0a40845.jpg" title="Великий Гус..."><img src="images/x_d0a40845.jpg" alt="" /></a></li> <li><a rel="fancy-tour" href="images/full/x_85c7be63.jpg" title="Это был наш день..."><img src="images/x_85c7be63.jpg" alt="" /></a></li> <li><a rel="fancy-tour" href="images/full/x_f773c286.jpg" title="Россия - Голландия 3 : 1"><img src="images/x_f773c286.jpg" alt="" /></a></li> </ul> <ul> <li><a rel="fancy-tour" href="images/full/x_8afac274.jpg" title="Россия - Греция 1 : 0"><img src="images/x_8afac274.jpg" alt="" /></a></li> <li><a rel="fancy-tour" href="images/full/x_d0a40845.jpg" title="Великий Гус..."><img src="images/x_d0a40845.jpg" alt="" /></a></li> <li><a rel="fancy-tour" href="images/full/x_85c7be63.jpg" title="Это был наш день..."><img src="images/x_85c7be63.jpg" alt="" /></a></li> <li><a rel="fancy-tour" href="images/full/x_f773c286.jpg" title="Россия - Голландия 3 : 1"><img src="images/x_f773c286.jpg" alt="" /></a></li> </ul> <p>Два параграфа</p> <p>если их убрать, то Fancybox будет работать неверно</p> <!-- end #collazh --> </div> <!-- end .content --></div> <div class="footer" visibility="visible"> <div class="footer2"> </div> <!-- end .footer --> <!-- end .container --></div> </body> </html> Параграфы после кода Fancybox были в примерах по твоим ссылкам. Если их убрать, то изображения при нажатии выезжая будут уменьшаться (по крайней мере у меня так было). Но если на странице будет какой-то текст, то это не проблема. Если нужно будет из убрать, то посмотрю можно ли это сделать. Цитата Ссылка на сообщение Поделиться на другие сайты
Nikiror 12 Опубликовано 19 сентября, 2011 Автор Share Опубликовано 19 сентября, 2011 (изменено) Спасибо модераторам за то что удалили мое сообщение! Благодаря этому я более глубоко вникнул в проблему, что позволило без проблем найти ее решение.Nikiror, вот что я изменил: 1) Убрал JQuery 1.3 и оставил только 1.2.6; 2) Немного переделал структуру блоков; 3) Для Fancybox сделал список, вместо таблицы. код: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="SHORTCUT ICON" href="images/favicon.ico" type="image/x-icon"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Школа № 25 </title> <link href="style.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script> <script type="text/javascript" src="1_files/jquery00.js"></script> <script type="text/javascript" src="1_files/jquery01.js"></script> <script type="text/javascript" src="1_files/jquery02.js"></script> <link rel="stylesheet" type="text/css" href="1_files/fancy000.css" /> <style type="text/css"> /* Расположение миниатюр на странице */ ul { list-style:none; } ul li { display:inline; } a img { border:none; } p { margin-left:40px; font-family: "Trebuchet MS", Tahoma, Verdana sans-serif; font-size: 8pt; width:440px; } </style> <style type="text/css"> *{outline: none;} img {border: 0;} .container { width: 790px; padding: 0; margin: 0 auto; } .folio_block { position: absolute; left: 50%; top: 50%; margin: -140px 0 0 -395px; } /*--Main Container--*/ .main_view { float: left; position: relative; } /*--Window/Masking Styles--*/ .window { height:286px; width: 790px; overflow: hidden; /*--Hides anything outside of the set width/height--*/ position: relative; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img {float: left;} /*--Paging Styles--*/ .paging { position: absolute; bottom: 40px; right: -7px; width: 178px; height:47px; z-index: 100; /*--Assures the paging stays on the top layer--*/ text-align: center; line-height: 40px; background: url(2_files/paging_b.png) no-repeat; display: none; /*--Hidden by default, will be later shown with jQuery--*/ } .paging a { padding: 5px; text-decoration: none; color: #fff; } .paging a.active { font-weight: bold; background: #920000; border: 1px solid #610000; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; } .paging a:hover {font-weight: bold;} </style> <script type="text/javascript"> $(document).ready(function(){ $("#gallery a").fancybox({ hideOnContentClick: true, overlayShow: true, overlayOpacity: 0.5, zoomSpeedIn: 1500, zoomSpeedOut:600 }); }); </script> <script type="text/javascript"> $(document).ready(function() { //Set Default State of each portfolio piece $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 7000); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel a").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); }); </script> </head> <body> <div class="container"> <div class="folio_block"> <div class="main_view"> <div class="window"> <div class="image_reel"> <a href="#"><img src="images/banner1.png" alt="" /></a> <a href="#"><img src="images/banner2.png" alt="" /></a> <a href="#"><img src="images/banner3.png" alt="" /></a> <a href="#"><img src="images/banner4.png" alt="" /></a></div> </div> <div class="paging"> <a rel="1" href="#">1</a> <a rel="2" href="#">2</a> <a rel="3" href="#">3</a> <a rel="4" href="#">4</a> </div> </div> </div> </div> </div> <!--end .banner--> <div class="content" align="center"> <!-- end #banner --> <div id="collazh" align="center"> <ul id="gallery"> <li><a rel="fancy-tour" href="images/full/x_8afac274.jpg" title="Россия - Греция 1 : 0"><img src="images/x_8afac274.jpg" alt="" /></a></li> <li><a rel="fancy-tour" href="images/full/x_d0a40845.jpg" title="Великий Гус..."><img src="images/x_d0a40845.jpg" alt="" /></a></li> <li><a rel="fancy-tour" href="images/full/x_85c7be63.jpg" title="Это был наш день..."><img src="images/x_85c7be63.jpg" alt="" /></a></li> <li><a rel="fancy-tour" href="images/full/x_f773c286.jpg" title="Россия - Голландия 3 : 1"><img src="images/x_f773c286.jpg" alt="" /></a></li> </ul> <ul> <li><a rel="fancy-tour" href="images/full/x_8afac274.jpg" title="Россия - Греция 1 : 0"><img src="images/x_8afac274.jpg" alt="" /></a></li> <li><a rel="fancy-tour" href="images/full/x_d0a40845.jpg" title="Великий Гус..."><img src="images/x_d0a40845.jpg" alt="" /></a></li> <li><a rel="fancy-tour" href="images/full/x_85c7be63.jpg" title="Это был наш день..."><img src="images/x_85c7be63.jpg" alt="" /></a></li> <li><a rel="fancy-tour" href="images/full/x_f773c286.jpg" title="Россия - Голландия 3 : 1"><img src="images/x_f773c286.jpg" alt="" /></a></li> </ul> <p>Два параграфа</p> <p>если их убрать, то Fancybox будет работать неверно</p> <!-- end #collazh --> </div> <!-- end .content --></div> <div class="footer" visibility="visible"> <div class="footer2"> </div> <!-- end .footer --> <!-- end .container --></div> </body> </html> Параграфы после кода Fancybox были в примерах по твоим ссылкам. Если их убрать, то изображения при нажатии выезжая будут уменьшаться (по крайней мере у меня так было). Но если на странице будет какой-то текст, то это не проблема. Если нужно будет из убрать, то посмотрю можно ли это сделать. Большое спасибо, сейчас проверю. После отпишусь. Проверю завтра, сегодня не могу( Изменено 19 сентября, 2011 пользователем Nikiror Цитата Ссылка на сообщение Поделиться на другие сайты
Nikiror 12 Опубликовано 20 сентября, 2011 Автор Share Опубликовано 20 сентября, 2011 Ураааа, проблема решена. Оказывается нужно было указать для каждого свой initialize <body onload="initialize1();initialize2()" onunload="GUnload()"> Urotsuki, большое спасибо за помощь) Цитата Ссылка на сообщение Поделиться на другие сайты
Urotsuki 122 Опубликовано 20 сентября, 2011 Share Опубликовано 20 сентября, 2011 Ураааа, проблема решена. Оказывается нужно было указать для каждого свой initialize<body onload="initialize1();initialize2()" onunload="GUnload()"> Какую проблему это решило? С двумя абзацами, про которую я написал? Или с моим кодом у тебя так и не заработало? Эти initialize были в твоем примере под спойлером, но я составлял код из тех двух примеров скриптов, поэтому и потерялось это... Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.