Anyone know what this effect is called?

  • JustABob
  • Graduate
  • Graduate
  • JustABob
  • Posts: 160

Post 3+ Months Ago

if you head over to http://reddit.com/ and hit one of those arrows to vote, a page will pop-up and ask you to log in. I couldn't tell if it was flash or just part of javascript / ajax / dom type stuff.

Anyways if anyone knows either what the effect is called, how to do it, or knows of some tutorials I'm all ears.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Breeze
  • Photographer
  • Guru
  • User avatar
  • Posts: 1029
  • Loc: Australia

Post 3+ Months Ago

Looks like Javascript to me ... I'm not really strong in that area though so I'll leave it to someone else to explain.

Wow, I really hate their design though. I want to give it several thousand paper cuts in the webbings of its fingers and I want to pull its eyelids off.
  • JustABob
  • Graduate
  • Graduate
  • JustABob
  • Posts: 160

Post 3+ Months Ago

Yeah, its not a pretty site, but the effect is repeatable. Some sites will have the popup form thing the first time you show up, but a cookie or something prevents it on future visits.

I was guessing javascript, but thought I'd see if anyone had references prior to spending a couple hours trying to reverse engineer their script.
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

I saw something really similar when I was first playing around with lightbox. It might be motools. Which is just javascript. Right? Not a strong point for me either. But not Flash.
  • JustABob
  • Graduate
  • Graduate
  • JustABob
  • Posts: 160

Post 3+ Months Ago

Well I think I've figured it out, or at least a way of getting it done. I was looking through the one that tek-tips uses and their code was readable. It looks like they are using a script from dynamic drive to show and bounce a form/div into place.

I don't need the movement, so its more a matter of positioning the form, hiding it then having some javascript show it. I can use ajax to change to content of the div based on what the user is doing. The faded background can be done by again using javascript to switch the body from one css style to another predefined one. ie document.body.className = 'fade'; or className = ''; to return it back to normal. You just have to give the body tag an id='body'

Much simpler then I was expecting, hopefully this may give some others a few ideas.
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

This might help:

http://orangoo.com/labs/GreyBox/


or this one:

http://www.pjhyett.com/posts/190-the-li ... t-lightbox

here's a host of other javascript scripts: http://miniajax.com/

in my many years ( 1 year total ) of fumbling through the crazy thing they call the web, I've only used lightbox photogallery script. but this looks really interesting.
  • JustABob
  • Graduate
  • Graduate
  • JustABob
  • Posts: 160

Post 3+ Months Ago

very cool. Overkill for my needs, but I'm bookmarking that one for the future!
  • FettesPS
  • Beginner
  • Beginner
  • FettesPS
  • Posts: 42
  • Loc: Canada

Post 3+ Months Ago

lol... reddit was the last site I was at before this one :D
I check that site a dozen times a day :D
  • claireo
  • Beginner
  • Beginner
  • claireo
  • Posts: 62
  • Loc: Coventry

Post 3+ Months Ago

Ok i know exactly how to do this with images -

If you take a look at the following sites product page (http://www.silvertabbytrading.com/) then you will find this code attached to each small picture:
Code: [ Select ]
<td width="25%" height="40"><a href="photos/a1.jpg" rel="lightbox" title=""><img src="photos/a1m.jpg" border="0" alt="j1m" width="80" height="40" /></a></td>


This gives the info on the picture displayed, and what to display when it is clicked on.

You also need some javascript to go with it which is linked as in the head tag:
Code: [ Select ]
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
  3. <script type="text/javascript" src="js/lightbox.js"></script>


You will find a copy of these scripts at the following locations
http://www.silvertabbytrading.com/js/prototype.js
http://www.silvertabbytrading.com/js/scriptaculous.js
http://www.silvertabbytrading.com/js/lightbox.js

I hope this helps! i have never tried adding text, but i cannot imagine this being a problem.

Claire
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

claireo,

I think it's Thickbox, not Lightbox...
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

This can be done very easily with some short Javascript and the css display:none tag...
See here:
http://www.garryschriml.com

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 52 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.