| Sign in: |
| Members log in here with your user name and password to access the your admin page and other special features. |
|
|
|
|
|| SportsShooter.com: Member Message Board
Javascript/Coding Question...
Derek Montgomery, Photographer
 |
Duluth | MN | USA | Posted: 8:41 PM on 12.09.09 |
->> Hello. I did some before/after photos of a local park before the big snowstorm came through the Midwest and I'd like to do something like this....
http://www.boston.com/bigpicture/2009/03/earth_hour_2009.html
More specifically, I was hoping to replicate the ability to click on a photo and then have it fade into another photo like they do on the link above. I know a little about javascript, but not much and was hoping those who know more about this can point me in the right direction. I realize you can do this to a degree by embedding Photoshelter galleries, but I'd rather have it appear and operate like in the link above. Thanks! |
|
Joe Andras, Photographer
|
Orange County | CA | USA | Posted: 4:16 PM on 12.12.09 |
->> Hi Derek,
Thanks for the link. I've done some javascript programming, but was unaware of this particular use.
It looks to me that the page was generated by some webpage program, but I distilled it down to figure out that it uses DIV tags to create overlapping layers. The layers are positioned over one another, and the javascript is used to fade the top picture in and out.
Here's an example using the javascript from the page you linked, with a couple of JPGs called ON and OFF:
http://www.teamandras.com/temp/example.html
You can use "View-Source" to see the underlying HTML stuff, but just in case, here's a JPG of the underlying HTML and javascript from inside of an editing program (the colors make it a bit easier to read).
http://www.teamandras.com/temp/JPEG_of_HTML_Page_with_Javascript.jpg
Hope this helps.
Regards,
Joe |
|
Derek Montgomery, Photographer
|
Duluth | MN | USA | Posted: 6:19 AM on 12.14.09 |
->> Hey Joe. Thanks so much for responding. I did not see this response until really late obviously. I see how it works with the code and was able to reproduce it on a static HTML page. I'm using a Wordpress blog and this presents its own problems. To implement this on a blog, what changes would I need to make?
I really appreciate the help! Thanks!
Derek |
|
Joe Andras, Photographer
|
Orange County | CA | USA | Posted: 1:45 PM on 12.14.09 |
->> Derek, I have never created a blog using Wordpress, but a quick search of their forums suggests that you're out of luck there because javascript is not allowed.
http://en.forums.wordpress.com/search.php?q=javascript
The only workaround I can think of is putting a link on your blog that goes to a different server you control - one that lets you use javascript - and then have the photos fade in and out on that linked page. |
|
Joe Andras, Photographer
|
Orange County | CA | USA | Posted: 1:59 PM on 12.14.09 |
->> By the way, you could put one of your two photos inside of the link on your blog so that clicking the text or the photo itself fires up the new page, i.e. inside of the "anchor" tab as follows:
<a href="some new page with javascript" target="new"><img src="Photo#1"><br>Click the photo above to see the before and after shots</a> |
|
Return to --> Message Board Main Index
|