Проблема в облаке каруселью

Все,Проблема в облаке каруселью

Im очень новой для JQuery, и я хотел, чтобы включить плагин «Cloud Carousel» в другой JQuery плагин (JQuery всплывающее окно с серым цветом фона). Тем не менее, я изо всех сил пытаюсь заставить его работать.

, в то время как обычно «облачная карусель» отображается, как вы видели на своем веб-сайте, в моей реализации все изображения сидят друг над другом, как будто они сидят в стеке и один за другим появляются на Вверх. Любое руководство для новичков, пожалуйста?

Best, здесь код Ниже

<html> 
    <head> 
    <title></title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <link href="facebox.css" media="screen" rel="stylesheet" type="text/css" /> 
    <link href="css/example.css" media="screen" rel="stylesheet" type="text/css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
    <script src="facebox.js" type="text/javascript"></script> 
    <script type="text/javascript" src="js/cloud-carousel.1.0.4.js"></script> 
    <script type="text/javascript" src="js/cloud-carousel.1.0.4.min.js"></script> 
    <script type="text/javascript" src="js/jquery.mousewheel.js"></script> 
    <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script> 


    <script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     $('a[rel*=facebox]').facebox({ 
     loadingImage : 'images/loading.gif', 
     closeImage : 'images/close.png' 
     }) 
     $("#carousel1").CloudCarousel(
     { 
         xPos: 170, 
      yPos: 40, 
      buttonLeft: $("#left"), 
      buttonRight: $("#right"), 
      altBox: $("#alt-text"), 
      titleBox: $("#title-text") 
     } 
    ); 

    }) 
    </script> 

    </head> 
    <body> 
     <div class="example"> 
      <p> <a href="#info" rel="facebox">Templates</a> </p> 
     </div> 

<div id="info" style="display:none;"> 
    <div id = "carousel1" style="width:400px; height:200px;position: relative;overflow:scroll;"> 
      <img class = "cloudcarousel" src="button_images/1.png" alt="Flag 1 Description" title="Flag 1 Title" width="100px" height="100px" /> 
      <img class = "cloudcarousel" src="button_images/10.png" alt="Flag 2 Description" title="Flag 2 Title" width="100px" height="100px"/> 
      <img class = "cloudcarousel" src="button_images/11.png" alt="Flag 3 Description" title="Flag 3 Title" width="100px" height="100px"/> 
      <img class = "cloudcarousel" src="button_images/14.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/> 
      <img class = "cloudcarousel" src="button_images/18.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/> 
      <img class = "cloudcarousel" src="button_images/19.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/> 
      <img class = "cloudcarousel" src="button_images/2.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/> 
      <img class = "cloudcarousel" src="button_images/20.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/> 
      <img class = "cloudcarousel" src="button_images/21.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/> 
      <img class = "cloudcarousel" src="button_images/4.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/> 
      <img class = "cloudcarousel" src="button_images/5.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/> 
      <img class = "cloudcarousel" src="button_images/6.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/> 
      <img class = "cloudcarousel" src="button_images/7.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/> 
      <img class = "cloudcarousel" src="button_images/8.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/> 
      <button id="left"> Left</button> 
      <button id="right" onclick="alert('right')">Right</button> 
     </div> 
    </div> 
    </body> 
</html>

источник

2011-01-29 Zain

Это выглядит все сложенное до вызова функции cloudCarousel с соответствующим селектором. Вам нужно вызвать функцию, когда документ готов. Вот пример

jQuery(function(){ 
    jQuery("#carousel1").CloudCarousel({ 
     xPos: 300, 
     yPos: 60, 
     buttonLeft: jQuery("#left-but"), 
     buttonRight: jQuery("#right-but") 
    }); 
    });

источник

2011-01-29 13:01:14

Thnxs Федерико, я внедрил вашу идею, она работала, но теперь моя функция не работает, я загрузил код, пожалуйста, помогите мне, Должно быть очень благодарен u .. – Zain

Федерико Zuppa ясно дал ответ Zain искал, однако мой комментарий так тесно связаны, что я добавляю его здесь:

Во странице загрузки отображаются изображения в вертикальном стеке, пока CloudCarousel не загрузится.

Вы можете (безвредно) предотвратить это, используя css, чтобы скрыть изображения. Затем покажите их следующим образом:

$("#carousel1").CloudCarousel({ ... }); 
$('#carousel1 ... img').delay(1000).fadeIn(600);

Задержка необходима, потому что CloudCarousel занимает некоторое время, чтобы изменить положение изображения - только потому, что ваш .fadeIn() приходит после .CloudCarousel() не означает, что она будет работать. Ваши изображения по-прежнему загружаются влево, а затем перестраиваются на экране.

