Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: jQuery Cycle Plugin
 
 автор: fxsektor   (24.07.2008 в 10:50)   письмо автору
 
 

http://www.malsup.com/jquery/cycle/begin.html

Вот на этой странице указано как использовать jQuery Cycle Plugin.
Я не понимаю, где нужно вставить

$('#s1').cycle('fade');


Кто нибудь знает?

   
 
 автор: mihdan   (24.07.2008 в 11:17)   письмо автору
 
   для: fxsektor   (24.07.2008 в 10:50)
 

<!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">
 <head>
  <title> cycle </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" type="text/css" media="screen" href="../jq.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="cycle.css" />
  <script type="text/javascript" src="../jquery-1.2.1.js"></script>
  <script type="text/javascript" src="../chili-1.7.pack.js"></script>
  <script type="text/javascript" src="jquery.cycle.all.js?v2.11"></script>

  <style>
  .pics {  
    height:  232px;  
    width:   232px;  
    padding: 0;  
    margin:  0;  
    } 
    
    .pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #eee;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
    } 
 </style>
 </head>

 <body>
  <div class="pics"> 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div> 
<script type="text/javascript">$('#s1').cycle('fade');</script>
</body>
</html>

   
 
 автор: fxsektor   (27.07.2008 в 13:48)   письмо автору
 
   для: mihdan   (24.07.2008 в 11:17)
 

Спасибо, за проявленный интерес. Какую я ошибку сдесь зделал? Подскажите, уважаемые гуру.
<html>
    <head>
        <title>slideshow</title>
    </head>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery.js"></script>
    <style type='text/css'>


.pics {  
    height:  550px;  
    width:   550px;  
    padding: 0;  
    margin:  0;  

 
.pics img {  
    padding: 0px;  
    width:  550px; 
    height: 550px; 
    top:  0; 
    left: 0;


    </style>



    <body>

<div class="pics">
    <img src="sdv/abassi.jpg" width="550" height="550" />
    <img src="sdv/citylife.jpg" width="550" height="550" />
    <img src="sdv/cvetokserdca.jpg" width="550" height="550" />
    <img src="sdv/fitoline.jpg" width="550" height="550" />
    <img src="sdv/flamingo.jpg" width="550" height="550" />
    <img src="sdv/fluer.jpg" width="550" height="550" />
    <img src="sdv/garmonia.jpg" width="550" height="550" />
    <img src="sdv/inyan.jpg" width="550" height="550" />
    <img src="sdv/likjaponii.jpg" width="550" height="550" />
    <img src="sdv/matilda.jpg" width="550" height="550" />
    <img src="sdv/orange.jpg" width="550" height="550" />
    <img src="sdv/venecia.jpg" width="550" height="550" />
</div>

<script type="text/javascript">
$('.pics').cycle('fade');
</script>

    </body>
</html>

   
 
 автор: fxsektor   (28.07.2008 в 21:44)   письмо автору
 
   для: fxsektor   (27.07.2008 в 13:48)
 

помогите, кто может

   
 
 автор: AlexSol   (28.07.2008 в 22:25)   письмо автору
 
   для: fxsektor   (28.07.2008 в 21:44)
 


<script type="text/javascript" src="./jquery.js"></script> 
<script type="text/javascript" src="./jquery.js"></script> 
<script type="text/javascript" src="./jquery.js"></script> 


вам нужно подключить два скрипта:

1. jquery.js - саму библиотеку
2. circle.jquery.js - плагин

   
 
 автор: fxsektor   (29.07.2008 в 08:24)   письмо автору
57.8 Кб
 
   для: AlexSol   (28.07.2008 в 22:25)
 

Спасибо за отклик.
Скачал библиотеку jquery.js и плагин по новой. Подключил вот так. - не работает. :(
<html>
    <head>
        <title>slideshow</title>
        <script type="text/javascript" src="./jquery-1.1.3.1.js"></script>
        <script type="text/javascript" src="./jquery.cycle.all.js"></script>
    </head>
    
<style type='text/css'>
#s2 {  
    height:  600px;  
    width:   600px;  
    padding: 0;  
    margin:  0;  

 
#s2 img {  
    padding: 0px;  
    width:  550px; 
    height: 550px; 
    top:  0; 
    left: 0;

</style>

<body>

<div id='#s2'>
    <img src="sdv/abassi.jpg" width="550" height="550" />
    <img src="sdv/citylife.jpg" width="550" height="550" />
    <img src="sdv/cvetokserdca.jpg" width="550" height="550" />
    <img src="sdv/fitoline.jpg" width="550" height="550" />
    <img src="sdv/flamingo.jpg" width="550" height="550" />
    <img src="sdv/fluer.jpg" width="550" height="550" />
    <img src="sdv/garmonia.jpg" width="550" height="550" />
    <img src="sdv/inyan.jpg" width="550" height="550" />
    <img src="sdv/likjaponii.jpg" width="550" height="550" />
    <img src="sdv/matilda.jpg" width="550" height="550" />
    <img src="sdv/orange.jpg" width="550" height="550" />
    <img src="sdv/venecia.jpg" width="550" height="550" />
</div>

<script type="text/javascript">
$('#s2').cycle('fade');
</script>

</body>
</html>

Во вложении все кроме картинок

   
 
 автор: Axxil   (29.07.2008 в 09:18)   письмо автору
 
   для: fxsektor   (29.07.2008 в 08:24)
 

Вот так попробуйте
<head>
<title>slideshow</title>
<script type="text/javascript" src="./jquery-1.1.3.1.js"></script>
<script type="text/javascript" src="./jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {  
  $('#s2').cycle('fade');
})
</script>
</head>


PS Используйте для отладки js скриптов Firefox + FireBug и сразу увидите в чём проблема.

   
 
 автор: fxsektor   (29.07.2008 в 13:44)   письмо автору
 
   для: Axxil   (29.07.2008 в 09:18)
 

Спасибо mihdan, AlexSol, Axxil. Работает. Дело было оказывается в именах классов и id.
Выкладваю тем, кто тоже будет возится с jQuery Cycle Plugin
<html>
    <head>
        <title>slideshow</title>
        <script type="text/javascript" src="./jquery-1.1.3.1.js"></script>
        <script type="text/javascript" src="./jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {  
  $('#s2').cycle('fade');
})
</script>
    </head>
    
<style type='text/css'>
.pics {  
    height:  550px;  
    width:   550px;  
    padding: 0;  
    margin:  0;  

 
.pics img {  
    padding: 0px;  
    width:  550px; 
    height: 550px; 
    top:  0; 
    left: 0;

</style>

<body>

<div class="pics" id='s2'>
    <img src="sdv/abassi.jpg" width="550" height="550" />
    <img src="sdv/citylife.jpg" width="550" height="550" />
    <img src="sdv/cvetokserdca.jpg" width="550" height="550" />
    <img src="sdv/fitoline.jpg" width="550" height="550" />
    <img src="sdv/flamingo.jpg" width="550" height="550" />
    <img src="sdv/fluer.jpg" width="550" height="550" />
    <img src="sdv/garmonia.jpg" width="550" height="550" />
    <img src="sdv/inyan.jpg" width="550" height="550" />
    <img src="sdv/likjaponii.jpg" width="550" height="550" />
    <img src="sdv/matilda.jpg" width="550" height="550" />
    <img src="sdv/orange.jpg" width="550" height="550" />
    <img src="sdv/venecia.jpg" width="550" height="550" />
</div>

</body>
</html>

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования