navy1985 / picrary

Library that replaces the image by the alt text provided by the user

PICRARY

---

• Track: Common Core
• Course: JS Deep Dive: Create your own library using JavaScript
• Module: Final Product

---

INTRODUCTION

Picrary is a library, a tool that is going to help the programmers with their work. The result of this library is an effect (it can be a hover, mouseover, etc) that acts whenever the cursor of the mouse is over an image. When this happens it is going to appear the alt text that the user decides to type over the image.

---

DEVELOPED FOR:

---

OBJECTIVE

To use a jQuery plugin that once given a container it needs to find all the images inside the container and replace them for a new element, in this case <figure> that contains the image <img> and also a <figcaption> with the alt text or attribute of the image.

---

Technology Tools

HTML 5

CSS 3

Boostrap

JQuery Library

Javascript

Babel

Node.js

---

Example of How it Works

Watch the Video

How to Use

• The user needs to install the library with: npm install picrary.

• To add this plugin to your project you need these script tags in your html file:

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
<script src="node_modules/picrary/lib/picrary.js"></script>
<script>$('.picrary').picrary();</script>

• Type the text you want it to appear in the alt attribute, so when the mouse is over the image it can be replaced by the text you typed.

Developed by

• Nadya Salazar aka Navy
• The weirdo gypsy Ada