PHPの配列からJQueryのスライドショー

私はこのコードを持っているすべての画像を同じidとstoret配列と私はスライドショーとして表示するには、私はどのように使用することができますお互いの近くに画像を表示したいJqueryスライドショーPHPの配列からJQueryのスライドショー

// PHPファイル（サーバー側）

<?php 
$dbhost = '127.0.0.1'; 
$dbuser = 'root'; 
$dbpass = ''; 
$dbname = 'images'; 

$sql2 = "SELECT img FROM image WHERE L_ID=:id"; 
try { 
    $con = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
    $con->query('SET NAMES utf8'); 
    $stmt = $con->prepare($sql2); 
    $stmt->bindParam("id", $_GET["L_ID"]); 
    $stmt->execute(); 
    $img = $stmt->fetchAll(PDO::FETCH_OBJ); 
    $con = null; 
    echo '{"pics":'. json_encode($img) .'}'; 
    } catch(PDOException $e) { 
    echo '{"error":{"text":'. $e->getMessage() .'}}'; 
} 

?>

は// JSファイル

$('#detailsPage').live('pageshow', function (event) { 
     var id = getUrlVars()["L_ID"]; 
     $.getJSON(serviceURL + 'getimage.php?L_ID=' + id, displayImg); 
     }); 
    function displayImg(data) { 





    var imgs = data.pics; 
    console.log(imgs); 
    for(var j=0;j<imgs.length;j++) 
    { 
     $('#pic').append('<img src="' + imgs[j].img + '"width=112 height=112/>');} 

    $('#actionList').listview('refresh'); 

} 

function getUrlVars() { 
var vars = [], 
hash; 
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
for (var i = 0; i < hashes.length; i++) { 
    hash = hashes[i].split('='); 
    vars.push(hash[0]); 
    vars[hash[0]] = hash[1]; 
} 
return vars; 
}

// HTMLの

出典

2017-02-15 RAB

jQueryのVERSあなたはイオンを使用していますか？ –

私はrtl.jquery.mobile-1.4.5.jsを使用しています – RAB

** [Flexslider]（http://flexslider.woothemes.com/）**を試してみてください。 /jsfiddle.net/z_acharki/CPpBD/619/ –

次はかなりうまくいくようです。しかし、確かに改善の余地があります。

私は次のように使用：https://www.w3schools.com/howto/howto_js_slideshow.asp

私はあなたが私はそれをコメントアウト$('#actionList').listview('refresh');で何をしているか、知っていないので。

HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>StackOverflow Question 42261254</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
     <script src="slideshow.js"></script> 
     <link rel="stylesheet" href="slideshow.css"> 
    </head> 
    <body> 
     <h1>StackOverflow Question 42261254</h1> 

     <div class="slideshow-container"> 
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
      <a class="next" onclick="plusSlides(1)">&#10095;</a> 
     </div> 
     <br> 

     <div class="dots-container" style="text-align:center"></div> 
    </body> 
</html>

PHP：

<?php 
$dbhost = '127.0.0.1'; 
$dbuser = 'root'; 
$dbpass = ''; 
$dbname = 'images'; 

$sql = "SELECT img FROM image WHERE L_ID=:id"; 
$data = array(); 

try 
{ 
    $con = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
    $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
    $con->query('SET NAMES utf8'); 
    $stmt = $con->prepare($sql); 
    $stmt->bindParam("id", $_GET["L_ID"]); 
    $stmt->execute(); 
    $img = $stmt->fetchAll(PDO::FETCH_OBJ); 
    $con = null; 

    $data['pics'] = $img; 
    $data['success'] = true; 
} 
catch(PDOException $e) 
{ 
    $data['success'] = false; 
    $data['errors'][] = $e->getMessage(); 
} 

echo json_encode($data, JSON_PRETTY_PRINT); 

?>

JS：

var slideIndex = 1; 

