Posts tagged javascript
Simple Image Slideshow with jQuery and PHP
Sep 1st
I really liked Jon Raasch’s jquery-powered slideshow, but integrating it into a page requires a bunch of steps:
- Add the jQuery library
- Add the slideshow javascript function
- Add the CSS with opacity and z-layer set properly
- Upload the images for the slideshow someplace
- Enumerate the images’ URLs that you want to cycle through
Adding images is tedious (you have to upload AND update the image list), and there’s no clean support for multiple slideshows per page. I wanted a process that made integration into other pages trivial.
I decided that an IFRAME to host the slideshow would keep jQuery and the slideshow CSS partitioned away from the rest of the embedding page, and would let adding slideshows to new pages have an easy-to-follow recipe, no matter what was already going on in the existing page. The IFRAME needed the template HTML, and if I used PHP, I could generate the image list for the slideshow automatically from the images that live in the same directory as the PHP script.
Friendly Popups
Jan 20th
If you want a link to open a new window, and can’t use target=”_blank”, you can set javascript to the onclick attribute and make the href go to “#”, but then you can’t ctrl-click the link to open it in a new tab, nor can you see where the link is going in the status bar. Here’s a solution inspired by quirksmode:
<a href="/some/link.html" onClick="return pop(this)">
Here’s the code for pop():
/*
Inspired by http://www.quirksmode.org/js/popup.html
If you want to override the name of the popup window (NOT the title of
the popup), add a "name" attribute to the link.
If you want to override the window features of the popup, add a
"windowfeatures" attribute to the link.
*/
function pop(link) {
var windowfeatures = 'scrollbars=yes,top=100,left=200,height=250,width=450';
if (link.getAttribute('windowfeatures')) windowfeatures = link.getAttribute('windowfeatures');
name = 'pop';
if (link.getAttribute('name')) pop = link.getAttribute('name');
newwindow = window.open(link.href, name, windowfeatures);
if (window.focus) {
newwindow.focus();
}
return false;
}