I'm making a webpage that needs to switch between background images on a page, where the user can click on back and forth arrows to sift through each background while browsing.
For each background there needs to be a dynamic description for each image.
For example, the user may load the page and see the body background with a description for what it is, and then click on the right arrow and the background changes, along with the description for the new background.
Does anyone know of a way to implement this, or know of a plug in that already does it?
jQuery Tools, probably Tabs.
Easy to set up, lightweight, encourages good HTML, and completely customizable via CSS.
Why don't you try Supersized?
Seems to be exactly what you are -were- looking for!
Related
need to provide an "add from existing" functionality for uploaded images. What is a basic approach to do that? Thought of displaying a modal window but thought that if there will be a lot of images it will definitely pull back the performance. Had anybody a similar task? Thanks.
I've done this once before, and the best way is to generate thumbnails for each photo to browse in a modal window. You'd also be best off by trying to have some kind of folder architecture, and even have a sort function (date added?).
Have a look at the jQuery File Tree plugin, you might be able to script something off of that (ex: every time you click an image it is append to a div on the page for a preview)
I want to make a button generator with javascript in my site, something like this http://css-tricks.com/examples/ButtonMaker/ .
But I want to add a save button too, so that the user will be able to save the button image he creates. I want to save the image in my server with PHP if possible.
Does anyone have an idea, of what should I really read or search for?
Thanks in advance
The button in the example generator is rendered by your browser. It is just a button element which is styled. I don't think you can easily save it using php.
What you could do is create a button generator that accepts parameters and then renders the image serverside (using php) and sends it to the browser for displaying. This rendered image can then easily be saved.
The link you've provided just defines the CSS for the element - you just eed to send this back to the server - via a form or ajax.
One approach would be to send the css settings to your server and execute an html renderer which somehow allows you to save a screenshot of the button.
Googling for "html renderer" yields several results, but I can't tell whether any of them offers an API that allows you to easily save images of desired elements.
(Of course, Firefox and Chrome all count as html renderers too).
In the worst scenario, using my approach, you'd have to render the button server side, take an screenshot and use some algorithm to find and cut the button from the screenshot.
I'd say this is a complicated approach overall. I'd go with what Iljaas' says.
In my page I give a certain size to a DIV with jQuery, based on the size of the last tweet that I retrieve through PHP.
Problem : I need to use jQuery(window).bind("load", function() in order for jQuery to "see" the size of the tweet, but then, I can see the resizing (perfomed my jQuery) in front of my eyes and I dislike it. I want the page to appear in its final state.
Is that possible ?
You have two options. 1) Start off with your tweet element hidden, then show/fade it in when everything is loaded.
2) My preferred solution is to call the $.blockUI() plugin as soon possible, and then $.unblockUI when everything has loaded. The blockUI plugin also has a facility for blocking only certain elements rather than the whole page, there is a demo here
You can always let it render at a top margin of -1000px and then pop it back down, or perhaps z-index it underneath something else.
Some browsers have problems "seeing" hidden divs while some can do it, but it's unrelible so best bet is to render it outside the canvas.
What I'm trying to do is load a website on a frame and then mark points on it depending on screen coordinates obtained via a function.
Do I need PHP GD?
Loading the website on the frame is not an issue. It's how to mark points on the screen that's causing my hair to fall
Nah, what you need are absolute positioned HTML elements.
You can grab the page with PHP with curl or file_get_contents() and inject some HTML/CSS into it that creates absolutely positioned <p>s or <span>s or whatever.
Checkout this post here. It uses Mootools(a JavaScript framework), PHP, and MySQL. I think it's very similar to what you are trying to do except you want to mark points on the iframe instead of doing it on an image. The plugin can be attached to an element:
David Walsh's Mootools Heatmap
This question is a bit open at the moment as I'm not sure the idea is even possible.
So far I've loaded an image from a url, and then used jQuery UI draggable feature to allow the user to drag html text (which has been replaced using cufon font replacement) over the top of the image.
The major step (which is what my question relates to) is being able to take the image and text layered over the top of the image, and save the result, either to the server, or potentially offer the option to save the altered image to the user's HD, or what would also be useful is to upload to facebook using the facebook API, but this is something I know is possible.
It all hangs on whether it's even possible to achieve the first step, which is to save the image and layered text as a combined image?
I wonder if there is a PHP/jQuery solution that would allow me to do this?
My suggestion would be to have an internal URL that outputs the final image using jQuery and PHP, then take a screenshot using webkit2png of that page. You should know the dimensions etc., so you'll be able to crop down the resulting screenshot to just the region you're looking for.