скроллер миниатюр внутри div с AJAX - PullRequest
Новая
       1

скроллер миниатюр внутри div с AJAX

1 голос
/ 23 марта 2012

Я использую скроллер jquery для своего веб-сайта с фотографиями, который я не могу заставить его работать.Я использую эти два файла:

main.php 

<html>
<head>
</head>   
<body>
<input name="activator" type="button" value="Click me" onClick="show()"/>
<div id="display"></div>

<script type="text/javascript">
function show()
{
var xmlhttp;    
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("display").innerHTML=xmlhttp.responseText;
    }   
  }
xmlhttp.open("GET","thumbs.php",true);
xmlhttp.send();
}
</script>

</body>
</html>

, а также thumbs.php 

<html>
<head>
<link href="jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="jquery-ui-1.8.13.custom.min.js"></script>
</head>
<body>
<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
<a href=#><img src="xxxxxx"></a>
</div>
</div>
</div>      

<script type="text/javascript">
jQuery.noConflict();
(function($){
window.onload=function(){
    $("#tS2").thumbnailScroller({
        scrollerType:"hoverPrecise",
        scrollerOrientation:"horizontal",
        scrollSpeed:2,
        scrollEasing:"easeOutCirc",
        scrollEasingAmount:600,
        acceleration:4,
        scrollSpeed:800,
        noScrollCenterSpace:10,
        autoScrolling:0,
        autoScrollingSpeed:2000,
        autoScrollingEasing:"easeInOutQuad",
        autoScrollingDelay:500
    });
}
})(jQuery);
</script>
<script type="text/javascript" src="jquery.thumbnailScroller.js"></script>
</body>
</html>

AJAX загружен нормально.Все остальное выглядит хорошо.Проблема здесь в том, что содержимое div просто не прокручивается.Он показывает все правильно, но содержимое div не упорядочено и не прокручивается, как показано в:

http://manos.malihu.gr/jquery-thumbnail-scroller (источник кода)

Проблема заключается в использованииAJAX для загрузки моего контента (что является обязательным), но у меня нет знаний, чтобы решить эту проблему.Кто-нибудь может мне помочь, пожалуйста?

Спасибо заранее.

ПОСЛЕ ВСЕХ ОТВЕТОВ, ЗДЕСЬ РАБОЧИЙ КОД (спасибо @Abhidev):

main.php 

<html>
<head>

<script type="text/javascript" src="thumbnail_gallery/jquery.thumbnailScroller.js"></script>
<link href="thumbnail_gallery/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="thumbnail_gallery/jquery-ui-1.8.13.custom.min.js"></script>

</head>

<body>
<input name="activator" type="button" value="Click me" onClick="show()"/>
    <div id="display"></div>

<script type="text/javascript">
function show()
{    
    $.ajax({
          url: "TESTE.php",
          success: function(data) {
             $('#display').html(data);
            //Initiate the scroller here
            $("#tS2").thumbnailScroller({
                scrollerType:"hoverPrecise",
                scrollerOrientation:"horizontal",
                scrollSpeed:2,
                scrollEasing:"easeOutCirc",
                scrollEasingAmount:600,
                acceleration:4,
                scrollSpeed:800,
                noScrollCenterSpace:10,
                autoScrolling:0,
                autoScrollingSpeed:2000,
                autoScrollingEasing:"easeInOutQuad",
                autoScrollingDelay:500
            });
        }
    });
}
</script>

</body>
</html>

thumbs.php 

<html>
<head>
<link href="thumbnail_gallery/jquery.thumbnailScroller.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="thumbnail_gallery/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="thumbnail_gallery/jquery.thumbnailScroller.js"></script>
</head>
<body>

<div id="tS2" class="jThumbnailScroller">
<div class="jTscrollerContainer">
<div class="jTscroller">
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
<a href="#"><img src="1.png" width="100" height="100"></a>
</div>
</div>
</div>      

</body>
</html>

1 Ответ

0 голосов
/ 23 марта 2012

, так как вы используете jquery, тогда вы можете просто использовать метод .ajax () 

function show(){    
    $.ajax({
          url: "thumbs.php",
          success: function(data) {
            $('#display').html(data);       //Here is the change
            //Initiate the scroller here
            $("#tS2").thumbnailScroller({
                scrollerType:"hoverPrecise",
                scrollerOrientation:"horizontal",
                scrollSpeed:2,
                scrollEasing:"easeOutCirc",
                scrollEasingAmount:600,
                acceleration:4,
                scrollSpeed:800,
                noScrollCenterSpace:10,
                autoScrolling:0,
                autoScrollingSpeed:2000,
                autoScrollingEasing:"easeInOutQuad",
                autoScrollingDelay:500
            });
        });

    }

Для получения более подробной информации и опций см. http://api.jquery.com/jQuery.ajax/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...