Implementing JavaScript/JQuery on Image Library

Question

I am looking for implementing solution using JavaScript/jQuery in Image Library (SP 2013) to view image with one color and after clicking on it, it should show up all the different colors. For example I have 15 calculator images of different color. And I would like to keep black as default color before I clicks to view all other colors.

Answer 1

Use a naming scheme [basename]_[color].png for all Library images.

Use CSR - Client-Side-Rendering on a View, or Display Templates when you use the Search Query WebPart

• The JavaScript will loop over all (search)Items (thats what CSR or DT code does by default)

• return empty HTML for non [default] images to display only the default images
  record these non-black images in a [basename] array

• return HTML+JavaScript for [default] images to:

  • display [black] image

  • onclick: display all the images in the associated array

This is all basic JavaScript CSR/DT code

The onclick part is where your UX-design creativity is required, in the simplest form you don't return blank HTML for non-default images but hide them with display:none

Answer 2

I have got an idea, just try it up. Hope it will works

1. Create a Image library
2. Add two fields to it Front Image -> Single Line of Text, Link to Front Image -> Single line of text. We will be using these fields to query items.
3. Add the black image of calculator and set the value of the above fields. Front Image as blackcalculator and Link to Front Image as blackcalculator. The blackcalculator is a token to find the group of images of same family.
4. Now add the remaining 14 calculator images of different colors. For all the images set the properties Front Image as empty/blank and Link to Front Image as blackcalculator.
5. Create a new page and add a Javascript to it.
6. The Javascript will access the image library and fetch the items which has Front Image field is set with a proper value and not null or empty.

7. Build a HTML in the below format using the Javascript and embed it in the page content. The token 'blackcalculator' is the value of Front Image which will be used as a token.

8. The token 'blackcalculator' should be used as a token to query all the other images for which the Link to Front Image field is set as blackcalculator.

9. Open a page using modal dialog, which will display all the images that belongs to the blackcalculator family.

Check it out and let me know if it helps you.

HTML Format of front image in the page:

<a href="#" onclick="OpenModalDialog('blackcalculator')"> <img src="/ImageLibrary/calculatorblack.jpg" /> </a>