> For the complete documentation index, see [llms.txt](https://docs.sharinpix.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sharinpix.com/documentation/integrations/events/capturing-sharinpix-selection-event.md).

# 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="/files/I0XxM1DBwPKF1jSdNMtQ" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/5MqAKIIVEmY5riougaqW" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/sCAEtFRQWc9xJMzzbPCM" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.sharinpix.com/documentation/integrations/events/capturing-sharinpix-selection-event.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.