FadeIn необходим, потому что .delay не работает с функциями jquery, которые не помещают в очередь элементы (см. http://api.jquery.com/delay/).

источник

2012-03-07 19:14:27 doub1ejack

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> 
<title>The Planets - Cloud Carousel Arbitrary HTML Demo</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
<link href="carousel.css" rel="stylesheet" type="text/css" /> 
<script language="JavaScript" type="text/javascript" src="jquery.min.js"></script> 
<script language="JavaScript" type="text/javascript" src="jquery-ui.min.js"></script> 
<script language="JavaScript" type="text/javascript" src="cloud-carousel.1.0.5-x.js"> 
</script> 
<script language="JavaScript" type="text/javascript" src="jquery.mousewheel.min.js"> 
</script> 
</head> 
<body> 
<div id="wrap"> 
<div id="contents">  
    <div id="homecontents"> 
    <div id = "carousel1">    
     <!-- All elements with class of "cloudcarousel" will be turned into carousel 
      items --> 
     <!-- You can place arbitrary html inside these elements - although each should 
      contain at least one image tag --> 
    <div class = "cloudcarousel" /> 
     <img src="images/image1.jpeg" alt="GarField Cartoon Cat" title="GarField Cat" 
     /> 
     <div class="caption lower center spacy" style="color:#00FFFF;">GarField Cartoon 
     Cat</div> 
</div> 

    <div class = "cloudcarousel" /> 
     <img src="images/image2.jpeg" alt="Mickey Mouse Cartoon" title="Mickey Mouse" 
     /> 
     <div class="caption lower center spacy" style="color:#00FFFF;">Mickey Mouse 
     Cartoon</div> 
</div> 

    <div class = "cloudcarousel" /> 
     <img src="images/image3.jpeg" alt="Cute Bunny Cartoon" title="Cute Bunny" /> 
     <div class="caption lower center spacy" style="color:#00FFFF;">Cute Bunny 
     Cartoon</div> 
</div> 

    <div class = "cloudcarousel" /> 
     <img src="images/image4.jpeg" alt="Bugs Bunny Cartoon" title="Bugs Bunny" /> 
     <div class="caption lower center spacy" style="color:#00FFFF;">Bugs Bunny 
     Cartoon</div> 
</div> 

    <div class = "cloudcarousel" /> 
     <img src="images/image5.jpeg" alt="Calven and Hobbes Cartoon" title="Calven and 
     Hobbes" /> 
     <div class="caption lower center spacy" style="color:#00FFFF;">Calven and Hobbes 
     Cartoon</div> 
</div> 

    <div class = "cloudcarousel" /> 
     <img src="images/image6.jpeg" alt="Winnie The Pooh Cartoon" title="Winnie the 
     Pooh" /> 
     <div class="caption lower left spacy" style="color:#00FFFF;">Winnie The Pooh 
     Cartoon</div> 
</div> 

    <div class = "cloudcarousel" /> 
     <img src="images/image7.jpeg" alt="Little Chick Cartoon" title="Little Chick" /> 
     <div class="caption lower center spacy" style="color:#00FFFF;">Little Chick 
     Cartoon</div> 
</div> 

    <div class = "cloudcarousel" /> 
     <img src="images/image8.jpeg" alt="Mini Mouse Cartoon" title="Mini Mouse" /> 
     <div class="caption lower center spacy" style="color:#00FFFF;">Mini Mouse 
     Cartoon</div> 
</div> 
    </div> 

<div id="buttons1"> 
     <!-- Define left and right buttons. --> 
     <input id="left-but" type="button" value="Left" /> 
     <input id="right-but" type="button" value="Right" /> 
</div> 

<div id="text1"> 
     <!-- Define elements to accept the alt and title text from the images. --> 

     <p id="title-text"></p> 
    <p id="alt-text"></p> 
</div> 

<!-- Initialize the carousels --> 
    <script language="JavaScript" type="text/javascript"> 
     $(document).ready(function(){ 
    // This initialises carousels on the container elements specified, in this 
       case, carousel1. 
     $("#carousel1").CloudCarousel(  
     {    
    xPos: 494, 
    yPos: 100, 
    yRadius: 120, 
    buttonLeft: $("#left-but"), 
    buttonRight: $("#right-but"), 
    altBox: $("#alt-text"), 
    titleBox: $("#title-text"), 
    reflHeight: 65, 
    reflGap: 4, 
    reflOpacity: 0.5, 
    FPS: 30, 
    speed:0.2, 
    minScale: 0.7, 
    mouseWheel: true 
     } 
    ); 
     }); 
     </script> 
    </div> 

    <div class="clear"></div> 
</div>

источник

2012-05-07 10:29:54

Спасибо за сообщение! В то время как фрагмент кода мог ответить на вопрос, по-прежнему замечательно добавлять дополнительную информацию, например, объяснять и т. Д. – j0k

/* style.css */ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
margin: 0; 
padding: 0; 
border: 0; 
font-size: 100%; 
font: inherit; 
vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
display: block; 
} 
body { 
line-height: 1; 
} 
ol, ul { 
list-style: none; 
} 
blockquote, q { 
quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
content: ''; 
content: none; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 

/* end of reset css */ 

body { 
background-color: #000000; 
font-family: arial; 
color: #eeeedd; 
margin: 0px; 
} 
a { 
color: #7799FF; 
text-decoration: none; 
} 
h2 { 
font-size: 18px; 
} 
#wrap { 
background-color: #000000; 
height: 550px; 
} 
#contents { 
top: 30px; 
position: relative; 
} 
#buttons1,#text1,#buttons2,#text2 { 
    margin-left: 100px; 
}

источник

2012-05-07 10:34:11

Не могли бы вы дать некоторую информацию о том, как это помогает? –

Проблема в облаке каруселью

ответ

Смежные вопросы