|
Using an iFrame to load pictures like a slider -
01-31-2012, 03:35 PM
I want to share this technique which helps pages loading slowly if you have many images to share. I was using a css3 slider with caption and the load times were horrible. If you only need to show 3 or 4 css3 works fine.
What I did;
1. Create six HTML pages and name them frame1.html, frame2.html, frame3.html, frame4.html, frame5.html and frame6.html. You can have as many as you want, and name them like Turtle-Picture.html also. Size the pages the same as the iframe size. Place your picture on each page.
2. Creat an iframe on your main page and size it to whatever. (500x300) Link this iframe to display your first page frame1.html
3. Open frame1.html and add the following meta tag code below between the head tags. Note that the URL we specified is directing the refresh to page2.html after 12 seconds. You can make it anything. (6 or 10 seconds)
<meta http-equiv="refresh" content="12;url=frame2.html">
4. You are telling page one to refresh to page two after 12 seconds. Make sure that you refresh each page to the next one in your sequence.
5. When you get to your last page, you can create a loop by refreshing back to page one. This viewer will start automatically or you can make a button to load page one in the iframe instead.
6. It's important that you create text links to these pictures if you want visitors to have them on the parent page. iFrame content is often not crawled and indexed. Seperate links will give you that.
If you don't want them indexed you add this code as you did above.
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
Last edited by Visual; 01-31-2012 at 03:47 PM.
|