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.
Related
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.
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.
does anyone have an idea on how I could capture the image id when a user clicks the next / previous button in Fancybox? I like how Fancybox changes depending on the size of the image so I prefer to use this over some of the other galleries that I have seen. Has anyone successfully done this? The site is in PHP.
The general idea would be to "proxy" your images by a PHP script.
This script would:
add 1 to the view count of the image
serves the image to the browser (instead of serving an HTML page as usual)
You would then update the src attribute of your pictures img tag :
<img src="mypicture.png"/>
would become
<img src="view_picture.php?picture=1"/>
Note that you must be careful and not authorize a filename in the picture parameter and/or carrefully check that the user is not trying to see a file that you don't want to show him (think view_picture.php?picture=../.htpasswd )
Consider using a general website analytics software, like Piwik. This will give you additional insights on you visitors and their actions on your site, rather than a simple image view counter.
I am running a site that uses Fancybox and Piwik, all image views through Fancybox will automatically show up in the Downloads section of Piwik reports without any additional configuration.
But you could easily customize this through Fancybox's onComplete callback and Piwik's trackPageView(). See Piwik Javascript API and Fancybox API for details.
I have a website that allows a user to save text content and then display it as is.
The user can use HTML tags to create his data the way he wants - design, fonts, divs, tables and so on...
To display the data been saved I direct the user to a page with a header/footer of my own and he's data in the middle. The problem happens when the user has some invalid HTML tags or un-closed ones, then it interfere with my own header/footer HTML and the whole page gets messed up.
Is there a way to encapsulate the user's data so it would not harm the page?
You can try to load it in iframe. Haven't tested it, but I think it should work.
you can use iframe with fixed width and height.
The Iframe suggestion are good but was not enough. Because i wanted it to show like it was a part of the page and I didn't know what is the length and size of the user data, the solution i've used is like that:
Created a page that shows the user data alone. Opened it in an iframe which was located between my main page header and footer.
Now for the trick - for when the user has a lot of data, to avoid scroll bars in the middle of the page i have used this script on the iframe onload event:
function setHeight()
{
//get page height
var the_height=
document.getElementById('userFrame').contentWindow.document.body.scrollHeight;
//set iframe height
document.getElementById('userFrame').height=the_height;
}
This way, when the page loads, the iframe height will change according to it's size, pushing the footer to the bottom.
After that just needed to set the iframe border to "none" and the page looks normal.
In my web site I have an iframe tag with several little images, when I pass my mouse (onmouseover) I show the more large image (tooltip) but only a liitle part is showed due the iframe.
There is someone that can tell me how show the tooltip into iframe over the parent page?
(without use JQuery)
Thanks a lot
I have implemented a jQuery solution for tooltips inside iframe
Here is the code:
https://github.com/TeamTypeform/Tooltip