Mostrar una vista previa de una página al situarse sobre un link

[alaynsync]

Hola a todos, tengo una polémica y es que quiero lograr algo que ya se va haciendo bastante popular, puesto que en una gran mayoria de sitios que visito cada vez que me sitúo sobre un vínculo, o bien me muestra en un cuadro una vista previa de la página que se va a cargar al hacer click sobre dicho vínculo, o me muestra un cuadro con una página web pequeña, nada grande, con alguna que otra opción, buscador, etc. El cuadro que se me muestra lo he visto hasta con efecto de transparencia, o sea, se puede percibir lo que hay detrás.

Sé que hay una extensión de WordPress para lograr eso, pero no quiero hacerlo por ahí, porque de hecho pretendo usarlo y no con Wordpress.

A decir verdad no sé si se logre con PHP, XHTML, CSS, Javascript, AJAX, etc. Si alguien me pudiera ayudar le estaría eternamente agradecido.

PD: Ante todo aclaro que esto no tiene nada que ver con lograr un efecto hover tooltip el cual se logra con javascript y el cual es muy bueno por cierto, esto es otra cosa, es una página con links y todo, todo dentro de la vista previa que se muestra al situarse sobre un link.

Saludos.

[skatomundo]

yo lo he hecho con CSS.

[alaynsync]

skatomundo el objetivo es que comentes como lo hicistes, no en qué lo hicistes.

[gvargas]

Aqui esta la solucion: http://www.snap.com/

Y creo que es gratis

Simplemente te dan un codigo en javascript que colocas en tu <HEADER>


Y listo.....

Todos tus links que sean de otros sitios, se veran en miniatura

Saludos

[Calisco]

Si ... pero lo que el muchacho pide es como hacerlo, no como copiarlo.
Personalmente creo que se complica la instancia de capturar la imagen del link. No me imagino como, pero preguntando se puede llegar a algo bueno.

[MaBoRaK]

loading...........


Lo que pasa es que para eso es necesario hacer WEBSERVICES... osea llman con ajax al servidor ... el mismo que hace webservices a una aplicacion PYTHON que te captura la imagen y te devuelve la imagen..... asi que con javascript, css, php, NO SE PUEDE.


connection closed.

[MaBoRaK]

loading..........


o en ruby

Código PHP:

  require 'net/http'
require 'rubygems'
require 'xmlsimple'

class Nailer

  @@api_baseurl = 'http://webthumb.bluga.net/api.php'
  @@api_key = 'PUT YOUR API KEY HERE'
  
  attr_accessor :collection_time, :job_id, :ok

  def initialize(url, width = 1024, height = 768)
    api_request = %Q{<webthumb><apikey>#{@@api_key}</apikey><request><url>#{url}</url><width>#{width}</width><height>#{height}</height></request></webthumb>}

    result = do_request(api_request)

    if result.class == Net::HTTPOK
      result_data = XmlSimple.xml_in(result.body)
      @job_id = result_data['jobs'].first['job'].first['content']
      @collection_time = Time.now.to_i + result_data['jobs'].first['job'].first['estimate'].to_i
      @ok = true
    else
      @ok = false
    end
  end

  def retrieve(size = :small)
    api_request = %Q{<webthumb><apikey>#{@@api_key}</apikey><fetch><job>#{@job_id}</job><size>#{size.to_s}</size></fetch></webthumb>}
    result = do_request(api_request)
    result.body
  end

  def retrieve_to_file(filename, size = :small)
    File.new(filename, 'w+').write(retrieve(size.to_s))
  end

  def ready?
    return unless Time.now.to_i >= @collection_time

    api_request = %Q{<webthumb><apikey>#{@@api_key}</apikey><status><job>#{@job_id}</job></status></webthumb>}
    result = do_request(api_request)

    if result.class == Net::HTTPOK
      @ok = true
      result_data = XmlSimple.xml_in(result.body)
      begin
        @result_url = result_data['jobStatus'].first['status'].first['pickup']
        @completion_time = result_data['jobStatus'].first['status'].first['completionTime']
      rescue
        @collection_time += 60 
          return false
      end
    else
      @ok = false
    end

    true
  end

  def ok?
    @ok == true
  end

  def wait_until_ready
    sleep 1 until ready?
  end

  private

  def do_request(body)
    api_url = URI.parse(@@api_baseurl)
    request = Net::HTTP::Post.new(api_url.path)
    request.body = body
    Net::HTTP.new(api_url.host, api_url.port).start {|h| h.request(request) }
  end
end
  


url = 'http://www.rubyinside.com/'
t = Nailer.new(url)

if t.ok?
  t.wait_until_ready
  t.retrieve_to_file('out1.jpg', :small)
  t.retrieve_to_file('out2.jpg', :medium)
  t.retrieve_to_file('out3.jpg', :medium2)
  t.retrieve_to_file('out4.jpg', :large)
  puts "Thumbnails saved"
else
  puts "Error"
end  
   

http://snippets.dzone.com/posts/show/3621

connection closed.

[MaBoRaK]

loading...........



connection closed.

[Calisco]

No tengo experiencia en RoR. Es muy complicado implementarlo ?. Saludos.

[gvargas]

Eso, yo creo que debemos consumir esos servicioes Web que estan disponibles y no preocuparnos por redescubrir el hilo negro.

Bueno, en mi caso me preocupo mas por las reglas de negocio y tomo lo que ya está hecho para "maquillar" la aplicación.

Claro que sería muy interesante un ejercicio de esa naturaleza.

Un saludo

[Calisco]

Lo que no me gusta a mi es la publicidad ... implementarlo yo mismo sería buenisimo, y luego compartirlo para que gente como vos lo implemente sin saber ni como ni porque funciona.

[gvargas]

Decir que que se use lo que ya esta hecho no necesariamente significa desconocer la forma y el como se ejecuta,

Por supuesto que antes de implementar algo se debe averiguar la forma en la que trabaja,

Pero creo que discutir esto no es parte del tema inicial.

Un saludo