You want to reference a DIV with the prettyPhoyo plugin

Question

You want to reference a DIV with the prettyPhoyo plugin

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I want the prettyPhoto plugin to be invoked by clicking the div class = 'image'.

But I do require that it be by clicking on the div in which I have the image as shown below. Someone help me please. I share the code.

<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>

php css div

asked by Juan Jose 02.08.2018 в 23:58

source

3 answers

How to hide table? Arrays and Dictionaries in JavaScript

score 0 · Answer 1

0

Add the OnClick event

<div OnClick="funcion()">
blablablabla
</div>

answered by 03.08.2018 в 00:05

score 0 · Answer 2

I have not been able to try it but I think this would work for you, add this function with jquery that would add the css and the js of the 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>');
}

And using the onclick event in the div .image active% the function:

<div class="image" style="background-image: url(../image.jpg);" onclick="anadir()"> 
</div>

score 0 · Answer 3

According to prettyPhoto's documentation, you must create an anchor element (the element normally used for links) and add the tag "rel" in this way: (You put it in a similar way, but without the quotes, and that's important). After this, place your image inside the anchor element and configure it to your liking. Finally, you must initialize prettyPhoto, after having called the appropriate css and scripts:

$(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>

Edited August 21, 2018

Seeing that you need the div, what you can do is to nest the elements in the way I show you below. You can change the height of the div that you think is necessary, but it is important that you place a specific height so that the image is displayed properly:)

$(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>