1

Quiero que al dar click al div class= 'image' se invoque el plugin prettyPhoto.

Pero requiero que sea clickeando el div en el que tengo la imagen como se muestra a continuación. Alguien que me ayude por favor. Les comparto el código.

<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css"> 
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>  
<div class="image" style="background-image: url(../image.jpg);" rel=prettyPhoto> 
</div>

3 respuestas 3

0

Agrégale el evento OnClick

<div OnClick="funcion()">
blablablabla
</div>
1
  • No funciona de esta manera
    – Juan Jose
    el 2 ago. 2018 a las 22:18
0

No he podido probarlo pero creo que esto te funcionaría, añades esta función con jquery que añadiría el css y el js del plugin:

function anadir(){
     $("head").append('<link rel="stylesheet" type="text/css" 
     href="css/prettyPhoto.css">');
     $("head").append('<script type="text/javascript" 
     src="js/jquery.prettyPhoto.js"></script>');
}

Y mediante el evento onclick en el div .image activas la función:

<div class="image" style="background-image: url(../image.jpg);" onclick="anadir()"> 
</div>
1
  • No funciona, pero igual gracias por el aporte
    – Juan Jose
    el 17 ago. 2018 a las 17:03
0

Según la documentación de prettyPhoto, debes crear una elemento anchor (el elemento utilizado normalmente para los links) y añadirle la etiqueta "rel" de esta forma: rel="prettyPhoto" (Tu la colocaste de forma similar, pero sin las comillas, y eso es importante). Despues de esto, situa tu imagen dentro del elemento anchor y configurala a gusto. Por ultimo, debes inicializar prettyPhoto, luego de haber llamado los css y scripts adecuados:

$(document).ready(function() {
  $("a[rel^='prettyPhoto']").prettyPhoto();
});
<a href="https://www.w3schools.com/w3css/img_lights.jpg" rel="prettyPhoto">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" width="200" height="200" alt="This is the title" />
</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/css/prettyPhoto.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min.js"></script>

Editado 21 DE Agosto de 2018

Viendo que necesitas el div, lo que puedes hacer es anidar los elementos de la forma que te muestro más abajo. Puedes cambiar el height del div al que tu creas necesario, pero es importante que le coloques un height específico para que se muestre la imagen adecuadamente :)

$(document).ready(function() {
  $("a[rel^='prettyPhoto']").prettyPhoto();
});
<div class="image" style="background-image: url(https://www.w3schools.com/w3css/img_lights.jpg); height: 200px; position: relative;">
    <a href="https://www.w3schools.com/w3css/img_lights.jpg" rel="prettyPhoto" style="position: absolute; height: 100%; width: 100%">
    </a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/css/prettyPhoto.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min.js"></script>

6
  • Es una buena respuesta pero no da solución a mi problema, porque necesariamente se debe ejecutar el script al dar click sobre el <div> que contiene la imagen y no sobre un enlace.
    – Juan Jose
    el 17 ago. 2018 a las 17:04
  • Exactamente, que quieres hacer? Estas hablando de sobreescribir la funcionalidad del plugin. Solo se activará si haces click en un elemento <a>. Digo, que efecto quieres lograr para que tenga que estar dentro de ese <div>?
    – Cenlan
    el 20 ago. 2018 a las 14:16
  • Cenlan saludos, el asunto es que estoy trabajando sobre una PLANTILLA que tiene configurado la imagen dentro del div tal cual como está en el codigo. De manera que estoy limitado a trabajar sobre el div. Me entiendes?
    – Juan Jose
    el 21 ago. 2018 a las 19:24
  • Te entiendo, edite mi respuesta anterior a ver si ahora te funciona
    – Cenlan
    el 21 ago. 2018 a las 20:35
  • 1
    Correcto. Me Funciona!!!!
    – Juan Jose
    el 28 sep. 2018 a las 19:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.