I created a while loop that produces five images. I then designed the images to be dragged onto a droppable section of the webpage. I then want the webpage to output the location of where I placed the image. My only problem is that I want the code to also echo out the src from where I got the image from. For some reason, whenever I click on any of the images and drag them, the page only echos out the src of the first image the while loop looped through.
<script type="text/javascript">
$(".droppable").droppable();
</script>
<?php
$num_dresses = dress_count ();
$i = 0;
while ($i < 5)
{
$rand_id = rand(1, $num_dresses);
$new_file_name = html_entity_decode($dress_feed_data['file_name']);
if (file_exists('fashion_images/' . $new_file_name))
{
?>
<script type="text/javascript" >
$(document).ready(function(){
$(function()
{
$(".ui-widget-content").draggable(
{
stop: function(event,ui)
{
var Stoppos = $(this).position();
var className = $("img").attr("src");
$(".location").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top +
className);
}});});});
</script>
<div class="ui-widget-content">
<img src="fashion_images/<?php echo $new_file_name;?> " width="70" height="70"/>
</div>
<?php
}
$i++;
}
?>
<div class="droppable"></div>
<div class="location"></div>
Jason,
Try :
$(".ui-widget-content img").draggable({
stop: function(event, ui) {
var Stoppos = $(this).position();
var className = $(this).attr("src");
$(".location").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top + className);
}
});
Related
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.
I installed BT Property component for my Joomla site and when I select multiple of images (more than 3 or 4) which I want to upload for my article, it nothing happens. The images won't upload. I try to change the code but I don't know what the problem is.
This is the code I want to change.
<?php
defined('_JEXEC') or die('Restricted access');
$document = JFactory::getDocument();
$path = $this->params->get('images_path', 'images/bt_property');
?>
<ul class="adminformlist" id="uploading">
<li><input type="file" name="attachment" id="attachment" multiple /><img id="spinner"
style="display: none; margin-left: 10px;"
src="<?php echo JURI::root(); ?>components/com_bt_property/assets/img/spinner.gif">
<div style="clear: both"></div>
<div id="btss-message"></div></li>
</ul>
<script type="text/javascript">
(function($){
var files = [];
$("#attachment").change(function(event) {
$.each(event.target.files, function(index, file) {
var reader = new FileReader();
reader.onload = function(event) {
object = {};
object.filename = file.name;
object.data = event.target.result;
files.push(object);
if(files.length==1){
uploadFile(index);
$('#spinner').show();
$("#btss-message").show();
}
};
reader.readAsDataURL(file);
});
});
function uploadFile(index){
$.ajax({url: "index.php?option=com_bt_property&task=properties.upload",
type: 'POST',
data: {filename: files[index].filename, filedata: files[index].data},
success: function(response, status, xhr){
uploadHandler(response, status, xhr);
if(index == files.length-1){
$('#spinner').hide();
files = [];
$("#attachment").val('');
$("#btss-message").delay(1000).slideUp(function(){
$("#btss-message").html('');
});
}else{
index++;
uploadFile(index);
}
}
});
}
function uploadHandler(response, status, xhr) {
var data = jQuery.parseJSON(response);
if(data == null){
showMessage("<br /><span style=\"color: red;\">Loading Failed</span>");
}else{
var file = data.files;
if (!data.success) {
showMessage("<br /><span style=\"color: red;\"> " + data.message +"</span>");
}
else {
var html = '<li>';
html += '<input class="input-default" title="Make default" name="default_image" type="radio" value="'+file.filename+'" />';
html += '<img class="img-thumb" src="<?php echo JURI::root() . $path . '/tmp/' . ($this->params->get('thumbimgprocess', 1) == -1 ? 'original' : 'thumb') . '-'; ?>'+file.filename+'" />';
html += '<input type="hidden" name="image_id[]" value="0" />';
html += '<input type="hidden" name="image_filename[]" value="'+file.filename+'" /><br/>';
html +='Edit';
html +='<a href="javascript:void(0)" class="remove" onclick="removeImage(this)" >Remove</a>';
html += '</li>';
jQuery('#sortable').append(html);
jQuery('#sortable li:last-child ').find('a.edit').data('title', file.title);
reNewItem();
showMessage('<br />' + file.title + " uploaded successfully!");
}
}
}
function showMessage(msg){
$("#btss-message").append(msg);
}
})(jQuery);
</script>
Is there a way to fix the code? I would be very thankful for any answer.
Your file object is coming up as undefined, and thus you're not able to use file.filename.
Your problem is most likely with this line var file = data.files; - are you sure about data.files?
Hey i have a problem on my website i want to display a image with a rating under and then when i rate the image it should change to the next picture. And there is my problem because it displays the next picture correctly but it doesn't change the id in the rating system so i am rating the same picture again and again
Source code:
$place="upload/";
$first = mysql_query("SELECT * FROM images ORDER BY RAND()");
while($wor = mysql_fetch_array($first))
{
$id=$wor['id'];
$name = $wor['name'];
$image = $place . $wor['name'];
}
$number="1";
$wrongnumber="2";
$random = mysql_query("SELECT * FROM images ORDER BY RAND()");
$place="upload/";
echo '<script> ';
while($wor = mysql_fetch_array($random))
{
$ids=$wor['id'];
$name = $wor['name'];
$images = $place . $wor['name'];
$number=$number + 1;
$wrongnumber=$wrongnumber + 1;
echo 'function ' . 'changeSrc' . $number . '() '; ?>
{
document.getElementById("rand").src="<? echo $images;?>";
document.getElementById("button").onclick=changeSrc<? echo $wrongnumber;?>;
document.getElementById("102").id=<? echo $ids;?>;
}
<?
}
?>
</script>
<img id="rand" src="<? echo $image;?>"><br>
<div id="button" onclick="changeSrc2()">
<div class="rate_widget" id="102">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>
The output code:
// This is the first thing we add ------------------------------------------
$(document).ready(function() {
$('.rate_widget').each(function(i) {
var widget = this;
var out_data = {
widget_id : $(widget).attr('id'),
fetch: 1
};
$.post(
'ratings.php',
out_data,
function(INFO) {
$(widget).data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
});
$('.ratings_stars').hover(
// Handles the mouseover
function() {
$(this).prevAll().andSelf().addClass('ratings_over');
$(this).nextAll().removeClass('ratings_vote');
},
// Handles the mouseout
function() {
$(this).prevAll().andSelf().removeClass('ratings_over');
// can't use 'this' because it wont contain the updated data
set_votes($(this).parent());
}
);
// This actually records the vote
$('.ratings_stars').bind('click', function() {
var star = this;
var widget = $(this).parent();
var clicked_data = {
clicked_on : $(star).attr('class'),
widget_id : $(star).parent().attr('id')
};
$.post(
'ratings.php',
clicked_data,
function(INFO) {
widget.data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
$.post(
'setcookie.php',
clicked_data,
function(INFO) {
widget.data( 'fsr', INFO );
set_votes(widget);
},
'json'
);
});
});
function set_votes(widget) {
var avg = $(widget).data('fsr').whole_avg;
var votes = $(widget).data('fsr').number_votes;
var exact = $(widget).data('fsr').dec_avg;
window.console && console.log('and now in set_votes, it thinks the fsr is ' + $(widget).data('fsr').number_votes);
$(widget).find('.star_' + avg).prevAll().andSelf().addClass('ratings_vote');
$(widget).find('.star_' + avg).nextAll().removeClass('ratings_vote');
$(widget).find('.total_votes').text( votes + ' votes recorded (' + exact + ' rating)' );
}
// END FIRST THING
</script><script> function changeSrc2() {
document.getElementById("rand").src="upload/1329614519daily_erotic_picdump_48-2-500x334.jpg";
document.getElementById("button").onclick=changeSrc3;
document.getElementsByClassName('rate_widget').id="125";
}
function changeSrc3() {
document.getElementById("rand").src="upload/1329614453tumblr_leb4pwc0Xc1qzy9ouo1_1280-1024x640.jpg";
document.getElementById("button").onclick=changeSrc4;
document.getElementsByClassName('rate_widget').id="65";
}
function changeSrc4() {
document.getElementById("rand").src="upload/1329614295daily_erotic_picdump_20-copy-500x333.jpg";
document.getElementById("button").onclick=changeSrc5;
document.getElementsByClassName('rate_widget').id="44";
}
function changeSrc5() {
document.getElementById("rand").src="upload/1329614301daily_erotic_picdump_80-2-500x375.jpg";
document.getElementById("button").onclick=changeSrc6;
document.getElementsByClassName('rate_widget').id="51";
}
function changeSrc6() {
document.getElementById("rand").src="upload/13296142941-3-450x600.jpg";
document.getElementById("button").onclick=changeSrc7;
document.getElementsByClassName('rate_widget').id="225";
}
function changeSrc7() {
document.getElementById("rand").src="upload/1329614284tumblr_l53l0qM6HB1qc4zlyo1_500-450x568.jpg";
document.getElementById("button").onclick=changeSrc8;
document.getElementsByClassName('rate_widget').id="19";
}
function changeSrc8() {
document.getElementById("rand").src="upload/1329614454tumblr_lro15r2fkh1qzlro6o1_500-450x301.jpg";
document.getElementById("button").onclick=changeSrc9;
document.getElementsByClassName('rate_widget').id="73";
}
function changeSrc9() {
document.getElementById("rand").src="upload/tumblr_mccaolmQPE1regfy1o1_500.jpg";
document.getElementById("button").onclick=changeSrc10;
document.getElementsByClassName('rate_widget').id="272";
}
function changeSrc10() {
document.getElementById("rand").src="upload/1329614297Pix-Mix-304-img012-500x312.jpg";
document.getElementById("button").onclick=changeSrc11;
document.getElementsByClassName('rate_widget').id="47";
}
</script>
<img id="rand" src="upload/1329614465tumblr_lscy8aqOFE1qg7sdjo1_500-450x322.jpg"><br>
<div id="button" onclick="changeSrc2()">
<div class="rate_widget" id="99">
<div class="star_1 ratings_stars"></div>
<div class="star_2 ratings_stars"></div>
<div class="star_3 ratings_stars"></div>
<div class="star_4 ratings_stars"></div>
<div class="star_5 ratings_stars"></div>
<div class="total_votes">vote data</div>
</div>
</div>
document.getElementById("button").onclick=changeSrc<? echo $wrongnumber;?>;
Aren't you missing brackets?
document.getElementById("button").onclick=changeSrc<? echo $wrongnumber;?>();
By the way, to reduce data laod add LIMIT 1 to your SQL query when retrieving only one row.
I have a PHP page that lists a bunch of words that it grabs from a MySQL database table. It displays the words in different sizes based on a count in the table:
<?php
$selectStr = "select * from test";
if ($results = MySQL($dbName, $selectStr))
{
$rowCount = MySQL_NUMROWS($results);
}
$i = 0;
while ($i < $rowCount)
{
echo '<div style="float: left; font-size:' . (MySQL_RESULT($results,$i,'count') * 5) . 'px;">' . MySQL_RESULT($results,$i,'word') . '</div>';
$i++;
}
?>
The trick is that I want the content to display dynamically. So if a user is sitting on the page, and one of the word counts goes up, I want the word to change size without the user refreshing the page.
I am a novice with jQuery. I have used it a bit before, but only using examples. Can someone steer me in a good direction to have my page dynamically change the content without refreshing?
You can auto refresh your page body like this ... give body id='body'
<html>
<head>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#body').load('wordscount.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
</head>
<body>
<div id='content'></div>
</body>
Dont forget to include jquery inside your head tag
It calls the file rowfunctie.php every 30000ms and fills the topbar diff with with the result of the getRows function.
<div id="center-rows">
<div id="links">Nu </div>
<div id="rows">
<div id="topbar"></div>
</div>
<div id="rechts"> aantal rijen</div>
</div>
<script type="text/javascript">
function doRequest() {
jQuery("#topbar").fadeOut('slow', function() {
jQuery.ajax({
type: "GET",
url: "rowfunctie.php",
cache: false,
success: function(html){
jQuery("#topbar").html(html);
jQuery("#topbar").fadeIn('slow',function() {
setTimeout('doRequest()',30000);
});
}
});
});
}
doRequest();
</script>
rowfunctie.php should look like this beneath:
<?php
$selectStr = "select * from test";
if ($results = MySQL($dbName, $selectStr))
{
$rowCount = MySQL_NUMROWS($results);
}
$i = 0;
while ($i < $rowCount)
{
echo '<div style="float: left; font-size:' . (MySQL_RESULT($results,$i,'count') * 5) . 'px;">' . MySQL_RESULT($results,$i,'word') . '</div>';
$i++;
}
?>
I have a small photo gallery that is displaying images from the database however once the image is loaded it is suppose to be displaying on the right side of the gallery frame. but in this case it does not display i am using JQuery to construct the Gallery can anyone help me solve this problem.
$(document).ready(function () {
$(".galleryThumbnail a").click(function (e) {
e.preventDefault();
//update thumbnail
$(".galleryThumbnail a").removeClass("selected");
$(".galleryThumbnail a").children().css("opacity", "1");
$(this).addClass("selected");
$(this).children().css("opacity", ".4");
//setup thumbnails
var photoCaption = $(this).attr('title');
var photofullsize = $(this).attr('href');
$(".galleryPreview").fadeOut(500, function () {
$(".gallery_preload_area").html("")
// this is what is going to happen after the fadeout
$(".galleryPreview").html("<a href='" + photofullsize + "' style=' background-image:url(" + photofullsize + ");'></a>");
$(".galleryCaption").html("<p><a href='" + photofullsize + "' title='Click to view large'>View Large</a></p><p></p>")
$(".galleryPreview").fadeIn(500);
});
});
});
it is being displayed on the page like this
<?php
$query = "SELECT * FROM image WHERE hotel_id = {$hotel['hotel_id']}";
$image_set = mysql_query($query, $connection);
while ($image = mysql_fetch_array($image_set)) {
?>
<a href=\"img/photos/<?php echo $image['image_url']; ?>"
title="<?php echo $image['image_url']; ?>">
<img src="img/photos/<?php echo $image['image_url']; ?>" width="75" height="75"/>
</a>
<?php
}
?>
to see the page in action please visit this site:
http://clicktravelnstay.com/desti_list.php?details=19
try this jquery
output
$(document).ready(function(){
$(".galleryThumbnail a").click(function(e){
e.preventDefault();
//update thumbnail
$(".galleryThumbnail a").removeClass("selected");
$(".galleryThumbnail a").children().css("opacity","1");
$(this).addClass("selected");
$(this).children().css("opacity",".4");
//setup thumbnails
var photoCaption = $(this).attr('title');
var photofullsize =$(this).attr('href');
alert(photofullsize+photoCaption);
var fullpath = photofullsize+photoCaption;
$(".galleryPreview").fadeOut(500, function(){
$(".gallery_preload_area").html("")
// this is what is going to happen after the fadeout
$(".galleryPreview").html("<a href='"+ photofullsize +"' style='background-image:url("+fullpath+");'></a>");
$(".galleryCaption").html("<p><a href='"+photofullsize+"' title='Click to view large'>View Large</a></p><p></p>")
$(".galleryPreview").fadeIn(500);
});
});
});
$query = "SELECT * FROM image WHERE hotel_id = {$hotel['hotel_id']}";
$image_set = mysql_query($query,$connection);
while($image = mysql_fetch_array($image_set)){?>
<a href="img/photos/<?php echo $image['image_url'];?>" title="<?php echo $image['image_url']?>">
<img src="img/photos/<?php echo $image['image_url'];?>" width="75" height="75"/></a>
<?php } ?>
Please let me know if not working