Jquery problem with plugin - php

I have PHP page where users can upload photos (using Ajax & PHP script). Those uploaded photos (thumbs) are shown after upload in DIV below upload field and fancybox plugin (I'm using it for popup window for photos) is working ok then.
Then, after hitting send button I want to clone that DIV at that same page at message board, bellow other messages with or without uploaded photos.
When I try to do that with:
var pht = $("#photos").clone().addClass('p_pht');
and try to display sent photos bellow sent message like this:
$("div#wall").append('<div class=msg>'+ message +'</div><div class=n_pht>'+ pht.html() +'</div>');
Fancybox plugin don't work. Only the link is working but not with popup window as it should be.
What am I doing wrong?

because you've changed the dom the fancybox plugin doesn't know the new elements exist. there are two ways of solving this.
Call the fancybox plugin again when you've finished adding elements
Use jquery live as answered here jquery live & livequery
Hope that helps.

Related

Generate PDF file and send mail

I tried to insert a custom button through the code in the page.php file for each product page in order to connect functionality to this button in the future. In the future, it should look like this: click on the button, call the window for sending by mail a generated pdf file with a photo gallery on this page (if this is even possible). I'm new to wordpress and not closely related to web development, but I have a task in front of me and I'm trying to find a solution. I've tried adding a button through the function.php file by hook woocommerce_after_single_product_summary and i did it. I have only button for every product page. this is my code
add_action('woocommerce_after_single_product_summary',function(){
printf('<button class="send_button">SEND PDF</button>');
}
);
But now after click on this button i need to call window for sending by mail generated pdf file (like pdf attachment with a photo gallery on this page). Please help me to suggest how I can do this without plugin. Thank you very much in advance.

image upload with Ajax and without Submit button in Codeigniter

I'm using Codeigniter. I need to upload Avatar image for my site. I need to upload image with Ajax and Jquery. But NO need Submit button. When I click upload->open it's directly goes to upload via ajax/jquery.
Here after only im going to start my code. If you want sample code, use this link.
Note: (looks & functions) It's should same for all browser.
and I don't want any uploader package.
Thanks...

Loading gif overlay when php page is processing

I have a link that loads a php page full of processing images and overlays using imagemagick. Is there a way to have the current page you are on have a loading please wait overlay where it overlays or lets user know to wait?
I have seen this attached to an image but not when you click a link to a page. It's not a form submission either which I've seen solutions for.
Thank you
There is a very good Jquery plugin to achieve this. It is called Queryloader. It acts like a page preloader. Refer the below link,
Query loader - Page preloader
try to send a request to the content page through ajax on document.ready function and show the loading image and when the content of that page is received hide the image and show the content.

Fancybox change url

I have a pinterest style gallery. I want to make it so when you click on the images it opens a fancybox with a larger image and then comments and other stuff below it in a box. But I want each image/ image fancybox to have it's own url so people can share the links and stuff. Any Ideas on how to do that?
Thanks in advance
Just use fancybox as default. When the onComplete event is raised, manipulate the DOM and serach for the fancybox container and just append the comments and stuff.
You can change the url in the browser with HTML5 history.
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
And then on full page load you can get the url with window.location and modify the DOM to fit your need.
There are kinda two ways:
1. like Facebook does: http://spoiledmilk.dk/blog/html5-changing-the-browser-url-without-refreshing-page
2. like Twitter does:
you can access and change the #-part of url using location.hash
//example.com/
location.hash = 'foo'; //becomes example.com/#foo
I would go about this by creating a PHP script that takes in the id of the image e.g. outputimage.php?id=123 and then outputs the html of the image, comments etx. This script could be called with a jQuery ajax call that requests the html from the script and then places it in the fancybox div.
Another page called image.php?id= that again takes in the id of the image and uses outputimage.php to display the html in a separate page layout. This page would then be your standalone layout.

Jquery Webcam Redirect after upload

I am new to JQuery and PHP, and I am trying to implement a jquery webcam in a site, I used this tutorial to implement one, http://tutorialzine.com/2011/04/jquery-webcam-photobooth/. I succesfully integrated it and the upload to file system works, My problem is how can I force redirect a page after clicking the upload button?
Any help will be greatly appreciated,
Use window.location = "http://....";
You have to place it in the function that "saves" and places the image in the grid because if you bind the Button just to redirect, it is possible that the image will not be saved

Categories