I am making a website to keep track on my moviecollection. I have a page called "list.php" which lists all my movie titles. Each title is clickable. When you click the movie, an ajax function will retrieve information about the movie from another file called getmovie.php. Then a div expands and the information is being placed inside the expanded div. That was quite easy to make. To make the site more fancy I want to switch the background of list.php to be a poster from the "clicked" movie. The database stores the path to this poster, and getmovie.php will get that. But how can I change the background in list.php to a path being stored in getmovie.php?
Basicly I have a variable containing a path to an image I want to set as background in another file. How am I supposed to code that?
Thank you :)
I think you could use javascript to change document.body.background when you call the ajax function. For example, in the playMovie() function:
document.body.background = "images/movie01.jpg";
Hope it's useful.
As I tested with different methods, It is not possible to set a page's background from another page. However you can set the image from the page itself. You should do 2 ajaxs.. First you should get the text with a simple ajax as you have done that already. and Second get the background. write a php script that gets a movie input and displays ONLY the image url in the browser and then do an ajax and set the background of the new page using the retrieved url.
Related
I'm new to using the FB share buttons terminology so forgive me if I use the wrong syntax in describing this.
My site is setup to load pages based on the passed parameters in the URL (...?page=somepage&imageid=idnum).
So I have my index file which contains my head, as well as sidebar, etc. Then my main body is generated according to the passed parameter. Simple Enough.
On the homepage, the main body is a gallery of images. When they click on one of those images it takes them to a page that just displays that one image. The page is loaded with parameters of ?page=detail&image_id=1 /*or whatever the id of that image is */
So when they click on the share on FB button on those individual images page, I would like it to populate with the image that is displayed on that page. What I have done is included a php file in my head tag. The php script included gets the page info and passed parameters and then fills out the image url based on the imageid.
echo '<meta property="og:image" content="http://www.chiseledimages.com/clients/vote/'.$imgurl.'"/>';
This works in that when displaying the page source, the meta tag with og:image shows perfectly, also in that when I run it through the FB Object debugger, it gets the correct image and doesn't show me any errors. It even posts the correct image when the users shares on their wall. What is does not do, is show the correct image in the pop window after the uses presses the share button on my site. So even though the result is what I want, the problem with the user not seeing the correct image in the share pop-up, may lead them not to want to share on their wall.
Current location of site: http://www.chiseledimages.com/clients/vote/
Example of a specific pages: http://chiseledimages.com/clients/vote/?page=detail&angel_id=1
Screenshots of pop-up with wrong image, but final posted story having correct image.
How can I make the image in the pop-up match the image that is going to be shared. Thanks.
Edit: I forgot to mention and I'm sure it matters that I'm using Addthis to implement the FB share.
Check https://developers.facebook.com/docs/reference/dialogs/feed/ - look for the 'picture' parameter description
I suggest to you use this http://support.addthis.com/customer/portal/articles/1365475-attribute-based-configuration#.UwPQB6LW6So. just follow their example and you good to go.
I have built a blog system where each entry has an associated image file. I have created a php upload for this system and can get everything onto the server. When I write each blog post I have a row in my database which stores the filename of the image, so I could, if I knew the filename already, just type it in.
What I want to do is on my blog post form, instead of being able to type the file name, I want a button to click on which opens a window with all my images in it, then I can click on one and have that filename sent back to the form.
I suppose I could use AJAX to do this but it seems over complicated. Does anyone know of a good way to achieve this.
By default when a webpage is loaded, images are loaded one single time for each image. If you have 5 instances of the same image on a page, that image is loaded once, and then used in all 5 places seemingly from the cache of the first image load.
What I want to do is have a single image displayed 5 times on a page, and each time the images is called have it re-loaded.
The reason for this is I have an image that is called from a database and each time the image is called it loads a different picture. Now this works perfectly when refeshing the page, but not when the image is loaded multiple times on the same page.
For example if I put the following into a webpage:
<img src='http://bannerpillar.com/u/viraladmin.jpg'>
The image loads perfectly. If I reload the page, a different picture is displayed for each time the page reloads. However if I add the image to a page in 2 different locations, the same one picture is displayed from both locations.
How can I make it so the image is refreshed every time it is called on a page? Is that possible?
Try adding something to the end of the file reference, like this:
<img src='http://bannerpillar.com/u/viraladmin.jpg?<?=rand(11111,99999)?>'>
The browser will think each image is unique and load each one separately rather than using the image from cache.
You can find a tutorial on this exact question here:
http://www.marcofolio.net/webdesign/php_random_image_rotation.html
Basically, in the src, you call a php file. The php file loads a filename from a directory of images.
For your case, you would need to write some logic to offset the database return, so this becomes a mysql question as well?
If you wanted the markup to call for an image file, you could redirect using a .htaccess rewriterule
Random no. generetion can be a good option.
but more better if you load those images serially i.e. one after another
n u can use looping for that.
Add a ?rand= to the image url.
<img src='http://bannerpillar.com/u/viraladmin.jpg?rand=<?php echo rand(100000,999999); ?>'>
At the top of my new WordPress Theme for a radio website, I want to have a DIV at the very top of the page which contains a small flash player which will play the radio stream.
I would like this DIV to be static and NOT reload every time the user changes pages. What would be the best way to accomplish this?
Please provide a working demo on jsFiddle or something like that.
I think there are two ways to keep the music going
Either you use frames, so top frame(preferably 0px height) never
change and play the music
or you can build your whole site with ajax you only change what you need to change and don't touck the player.
you can try it with ajax that you just pull the content on page change request via ajax and fill you DOM(except music player part) as per your requirement and then you need not to reload your music player.
Other wise if your music player code is the part of you http request then not one can stop it's re-loading.
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.