function plusSlides(n) { 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

function getUrlVars() { 
    var vars = [], 
     hash, 
     hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 

    for (var i = 0; i < hashes.length; i++) { 
     hash = hashes[i].split('='); 
     vars.push(hash[0]); 
     vars[hash[0]] = hash[1]; 
    } 

    return vars; 
} 

function displayImg(data) { 
    console.log(data); 

    if (data.success) { 
     var imgs = data.pics; 

     console.log(imgs); 

     for (var j = 0; j < imgs.length; j++) { 
      $('.slideshow-container a.prev').before(
       '<div class="mySlides fade">' + 
        '<div class="numbertext">' + (j+1) + '/' + imgs.length + '</div>' + 
        '<img src="' + imgs[j].img + '" style="width: 100%"/>' + 
        '<div class="text">Caption Text</div>' + 
       '</div>' 
      ); 

      $('.dots-container').append(
       '<span class="dot" onclick="currentSlide(' + (j+1) + ')"></span> ' 
      ); 
     } 

     //$('#actionList').listview('refresh'); 
     showSlides(slideIndex); 
    } else { 
     for (var i = 0; i < data.errors.length; i++) { 
      console.error(data.errors[i]); 
     } 
    } 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    console.log(slides); 
    var dots = document.getElementsByClassName("dot"); 
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 
} 

$(document).ready(function() { 
    var id = getUrlVars()["L_ID"]; 
    $.getJSON('getimage.php?L_ID=' + id, displayImg); 
});

CSS：

* {box-sizing:border-box} 

/* Slideshow container */ 
.slideshow-container { 
    max-width: 1000px; 
    position: relative; 
    margin: auto; 
} 

.mySlides { 
    display: none; 
} 

/* Next & previous buttons */ 
.prev, .next { 
    cursor: pointer; 
    position: absolute; 
    top: 50%; 
    width: auto; 
    margin-top: -22px; 
    padding: 16px; 
    color: white; 
    font-weight: bold; 
    font-size: 18px; 
    transition: 0.6s ease; 
    border-radius: 0 3px 3px 0; 
} 

/* Position the "next button" to the right */ 
.next { 
    right: 0; 
    border-radius: 3px 0 0 3px; 
} 

/* On hover, add a black background color with a little bit see-through */ 
.prev:hover, .next:hover { 
    background-color: rgba(0,0,0,0.8); 
} 

/* Caption text */ 
.text { 
    color: #f2f2f2; 
    font-size: 15px; 
    padding: 8px 12px; 
    position: absolute; 
    bottom: 8px; 
    width: 100%; 
    text-align: center; 
} 

/* Number text (1/3 etc) */ 
.numbertext { 
    color: #f2f2f2; 
    font-size: 12px; 
    padding: 8px 12px; 
    position: absolute; 
    top: 0; 
} 

/* The dots/bullets/indicators */ 
.dot { 
    cursor:pointer; 
    height: 13px; 
    width: 13px; 
    margin: 0 2px; 
    background-color: #bbb; 
    border-radius: 50%; 
    display: inline-block; 
    transition: background-color 0.6s ease; 
} 

.active, .dot:hover { 
    background-color: #717171; 
} 

/* Fading animation */ 
.fade { 
    -webkit-animation-name: fade; 
    -webkit-animation-duration: 1.5s; 
    animation-name: fade; 
    animation-duration: 1.5s; 
} 

@-webkit-keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

@keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
}

出典

2017-02-15 23:36:00 Koelli91

しかし、クロムで実行すると、このjavascriptエラーが発生します。未知の型エラー：未定義のプロパティ 'スタイル'を読み取ることができません。クロムエラーを投稿します。imgを先頭に追加します。 – RAB

このスクリプトでは、クラス 'mySlides'です。あなたが追加する 'img'は' div.mySlides'の中になければなりません。 – Koelli91

あなたが書いているように、クラスmyslidesの中の画像src – RAB

PHPの配列からJQueryのスライドショー

答えて

関連する問題