0
Hello! I’m working with an app with Cordova. I created an API with PHP pulling from a table of my database, but in this table there is a column where it pulls several images that are in a folder.
What I want to do is pull the specific images of this folder relative to id and call it with json. I know how to do this normally with select but a folder I don’t know how to do.
Index
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css">
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #000;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
overflow: hidden;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="http://lorempixel.com/800/800/sports/1/">
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="http://lorempixel.com/800/400/sports/2/">
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="http://lorempixel.com/400/800/sports/3/">
</div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
zoom: true,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>Call PHP
<?php
require_once 'bd.php';
header('Access-Control-Allow-Origin:*');
$pdo = conectar();
$id = $_GET['id'];
$listar = $pdo->query("select * from teste where id='$id'");
echo json_encode($listar->fetchAll(PDO::FETCH_OBJ));
?>Script
$(document).ready(function(){
var html = '';
var query = location.search.slice(1);
var partesDaQuery = query.split("&");
var json = {};
partesDaQuery.forEach(function(partes){
var chaveValor = partes.split('=');
var paramsKey = chaveValor[0];
var paramsValue = chaveValor[1];
json[paramsKey] = paramsValue;
$.getJSON('http://teste.com/api.php?id='+json[paramsKey], function(data){
$.each(data, function(k, v){
html += '<div class="swiper-slide">';
html += '<div class="swiper-zoom-container">';
html += '<img src="http://teste.com/volumes/01/">';
html += '</div>';
});
$("#volumes").html(html);
});
});
});
has code implemented ?
– Victor
I do. I’ll edit the post.
– OliverDamon
I added it, take a look. Notice it’s just pulling the seat and not folder.
– OliverDamon
tried to insert images into the database in a new field ? can make your life easier, no ?
– Victor
But in case agr n will help. Each item pulls several images. Example: Volume 01 pulls 5 images. Volume 02 pulls 2 images. I want to identify them refente the ID and play pro slide.
– OliverDamon
so come on, make sure your images folder contains all the images you need to pull, make sure the folder name in the project is correct with what you’re calling in the code, and then we’ll kill the possible bugs
– Victor