How can I manipulate image in browser with jquery when the image is retrieved with:
http://slideshopro.com/dunlap-hall-entry-tower/wp-content/uploads/sites/621/2014/06/DSC02599.jpg?imageOnly=true
I tried to put:
if($_GET['imageOnly'] == true) {
?>
<script type=text/javascript>
jQuery(document).ready(function($) {
console.log('image');
}
</script>
<?php
}
in index.php and in functions, but I could not get it to run.
Hard to tell exactly what you are asking here, but if you are talking about manually manipulating the image, that will be tough to do with jQuery alone, especially if you want to do something with the manipulated image. You will need to work HTML5 Canvas.
I suggest you check out fabric.js, they created a powerful and simple Javascript HTML5 canvas library.
Related
Is there any way to add the fullscreen option to the PDF that is embedded using iframe ?
<iframe src="http://www.web.com/test.pdf"></iframe>
You can't reliably control the PDF experience unless you replace the default viewer of the browser. They all behave slightly differently. However, the new free Adobe DC View SDK is a client-side JavaScript PDF viewer that will allow you to embed a PDF in your HTML page and it has a full-screen option. By using this viewer, the PDF will behave consistently and have a consistent UI across all browsers.
The code would look like this...
<div id="adobe-dc-view" style="height: 360px; width: 500px;"></div>
<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
<script type="text/javascript">
document.addEventListener("adobe_dc_view_sdk.ready", function(){
var adobeDCView =
new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
adobeDCView.previewFile({
content:{location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
metaData:{fileName: "Bodea Brochure.pdf"}
}, {embedMode: "SIZED_CONTAINER"});
});
</script>
You can get the clientID here.
https://www.adobe.io/apis/documentcloud/dcsdk/viewsdk.html
Adobe DC View SDK kept throwing errors constantly for some reason. So I tried Mozilla’s PDF.js and seems to be working just fine, even on mobile.
I'm creating a slideshow where I'm displaying images based on their urls. I've used PHP to extract the image urls from web pages and I've used JavaScript to display them in a slideshow format. Only thing is, the first picture takes a lot of time to load so I decided to cache the urls by storing them in a text file, but I don't know how to read the urls from the text file in my JavaScript bit?
Could anyone point me in the right direction as to how I should proceed. I couln't find anything helpful online.
My JS code is like this:
<script language="JavaScript1.1">
var slideimages=new Array()
slideshowimages("<?php echo join("\", \"", $image_urls); ?>") <--this is where I was initially echoing the array or image urls from php, but it proves slow for the first few images
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
var slideshowspeed1=30000
var whichimage1=0
function slideit1(){
if (!document.images)
return
document.images.slide1.src=slideimages[whichimage1].src
if (whichimage1<slideimages.length-1)
whichimage1++
else
whichimage1=0
setTimeout("slideit1()",slideshowspeed1)}slideit1()
</script>
Thanks!
Why are you pulling from an external website? You generally will get a lot more speed if you pull them locally. I do believe that once it pulls the images once or so, it will cache for users when it shows up again. What you could do is to use that list you pull and create the images hidden on the page so they load with the page. Then when going through the slideshow, the user should have had time to cache the images and the slideshow will have sped up.
Just make a CSS class known as hidden and visability:hidden;it. Most browsers will still try to load the data.
I have some WebGL stuff in an iframe. On some web browsers or old computers, the iframe isn't loading. When this happens I'd like to load an image instead. Is it possible and if yes how to do it ?
Thanks
Wether or not WebGL is supported is probably best checked the same way you do in Javascript
WebGLRenderingContext gl = canvas.getContext("experimental-webgl")
if(!gl)
{
$("#image").show()
}
Problems in <script>:
First of all it seems that you have some problems within your <script> tag. There is plain <center><iframe ... HTML tags inside <script> tag which does not work as there should be only javascript here. There is also some missing ; semicolons.
Solutions to detect WebGL:
You could try this one but I also recommend checking out linked sites at end of my answer:
?>
<script type="text/javascript">
if (!window.WebGLRenderingContext) {
var myImage = new Image();
myImage.src = "http://domain.tld/picture.jpg";
$(myImage).prependTo(document.body);
} else {
$(document.body).prepend('<center><iframe ALLOWTRANSPARENCY="true" frameborder="0" height="340" width="454" src="CORRECT THIS FIELD"></iframe></center>');
}
</script>
<?php
Just add echos for PHP and correct <iframe src="CORRECT THIS FIELD"> attribute, also set image url to something that really exists.
In place of document.body you could use for example '#myWebGLArea' and add <div id="myWebGLArea"></div> to your page.
More on topic:
Also check out WebGL detection script at https://gist.github.com/1709384 and another Q/A https://stackoverflow.com/a/9904965/1338846
I have these two php variables: $img1src and $img2src, (them being PHP is irrelevant as you can echo a php variable anywhere) they both hold a URL of an image. I was wondering if I was able to preload these images, or cache them.
My goal is: when someone refreshes the page I want these pictures to instantly appear in a <img src >.
I'm not going to provide specific code, because I don't want to give you a fish, but rather show how google is a fishing pole.
I googled "php cache images tutorial" just to see what would come up. Below is a great resource.
http://dtbaker.com.au/random-bits/how-to-cache-images-generated-by-php.html
Can't get much better than that.
Caching an image isn't really a job for PHP. PHP should be used to decide whether or not to display it. (There are caching things you can do with PHP, but not in the same sense.) Essentially, what you want to do is make the clients browser request the second image. Once the browser gets the image, it should automatically send an "if-modified-by" parameter in the header. Next time you load the page, the response code should be 304 and your image should load instantly. You can choose from a variety of ways to do this. Load the image with javascript after the page has loaded (to prevent additional load time) or you can just include an image tag that is hidden on the page some where.
I also haven't tested it, but you might be able to send an ajax request to the image directly. I'm not sure if that way would cache it or not.
EDIT:
This isn't the most elegant solution, but it should get the idea across.
JS Example:
<?php
session_start();
if (!isset($_SESSION['graphic'])) $_SESSION['graphic'] = "http://www.tomsfreelance.com/laptop/DSC_0011.JPG";
else $_SESSION['graphic'] = "http://www.tomsfreelance.com/laptop/DSC_0012.JPG";
?>
<html>
<head>
<script>
function loadImage() {
document.getElementById('preload').style.backgroundImage = "url(http://www.tomsfreelance.com/laptop/DSC_0012.JPG)";
}
</script>
</head>
<body onload="loadImage();">
<div id="preload" style="display: none;"></div>
<img src="<?php echo $_SESSION['graphic'];?>">
</body>
</html>
Sure you can, try this javascript:
var image1 = new Image(), image2 = new Image();
image1.src = <?php echo $img1src; ?>;
image2.src = ?<php echo $img2src; ?>;
That should preload the image so when you append an img tag to the DOM the image should appear right away.
If your aim is to make less http requests overall: you can try CSS Sprites and/or Data Url methods of displaying these images. These methods will be the most effective when the images are smaller.
I have a flash banner that I want to replace with a static image if the clients browser doesn't have flash enabled.
I was wondering if I can do this with php - or if anyone knows of a good method
Thanks
Allow the <object> (your Flash movie) to degrade:
<object width="640" height="480">
<param name="movie" value="yourflash.swf">
<img src="yourimage.png">
</object>
This will show the image if the Flash video can't load, too.
You can only do this with javascript, using the navigator.plugins interface. Something like:
if(typeof navigator.plugins['Shockwave Flash']!=='undefined'){ }
However, a far more reliable solution that doesn't require any javascript would be simply to position your fallback image "behind" the flash object so that if the flash doesn't turn up, the image will show through. You can either put an <img/> tag inside the flash <object/> or you can put a CSS background-image on the object.
http://code.google.com/p/swfobject/
This is what I use when i need to embed flash and it checks for relavent support and what elements are needed.
I don't think you can check with PHP, you can do it with javascript or Actionscript from SWF file. Here is the official detection kit:
http://www.adobe.com/products/flashplayer/download/detection_kit/
You could use SWFobject
With SWFobject you display alternative code by default, e.g.
<div id="myContent">
<p>Alternative content</p>
</div>
This is then replaced where possible with flash content like this:
<script type="text/javascript">
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
</script>
It does have a dependency on JavaScript though which is its only major drawback