|
Сделать фотогалереюОбсуждение темы Сделать фотогалерею в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Ну а просить код показать я думаю бессмысленно.... |
|
Опции темы |
22.01.2010, 19:42 | #11 |
|
Ну а просить код показать я думаю бессмысленно.
|
|
22.01.2010, 22:51 | #12 |
|
Нет, почему же просто ещё страничка в разработке. Вот код странички фотогалереи. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="robots" content="index,follow" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8;charset=utf-8" /> <meta name="description" content="Насосы дозирующие шестерёнчатые 21НШ, 31НШ, 33НШ г. Курск, фотогалерея" /> <meta name="keywords" content="Насосы дозирующие шестерёнчатые 21НШ, 31НШ, 33НШ г. Курск, фотогалерея" /> <meta name="robots" content="all"> <!-- 46b9544ffa2e5e73c3c971fe2ede35a5 --> <link rel='stylesheet' type='text/css' href='../ас>сы @><=ас>с г. у@чат>в.mht_files/style101.css'/> <title>Насосы ООО Промнасос г. Курчатов</title> <link href="../ас>сы @><=ас>с г. у@чат>в.mht_files/styles01.css" rel="stylesheet" type="text/css" /> <!-- 46b9544ffa2e5e73c3c971fe2ede35a5 --> <link rel='stylesheet' type='text/css' href='../ас>сы @><=ас>с г. у@чат>в.mht_files/style101.css'/> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css" media="screen" /> <script type="text/javascript" src="fancybox/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="fancybox/jquery.easing.1.3.js"></script> <script type="text/javascript" src="fancybox/jquery.fancybox-1.2.1.pack.js"></script> <script type="text/javascript"> $(document).ready(function() { $("a.gallery, a.iframe").fancybox(); url = $("a.modalbox").attr('href').replace("for_spider", "content2"); $("a.modalbox").attr("href", url); $("a.modalbox").fancybox( { "frameWidth" : 400, "frameHeight" : 400 }); $("a.gallery2").fancybox( { "padding" : 20, // отступ контента от краев окна "imageScale" : false, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - TRUE "zoomOpacity" : false, // изменение прозрачности контента во время анимации (по умолчанию false) "zoomSpeedIn" : 1000, // скорость анимации в мс при увеличении фото (по умолчанию 0) "zoomSpeedOut" : 1000, // скорость анимации в мс при уменьшении фото (по умолчанию 0) "zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0) "frameWidth" : 700, // ширина окна, px (425px - по умолчанию) "frameHeight" : 600, // высота окна, px(355px - по умолчанию) "overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay "overlayOpacity" : 0.8, // Прозрачность затенения (0.3 по умолчанию) "hideOnContentClick" :false, // Если TRUE закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE "centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу }); $("#menu a, .anim").hover( function() { $(this).animate({"paddingLeft" : "10px"}, 300)}, function() {$(this).animate({"paddingLeft" : "0"}, 300); }); $("a.iframe").fancybox( { "frameWidth" : 800, // ширина окна, px (425px - по умолчанию) "frameHeight" : 600 // высота окна, px(355px - по умолчанию) }); }); </script> <style type="text/css"> <!-- .стиль1 {color: #FFFFFF} .стиль2 {color: red} --> </style> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"> </td> <td width="918" valign="top"><img src="../Фотки, картинки/����.jpg" width="918" height="233" /> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tsm"> <tr> <td height="40" valign="top" background="../Фотки, картинки/������02.jpg" class="search"><table width="886" height="40" border="0" cellpadding="0" cellspacing="0" bordercolor="#174950"> <tr> <td width="23" height="26" valign="top" background="../Фотки, картинки/������02.jpg"> </td> <td width="144" background="../Фотки, картинки/������02.jpg" class="tmenu" onclick="document.location='/about'" onmouseover="this.className='tmenuO'" onmouseout="this.className='tmenu'"><div align="center"> <a href="http://promsnabkursk.oml.ru/about" class="стиль1"> Главная</a></div></td> <td width="1" valign="top"><div align="center"><img src="../ас>сы @><=ас>с г. у@чат>в.mht_files/tmenu_lj.gif" width="1" height="15" alt="" /></div></td> <td width="152" background="../Фотки, картинки/������02.jpg" class="tmenu" onclick="document.location='/novosti'" onmouseover="this.className='tmenuO'" onmouseout="this.className='tmenu'"><div align="center"><a href="http://promsnabkursk.oml.ru/novosti" class="стиль1">Закупки</a></div></td> <td width="1" valign="top"><div align="center"><img src="../ас>сы @><=ас>с г. у@чат>в.mht_files/tmenu_lj.gif" width="1" height="15" alt="" /></div></td> <td width="266" background="../Фотки, картинки/������02.jpg" class="tmenu" onclick="document.location='/mail'" onmouseover="this.className='tmenuO'" onmouseout="this.className='tmenu'"><div align="center"><a href="http://promsnabkursk.oml.ru/mail" class="стиль1">Фотогалерея</a></div></td> <td width="1" valign="top"><div align="center"><img src="../ас>сы @><=ас>с г. у@чат>в.mht_files/tmenu_lj.gif" width="1" height="15" alt="" /></div></td> <td width="128" background="../Фотки, картинки/������02.jpg" class="tmenu" onclick="document.location='/contacts'" onmouseover="this.className='tmenuO'" onmouseout="this.className='tmenu'"><div align="center"><a href="http://promsnabkursk.oml.ru/contacts" class="стиль1">Контакты</a></div></td> </tr> </table></td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#0000FF" id="cont_b"> <tr> <td width="227" valign="top" bordercolor="#000000" id="cont_l"><p> </p> <p> </p> <ul><li><a href="http://promsnabkursk.oml.ru/catalog">Насосы</a></li> <li><a href="http://promsnabkursk.oml.ru/price">Фторопласт</a></li> <li><a href="http://promsnabkursk.oml.ru/partnery">Вариаторы и запчасти </a></li> <li><a href="http://promsnabkursk.oml.ru/gallery">Вентили сильфонные </a></li> <li><a href="http://promsnabkursk.oml.ru/board">Смотровые стёкла </a></li> <li><a href="http://promsnabkursk.oml.ru/internet-magazin">Металлопрокат</a></li> </ul> <div class="newst"></div> </td> <td width="691" valign="top"> <p align="center"> </p> <p align="center"> </p> <h1 align="center"><span class="tema">Фотогалерея</span></h1> <p align="center"> </p> <p align="center"> </p> <div align="center"> <p><a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="group" rel="group" title="title" href="../материал/Насосы фото_редакт/21NSH_2K_b.jpg"></a> <a class="gallery" rel="group" title="это фото 2" href="../материал/Насосы фото_редакт/21NSH_2K_b.jpg"><img src="../материал/Насосы фото_редакт/21NSH_2K_s.jpg" width="155" height="104" border="0" /></a> <a class="gallery2" title="Простая HTML" href="../материал/Насосы фото_редакт/21NSH_20K_b.jpg"></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a></p> <p><a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a></p> <p><a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a></p> <p><a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"></a></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div></td> </tr> </table></td><td valign="top" class="right"> </td> </tr> </table> <!-- u.l. --> </body> </html> Хочу, сделать внизу текстовую ссылку, чтобы при нажатии поялялась фотография, как на графических ссылках вверху страницы. |
|
23.01.2010, 02:05 | #13 |
|
У вас проблема с ссылками на скрипты и стили.
Спешал фо ю скачал fancybox, поправил ссылки Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="robots" content="index,follow" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8;charset=utf-8" /> <meta name="description" content="Насосы дозирующие шестерёнчатые 21НШ, 31НШ, 33НШ г. Курск, фотогалерея" /> <meta name="keywords" content="Насосы дозирующие шестерёнчатые 21НШ, 31НШ, 33НШ г. Курск, фотогалерея" /> <meta name="robots" content="all"> <!-- 46b9544ffa2e5e73c3c971fe2ede35a5 --> <link rel='stylesheet' type='text/css' href='../ас>сы @><=ас>с г. у@чат>в.mht_files/style101.css'/> <title>Насосы ООО Промнасос г. Курчатов</title> <link href="../ас>сы @><=ас>с г. у@чат>в.mht_files/styles01.css" rel="stylesheet" type="text/css" /> <!-- 46b9544ffa2e5e73c3c971fe2ede35a5 --> <link rel='stylesheet' type='text/css' href='../ас>сы @><=ас>с г. у@чат>в.mht_files/style101.css'/> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css" media="screen" /> <script type="text/javascript" src="fancybox/jquery.fancybox-1.2.6.pack.js"></script> <script type="text/javascript"> $(document).ready(function() { $("a.gallery, a.iframe").fancybox(); url = $("a.modalbox").attr('href').replace("for_spider", "content2"); $("a.modalbox").attr("href", url); $("a.modalbox").fancybox( { "frameWidth" : 400, "frameHeight" : 400 }); $("a.gallery2").fancybox( { "padding" : 20, // отступ контента от краев окна "imageScale" : false, // Принимает значение true - контент(изображения) масштабируется по размеру окна, или false - окно вытягивается по размеру контента. По умолчанию - TRUE "zoomOpacity" : false, // изменение прозрачности контента во время анимации (по умолчанию false) "zoomSpeedIn" : 1000, // скорость анимации в мс при увеличении фото (по умолчанию 0) "zoomSpeedOut" : 1000, // скорость анимации в мс при уменьшении фото (по умолчанию 0) "zoomSpeedChange" : 1000, // скорость анимации в мс при смене фото (по умолчанию 0) "frameWidth" : 700, // ширина окна, px (425px - по умолчанию) "frameHeight" : 600, // высота окна, px(355px - по умолчанию) "overlayShow" : true, // если true затеняят страницу под всплывающим окном. (по умолчанию true). Цвет задается в jquery.fancybox.css - div#fancy_overlay "overlayOpacity" : 0.8, // Прозрачность затенения (0.3 по умолчанию) "hideOnContentClick" :false, // Если TRUE закрывает окно по клику по любой его точке (кроме элементов навигации). Поумолчанию TRUE "centerOnScroll" : false // Если TRUE окно центрируется на экране, когда пользователь прокручивает страницу }); $("#menu a, .anim").hover( function() { $(this).animate({"paddingLeft" : "10px"}, 300)}, function() {$(this).animate({"paddingLeft" : "0"}, 300); }); $("a.iframe").fancybox( { "frameWidth" : 800, // ширина окна, px (425px - по умолчанию) "frameHeight" : 600 // высота окна, px(355px - по умолчанию) }); }); </script> <style type="text/css"> <!-- .стиль1 {color: #FFFFFF} .стиль2 {color: red} --> </style> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"> </td> <td width="918" valign="top"><img src="../Фотки, картинки/����.jpg" width="918" height="233" /> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tsm"> <tr> <td height="40" valign="top" background="../Фотки, картинки/������02.jpg" class="search"><table width="886" height="40" border="0" cellpadding="0" cellspacing="0" bordercolor="#174950"> <tr> <td width="23" height="26" valign="top" background="../Фотки, картинки/������02.jpg"> </td> <td width="144" background="../Фотки, картинки/������02.jpg" class="tmenu" onclick="document.location='/about'" onmouseover="this.className='tmenuO'" onmouseout="this.className='tmenu'"><div align="center"> <a href="http://promsnabkursk.oml.ru/about" class="стиль1"> Главная</a></div></td> <td width="1" valign="top"><div align="center"><img src="../ас>сы @><=ас>с г. у@чат>в.mht_files/tmenu_lj.gif" width="1" height="15" alt="" /></div></td> <td width="152" background="../Фотки, картинки/������02.jpg" class="tmenu" onclick="document.location='/novosti'" onmouseover="this.className='tmenuO'" onmouseout="this.className='tmenu'"><div align="center"><a href="http://promsnabkursk.oml.ru/novosti" class="стиль1">Закупки</a></div></td> <td width="1" valign="top"><div align="center"><img src="../ас>сы @><=ас>с г. у@чат>в.mht_files/tmenu_lj.gif" width="1" height="15" alt="" /></div></td> <td width="266" background="../Фотки, картинки/������02.jpg" class="tmenu" onclick="document.location='/mail'" onmouseover="this.className='tmenuO'" onmouseout="this.className='tmenu'"><div align="center"><a href="http://promsnabkursk.oml.ru/mail" class="стиль1">Фотогалерея</a></div></td> <td width="1" valign="top"><div align="center"><img src="../ас>сы @><=ас>с г. у@чат>в.mht_files/tmenu_lj.gif" width="1" height="15" alt="" /></div></td> <td width="128" background="../Фотки, картинки/������02.jpg" class="tmenu" onclick="document.location='/contacts'" onmouseover="this.className='tmenuO'" onmouseout="this.className='tmenu'"><div align="center"><a href="http://promsnabkursk.oml.ru/contacts" class="стиль1">Контакты</a></div></td> </tr> </table></td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#0000FF" id="cont_b"> <tr> <td width="227" valign="top" bordercolor="#000000" id="cont_l"><p> </p> <p> </p> <ul><li><a href="http://promsnabkursk.oml.ru/catalog">Насосы</a></li> <li><a href="http://promsnabkursk.oml.ru/price">Фторопласт</a></li> <li><a href="http://promsnabkursk.oml.ru/partnery">Вариаторы и запчасти </a></li> <li><a href="http://promsnabkursk.oml.ru/gallery">Вентили сильфонные </a></li> <li><a href="http://promsnabkursk.oml.ru/board">Смотровые стёкла </a></li> <li><a href="http://promsnabkursk.oml.ru/internet-magazin">Металлопрокат</a></li> </ul> <div class="newst"></div> </td> <td width="691" valign="top"> <p align="center"> </p> <p align="center"> </p> <h1 align="center"><span class="tema">Фотогалерея</span></h1> <p align="center"> </p> <p align="center"> </p> <div align="center"> <p><a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="group" rel="group" title="title" href="../материал/Насосы фото_редакт/21NSH_2K_b.jpg"></a> <a class="gallery" rel="group" title="это фото 2" href="../материал/Насосы фото_редакт/21NSH_2K_b.jpg"><img src="../материал/Насосы фото_редакт/21NSH_2K_s.jpg" width="155" height="104" border="0" /></a> <a class="gallery2" title="Простая HTML" href="../материал/Насосы фото_редакт/21NSH_20K_b.jpg"></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a></p> <p><a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a></p> <p><a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a></p> <p><a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"><img src="../материал/Насосы фото_редакт/P1010026_1s.jpg" width="155" height="104" border="0" /></a> <a class="gallery" rel="group" title="это фото 1" href="../материал/Насосы фото_редакт/P1010026_1b.jpg"></a></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div></td> </tr> </table></td><td valign="top" class="right"> </td> </tr> </table> <a class="gallery" rel="group" title="это фото 1" href="1_b.jpg">ССЫЛКА</a></body> </html> |
|
27.01.2010, 10:24 | #14 |
|
А FancyBox он же не кроссбраузерный, ie8 и opera не особо работают с ним.
|
|
29.01.2010, 22:43 | #15 |
|
Хорошего всем настроения! Обращаюсь за поддержкой может кто знает! Создаю сайт практически все сделано возникла заморочка! Была создана библиотека в последствии копирована вставлена на страницы! При размещении в ней фотографии все обновляется! При тестировании сайта в интернет эксплорере 8 фото находит только на индексной странице если же зайти на растирожированные странице ПРИЕХАЛИ вверху кр крест но ссылка работает на указанную страницу! В опере и мазиле все летает без проблем! Был бы благодарен в содействии решения данный проблемы! Заранее спасибо
|
|
29.01.2010, 22:48 | #16 | |
|
Цитата:
Просто знаю что IE может прочитать картинку если проставлен неправильно слеш, т.е images\img.jpg, а вот другие браузеры не прочитают. Также по относительности путей. Может Вы указываете images/img.jpg, а надо от корня, т.е. /images/img.jpg А вообще url в студию |
|
|
29.01.2010, 22:49 | #17 |
|
пропишите абсолютные пути к вашим фоткам, и не надо постить одно и тоже во всех темах
|
|
30.01.2010, 18:06 | #18 |
|
|
|
30.01.2010, 18:09 | #19 |
|
В новом окне, значит ссылка на скрипт не точно прописана, у меня также было, нужно внимательно посмотреть.
|
|
30.01.2010, 18:45 | #20 |
|
|
|
Реклама на форуме
Условия размещения рекламы
Биржа ссылок
Заработай на сайте!
|