Hello I Am Working On A Startup and I Have A Huge Problem In My Project.
In Searching Page User Can Search By Different Item And Ads Showed.
I Wanna Per Each Ad In The Picture Area Shows Picture By Slider.
Let Me Show By Pic .
This Is Searching Page
Searchin_Page
I Wanna Use Slider For Each Ad That Shows But Its Dose not Work True . . .
This Is My Jquery Code
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " w3-white";
}
And This Is Html Side . . .
<div class="Image_Area_Panel">
<div class="w3-content w3-display-container" style="max-width:800px">
<img class="mySlides" src="http://localhost/Ajency/Public/456d6ef5aae4e33926a4c592aa5210a5--sexy-men-hot-men.jpg">
<img class="mySlides" src="http://localhost/Ajency/Public/620b1b643b4d40bef759a386764fc630.jpg">
<img class="mySlides" src="http://localhost/Ajency/Public/Brant-daugherty-cuff.jpg">
<div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle Aroos" style="width:100%">
<div class="AreaBox">
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
</div>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
Sorry For My English Ability
Related
I'm relatively new to the world of programming and this is my first question on stack overflow. I have to create a system written in php and jquery that allows to order a series of images and, based on the order, create a banner-style animation. The only problem is that when the script selects the images from the div to create the animation they disappear. thanks in advance for your collaboration
the javascript
$(document).ready(function () {
const images = document.querySelectorAll('.imgw');
$('#preview').html(images[0]);
$("#genera").click(function () {
setInterval(banner, 2500);
var index = 1;
});
});
const banner = () => $('#preview').fadeOut('slow', function () {
$(this).html(images[index]);
$(this).fadeIn('slow', function () {
if (index == images.length - 1) {
index = 0;
} else {
index++;
}
});
})
the html file
<section>
<div class="row" style="margin-top:25px;">
<div class="col text-center">
<h2 style="margin-top:25px;">Anteprima</h2>
<div id="preview">
</div>
</div>
</div>
</section>
<section>
<div class="row" id="slides" style="margin-top:25px;">
<div class="col text-center">
<!-- <div id="box"> -->
<h2 style="margin-top:25px;">Slides</h2>
<ul id="sortable">
<?php
$html = "";
$count = 1;
foreach ($images as $img) {
$url = $img["url"];
$size = $img["size"];
$humanSize = $img["human_size"];
$html .= "\t\t<img src='{$url}' class='imgw' id='{$count}' alt='image_{$count}' />\n";
$count++;
}
echo $html;
?>
</ul>
</div>
I read the documentation better and solved the problem
the javascript
var images = $('.ui-sortable').children("img").clone();
var index = 1;
const banner = () => $('#anteprima').fadeOut('slow', function () {
$(this).html(images[index]);
$(this).fadeIn('slow', function () {
if (index == images.length - 1) {
index = 0;
} else {
index++;
}
});
})
setInterval(banner, 2500);
I'm trying to create a system of photos of a product, where the administrator if he wants to add remove or change the position of the photos he does everything by the form.
Form:
<form role="form" id="editProductForm" enctype="multipart/form-data">
<div id="SubPhotos" class="mt-3" style="overflow: auto; white-space: nowrap;">
<hr>
<div class="form-group mt-0 col-md-3">
<label for="uploadPhoto" class="btn btn-primary" role="button" style="cursor:pointer">Add Photo <i class="fas fa-plus"></i></label>
<input type="file" id="uploadPhoto" onchange="readURL(this);" style="display:none;">
</div>
<div class="d-flex">
<label><span id="badgeMainPicture" class='badge badge-primary ml-2'>Main Picture</span></label>
<label class="ml-auto"><span id="badgeTotalPhotos" class='badge badge-secondary'>Amount of Photos: <?php echo count($productImages) ?> de 10</span></label>
</div>
<div id="droppable" style="display: flex;">
<?php $index = 1;
for ($i = 0; $i < count($productImages); $i++) { ?>
<div id="photo<?php echo $index ?>" class="form-group col-lg-3 draggable">
<img id="preview-img" <?php echo isset($productImages[$i]) ? 'src="' . $site . $productImages[$i]['ImagePath'] . '"' : '' ?> height="300px" width="242px" />
<button id="removerPhoto<?php echo $index ?>" class="btn btn-danger btn-removerPhoto shadow-lg" type="button" onclick="removePhoto(<?php echo $index ?>)"><i class="fas fa-times"></i></button>
</div>
<?php
$index++;
} ?>
</div>
</div>
<hr>
<div class="d-flex">
<button type="submit" id="editProduct" class="ml-auto mr-auto btn btn-primary mt-5">Modify Product</button>
</div>
</form>
Contains remove button, draggable to change positions and add photos, everything works fine CLIENT-SIDE
After submit form:
$("#editProductForm").submit(function(e) {
e.preventDefault();
var index = 1;
$(".draggable").each(function() {
var image = $(this).find("#preview-img").attr("src");
var id = $(this).attr("id").substring(4);
if (image.indexOf("https://") > -1) {
$("#photo" + id).attr("id", "photo" + index);
} else {
$("#picture" + id).attr("name", "picture" + index);
}
index++;
});
var formData = new FormData(this);
var index = 1;
$(".draggable").each(function() {
var image = $(this).find("#preview-img").attr("src");
var id = $(this).attr("id").substring(4);
if (image.indexOf("https://") > -1) {
formData.append('picture' + index, image);
} else {
$("#picture" + id).attr("name", "picture" + index);
}
index++;
});
$.post({
url: '<?php echo $site ?>/admin/painel/modifyproduct.php',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data) {
}
});
});
Now comes the question, my code has bug and I don't know how to solve SERVER-SIDE:
function createImage($id, $productCategory)
{
global $db;
$db->query("DELETE FROM pictures WHERE ProductID='$id'");
if (!file_exists("../../../pictures/produtos/$productCategory/MTA$id/")) {
mkdir("../../../pictures/produtos/$productCategory/MTA$id/", 0777, true);
}
$position = 0;
for ($i = 1; $i <= 10; $i++) {
if (isset($_FILES['picture' . $i])) {
$file = $_FILES['picture' . $i]['tmp_name'];
$nameFile = "picture" . $position;
$patchImage = "/pictures/produtos/$productCategory/MTA$id/$nameFile.png";
move_uploaded_file($file, "../../.." . $patchImage);
saveImageInDataBase($id, $patchImage, $position);
$position++;
} else if (isset($_POST['picture' . $i])) {
$file = $_POST['picture' . $i];
$nameFile = "picture" . $position;
$oldName = "../../../" . substr($file, strpos($file, 'pictures/'));
rename($oldName, "../../../pictures/produtos/$productCategory/MTA$id/$nameFile.png");
saveImageInDataBase($id, "/pictures/produtos/$productCategory/MTA$id/$nameFile.png", $position);
$position++;
}
}
}
Bug: There is a bug that when there is already a photo in the folder with the same name (with the position) and another photo being placed with that same position (move_uploaded_file) the old photo will be replaced.
Would there be an easier way to make this photo system work well?
Before doing the move_uploaded_file() you have to check whether the file exists. If so, you'll need to create a new filename. You'll have to do those steps until you find a non-existent file.
while ( TRUE ) { // Loop until we find a non-existent destination filename
$nameFile = "picture" . $position;
$patchImage = "/pictures/produtos/$productCategory/MTA$id/$nameFile.png";
if ( ! file_exists( $patchImage ) ) { // We're good
move_uploaded_file($file, "../../.." . $patchImage);
saveImageInDataBase($id, $patchImage, $position);
break; // Get out of the loop
}
$position++; // Try next position
}
I have created multiple image upload function with preview and remove option. But when i select files ,suppose 4 images and then it previews 4 images correctly. Now i remove 2 of them from preview and try to upload in database but it still uploading 4 images instead of 2 image.
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#vpb-data-file").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class=\"pip\">" +
"<img class=\"imageThumb\" height=\"100\" width=\"100\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"remove\">Remove</span>" +
"</span>").insertAfter("#ml_image");
$(".remove").click(function() {
$(this).parent(".pip").remove();
});
// Old code here
/*$("<img></img>", {
class: "imageThumb",
src: e.target.result,
title: file.name + " | Click to remove"
}).insertAfter("#files").click(function(){
$(this).remove();
});*/
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
<div class="card-body">
<div class="row" id="ml_image" style="margin-top:15px;">
<div class="col-md-3">
<label class="form-label">Upload Image<br>
<span style="font-size:12px;">(For multiple images press ctrl.)</span>
</label>
</div>
<div class="col-md-6">
<span onclick="product_image();" id="hide_span" class="btn btn-icon btn-primary file_upload_icon" style="margin-top:6px;"><i class="fas fa-cloud-upload-alt" style="font-size:31px;"></i><strong style="color:#000000;padding:10px;font-size:15px;">Choose File...</strong></span><input
style="display:none;" type="file" name="p_image[]" id="vpb-data-file" multiple />
</div>
</div>
<div class="row" id="vpb-display-preview"></div>
</div>
$p_image = count($_FILES['p_image']['name']);
print_r($p_image);
Here I am counting how many files I want to upload. I am getting 4 instead of 2.
Your remove function must remove file in e.target.files or in the p_image[] tab.
So right now, I am running some PHP code to turn images from a Wordpress post into a slider element.
<?php
$ticker = 0;
$attachments= get_attached_media( 'image', $post->ID );
foreach($attachments as $att_id => $attachment) {
$full_img_url[$ticker] = wp_get_attachment_url($attachment->ID);
?>
<img class="mySlides" src="<?php echo $full_img_url[$ticker]; ?>" >
<?php
$ticker ++;
}
?>
<button class="w3-button w3-display-left" onclick="plusDivs(-1)">❮ </button>
<button class="w3-button w3-display-right"onclick="plusDivs(+1)">❯ </button>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
My problem appears when I remove an image from the post.
The WordPress post
The slider element that should be there.
The one that shoulds be
So when I remove an image from the post it isn't removed from the slider elements.
I write a script in jquery: "add to cart". The problem is that the above script works, but not as it should be.
When I press the addtobasket div, it does a string of all names and prices. He does not get value only from this div.
I do not know how to do it, only to take it this value of div cenaprzedmiotu and div nazwa.
HTML/PHP (this is my product):
while ($row = $result - > fetch_assoc()) {
$i++;
echo "<div class=\"col-md-3\"><section class = 'produkt'id = '$i'draggable = 'true' > ";
echo "<div class=\"opis\"> <div class = \"nazwa\" style='margin-top:6px;'>".$row['nazwa']."</div> <div > < b > Cena: < /b> <span class=\"cenaprzedmiotu\">".$row['cena']."</span > PLN < /div> <div id = 'kategoriaproduktu'style = 'display: none;' > ".$row['kategoria']." < /div> </div><div class='addtobasket'><i class=\"fas fa-cart-plus\"></i > < /div>";
echo "</section></div>";
}
jQuery:
$("body").on("click", ".addtobasket", function(evt) {
$("#kontener_koszyka").fadeIn();
var suma = 0;
var nazwa = $(".nazwa").text();
var cena = $(".cenaprzedmiotu").text();
var li = "<li class='produkt_w_koszyku'><b>" + nazwa + "</b> <span class='cena_w_koszyku'>" + cena + " zł</span></li>";
$("#koszyk").append(li);
$("#koszyk .cena_w_koszyku").each(function() {
suma += parseFloat($(this).text());
});
$("#cena span").text(suma.toFixed(2));
});
Try this solution:
var nazwa = $(this).closest('.produkt').find('.nazwa').text();
here you are more info about .closest and
.find