# Capturing SharinPix Selection Event

The present article shows how to detect whether one or more images have been selected in the SharinPix Album.

## Selection event

Whenever an action is performed on a SharinPix Album, a corresponding JavaScript event is emitted. In this case, whenever one or more images are selected , the `images-selected` event is emitted.

{% hint style="success" %}
**IMPORTANT:**

The `images-selected` event is also emitted whenever one or more images are **deselected**.
{% endhint %}

## Capturing SharinPix Event

```javascript
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function(e) {
        if(e.origin !== "https://app.sharinpix.com") return;
        if(e.data.name === 'images-selected') {
            console.log('Selection Event detected!');
        }
    });
```

The above code checks if the currently-emitted event is `images-selected` . The event is identified through its attribute `name` which is found in the event data (`e.data.name`).

{% hint style="info" %}
**Info:**

The event data contains an attribute **payload** (`e.data.payload`) which contains extensive data on the selected image(s).
{% endhint %}

## Example: Display the number of selected images

This section will show the implementation of a Visualforce Page that will **detect** and **display** the number of images selected in a SharinPix Album. This example only serves as a way to give you a sense of what can be done with SharinPix events.

## Visualforce Page

The code snippet below shows the implementation of the Visualforce Page used in this example.

```html
    <apex:page StandardController="Account" standardStylesheets="false">
      	<div id="counter">0</div>
        <SharinPix:SharinPix height="600px"
                             parameters="{
                             	'Id': '{!CASESAFEID($CurrentPage.parameters.Id)}',
                                'abilities':{'{!CASESAFEID($CurrentPage.parameters.Id)}':{
                                'Access': {
                                    'image_delete':true,
                                	'image_upload':true,
                                    'image_list':true,
                                    'see':true
                                    }
                                  }
                                }
    						 }"
    	/>
        <script>
        	var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        	var eventer = window[eventMethod];
        	var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
        	eventer(messageEvent, function(e) {
                if(e.origin !== "https://app.sharinpix.com") return;
                if(e.data.name === 'images-selected') {
                	document.getElementById('counter').innerHTML = e.data.payload.images.length;
                }
            });
        </script>
    </apex:page>
```

* The Visualforce Page is added to the record page of the **Account** object. Since no images have been selected from the SharinPix Album, the counter (indicated in the screenshot below) displays a **"0".**

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2FZqrj8E2hIuIKmmJvMB9Y%2F1_1.png?alt=media&#x26;token=937cfa09-e4de-46d8-bb92-ef884ac82693" alt=""><figcaption></figcaption></figure>

* When one or more images are selected, the counter displays the corresponding value.

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2FajW1MQBN8BV1QWGn3cRN%2F2_2.png?alt=media&#x26;token=9e7e16da-ae41-4879-a1ef-dd81bca04dd8" alt=""><figcaption></figcaption></figure>

* When an image is deselected, the counter reacts accordingly.

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2FS6meGazE03waIXuU4oDt%2F3_3.png?alt=media&#x26;token=15b199b1-7033-4be4-87e0-3ba7521123fd" alt=""><figcaption></figcaption></figure>
