edits to README

README.md

@@ -18,13 +18,15 @@ To use plugin, follow these steps:
 
 3) Copy and paste the following and add it to the appropriate section of your HTML (it can technically be added anywhere, but only needs to be added once):
 
+```
         <div class="pop-up-frame">
             <button class="pop-up-exit-button">
                 <span class="cross-one"></span>
                 <span class="cross-two"></span>
             </button>
             <img class="zoomed-img" src="">
         </div>
+``` 
 
 4) Copy and paste the rules in `style.css` to your project's CSS file (Exclude the `.pop-up-image` rules, and make the nessecary style changes to match your project)
 
@@ -34,7 +36,17 @@ To use plugin, follow these steps:
 
 6) Add [Data Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) to the images you wish to enlarge in your HTML (As written, `imagePopUp.js` uses `data-prod=""`, but this can be changed to suit your project)
 
-7) In `imagePopUp.js`, change and add `if` statement(s) in `setImage(target)` to match the [Data Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) created in Step 6, and then change `zoomedImg.src` and `zoomedImg.alt`  to match the pathway(s) and alt-text of your image(s)
+7) In `imagePopUp.js`, change and add `if` statement(s) in `setImage(target)` to match the [Data Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) created in Step 6, and then change `zoomedImg.src` and `zoomedImg.alt`  to match the pathway(s) and alt-text of your image(s):
+
+```
+    const setImage = (target) => {
+        if (target.dataset.prod === '[YOUR DATA-* HERE]') {
+            zoomedImg.src = '[YOUR PATHWAY HERE]';
+            zoomedImg.alt = '[YOUR ALT-TEXT HERE]';
+        }
+        if .... [OTHER STATEMENTS IF NEEDED]
+    }
+```
 
 ## Questions