I have limited space in my server. So, I am looking for an alternative for hooking up image URLs to my site like a product image.
What I would like to do is input an URL then load an image without refreshing the whole page.
Here is my idea:
input "any url" then submit
if url is image and existing {
display the image
}
else if (url is a non-image) or (url is image but not existing) {
display a default image
}
I tried getimagesize but it was so heavy. curl is not functioning on my server, so I am trying to do is use jQuery or JavaScript or something.
At the moment I'm using something like this:
HTML
<img src="http://www.yoursite.com/img/someimage.jpg" onerror="NoImage(this);">
Javascript part:
<script type="text/javascript">
function NoImage(p){
p.src="http://www.yoursite.com/img/nopic.gif";
}
</script>
Hope it helps
use fopen to check if that image exists u dont have to read the full content
http://www.astro.keele.ac.uk/oldusers/rno/Computing/File_magic.html
( u should restrict that possible urls cause auf bandwidth stealing from other pages - and maybe some copyright problems caused by that images )
Related
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 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 google custom search, by default the search box has got background image, I can remove that image, But not able to replace with my image. so Is there a way to do this.
Adding this to my CSS worked for me:
.cse input.gsc-input, input.gsc-input {background-image:none !important;}
Yes! You can do this!
Please find particular id or css for that and then use CSS according to that id or CSS and make sure you add !important at end it will works for you.
To remove the Google Custom search watermark you need to run a java-query infinite looped code it can't be done by adding a one time running code since every time you will click the search input field he code will rerun from the server side and the watermark will reappear.
the exact code you need to do is listed below but to achieve the desired result you must import Jquery liberary file from link jquery.com download/ and link it to your page
to link it to your page do so.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
the actual code to hide watermark is.
<script>
$(document).ready(function() {
setInterval( function()
{
$("#gsc-i-id1").css("background-image","none")
},1/*Time*/);
});
</script>
because the ID of the search box is " gsc-i-id1 " so the code will work even if you click and unclick the field.
Please adjust the time of the function to your preference for better performance better keep it less than 100 mile seconds
check the live performance of code by clicking the link below.
http://jsfiddle.net/atulc007/tHQAD/1/
You have to customize GCSE which is given in your code. To explain in detail, you have to select this url in your code - "http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en". Then paste and search this url in your browser. You will get the sorce code of that java script. In that find an image .gif link and replace with your image and save it as .js file and replace the link and upload. Hope you will enjoy :)
I have some thumbnail images with its larger version.I placed the thumbnail images in a page.Now for link I just gave a link
<img src="thumbnail1.jpg>
but for this I have to make different pages for showing larger one.I want to give a link to show them in a single page.means whenever I will click the thumbnail it will open the larger one in a page with the same url but with its name like
imagegallery.php?news=images/largerimage1/13.jpg
imagegallery.php?news=images/largerimage1/14.jpg
so how to do that?
Pretty basic stuff, I suggest you get to read some PHP tutorials on the internet to get some knowledge on one thing and another.
The ?news= part in your URL is a parameter that can be read by PHP. This type is known as $_GET. To get this part you would need $_GET['news'] so if we'd use your first link and place this inside a script: echo $_GET['news']; the page would say images/largerimages1/13.jpg.
In order to get the image loaded on your website we need some simple steps, I'm changing the news parameter into image, that suits better for your script since it ain't news items:
<?php
// Define the path (used to see if an image exists)
$path = 'your/absolute/path/to/public_html/'; # or wwwroot or www folder
// First check if the parameter is not empty
if($_GET['image'] != "") {
// Then check if the file is valid
if(file_exists($path . $_GET['image'])) {
// If an image exists then display image
echo '<img src="'. $_GET['image'] . '" />;
}
}
?>
Below this script you can put all your thumbnails the way you want. Ofcourse, also for these thumbnails there are some automated options. But I strongly suggest you get a good look at the script above and some beginner PHP tutorials so you completely understand the example given. This still isn't the best method, but it's kicking you in the right direction.
if your imagegallery.php is in root of your domain, you can just add slash as a first char to links like this:
<img src="thumbnail1.jpg>
else you will have to write some php function which it returns BaseUrl of your web. Then it should looks like this:
<img src="thumbnail1.jpg>
maybe you can something like this,
Techincally, there is no thumbnail image, just a stretch version of the regular image
I don't understand which part you don't know how to do:
- the link part?
it should look like
<img src="thumbnail1.jpg>
- or the PHP part (the file called imagegallery.php)?
Basically I have a slightly non-standard implementation of FancyBox. By default you have to include a link to the large version of the image so that the Lightbox can display it. However, in my implementation, the image link URLs point to a script rather than directly to the image file. So for example, instead of:
<a href="mysite/images/myimage.jpg" rel="gallery">
I have:
<a href="mysite/photos/view/abc123" rel="gallery">
The above URL points to a function:
public function actionPhotos($view)
{
$photo=Photo::model()->find('name=:name', array(':name'=>$view));
if(!empty($photo))
{
$this->renderPartial('_photo', array('photo'=>$photo, true));
}
}
The "$this->renderPartial()" bit simply calls a layout file which includes a standard HTML tag to output.
Now when the user clicks on a thumbnail, the above function is called and the large image is displayed in the Lightbox.
Now if the user right clicks on the thumbnail and selects "open in new tab/window" then the image is displayed in the browser as per normal, i.e. just the image. I want to change this so that it displays the image within a layout.
In the above code I can include the following and put it in an IF statement:
$this->render('photos', array('photo'=>$photo));
This will call the layout file "photos" which contains the layout to display the image in.
I have a specific limitation for this - the image URL must remain the same, i.e. no additional GET variables in the URL. However if we can pass in a GET variable in the background then that is OK.
I will most likely need to change my function above so that it calls a different file for this functionality.
EDIT: To demonstrate exactly what I am trying to do, check out the following:
http://www.starnow.co.uk/KimberleyMarren
Go to the photos tab and hover over a thumbnail - note the URL. Click the thumbnail and it will open up in the Lightbox. Next right click on that same thumbnail and select "open in new tab/new window". You will notice that the image is now displayed in a layout. So that same URL is used for displaying the image in the Lightbox and on its own page.
The way StarNow have done this is using some crazy long JavaScript functionality, which I'm not too keen on replicating.
The html link should point to the layout showing the image on a new page by default, e.g.:
<a href="mysite/images/show/123" rel="gallery">
Before the lightbox opens, append a query string to the url in order to distinguish it from the normal link and load the layout for the lightbox. As soon as the image is loaded in the lightbox, change the link back to its original state.
$("a[rel=gallery]").fancybox({
'onStart': function (selectedArray, selectedIndex, selectedOpts) {
var el = $(selectedArray[selectedIndex]);
el.attr('href', el.attr('href') + '?mode=lightbox');
},
'onComplete': function (currentArray, currentIndex, currentOpts) {
var el = $(currentArray[currentIndex]);
el.attr('href', el.attr('href').split("?")[0]);
}
});
You will then have to process the following link in order to return the lightbox layout:
<a href="mysite/images/show/123?mode=lightbox" rel="gallery">
You should be able to modify the JavaScript function that generates the HTML with the <img /> tag to link the image to such a page. Although, if you are trying to make it so that selecting "Open image in new tab" opens a page like this, then that might be impossible (unless there is some sort of crazy cookie/session implementation to alternate between the image script just passing an image and generating a page, which I think could be possible). To assign a new href for the link to have when you click "Open link in new tab" should be quite possible by just modifying the JavaScript function.
Could you clarify what exactly you are attempting to do? Open link in new tab or open image in new tab?
Edit: It appears that the FancyBox script is changing the href of your link to point directly to the image. You would need to find where in the script it is selecting each link tag with rel="gallery" and replacing the href to point to the images; you will want it to not change the href if you want it left as "mysite/photos/view/abc123", for example.
If you need the same functionality the demo site you posted is using, then this is easy to achieve, but keep in mind that the site is NOT using the same URL for both the pop-up and the standalone image page.
Click on any thumbnail with Firebug console is open, you'll notice that it's making an Ajax request to get the image from a different URL! which is an obvious behavior.
http://www.starnow.co.uk/profile/PhotosTrackView.aspx?photo_id=2129864
While the link is pointing to:
http://www.starnow.co.uk/KimberleyMarren/photos/2129864/
you see your links should point to the correct image page, in case of JS disabled browsing or right clicking (as you mentioned) AND using JS to override the link default behavior (which is redirecting you to the image page).
So for example you can have a method that will generate your image layout/page, and this should be used as href; and override the click event of the link to call a similar method (using ajax) but this time it'll retrieve the image itself to use it in your lightbox.