CODEWITHSUNDEEP
javascriptjquerybloggersrcjquery-lazyload
Quinn Favo
Quinn Favo

Reputation: 86

Issue loading jquery within blogger

On the linked page I am having trouble running code with jquery and .lazy. https://quazmoz.blogspot.com/p/exercise-generator.html

It gives an error stating jquery and .lazy are undefined, even though they are listed in the sources within inspect element.

It works perfectly fine when opened locally or on a mobile device. In chrome, edge, and firefox, the same error occurs. On multiple different computers on different networks the same error occurs.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title></title>

<style>
    img.placehold{
        width: 150px;
    }
    img.exercise_gif{
        width:150px;
    }
    div.ex_block{
        display:inline-block;
    }
    img.placehold:active{
        border-style: dotted;
    }
    .title_block{
        font-size: 23px;
        padding: 0px 4px;
        margin: 0 auto -1.5rem auto;
        line-height: 50px;
        max-width: 50%;
        background-color: rgba(0,0,0,.4);
        border-color: transparent;
        border-radius: 10px;
    }
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.4/jquery.lazy.min.js"></script>
<!-- HTML5 Support for old ie browsers -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>

<!--Placeholders for exercises-->
<div class="ex_block" onclick="blockSelect(0);">
    <a><img class = "placehold" id = "exercise_1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Pictograms-nps-land-exercise-fitness-2.svg/2000px-Pictograms-nps-land-exercise-fitness-2.svg.png"></a>
</div>

<div class="ex_block" onclick="blockSelect(1);">
    <a><img class = "placehold" id = "exercise_2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Pictograms-nps-land-exercise-fitness-2.svg/2000px-Pictograms-nps-land-exercise-fitness-2.svg.png"></a>
</div>

<div class="ex_block" onclick="blockSelect(2);">
    <a><img class = "placehold" id = "exercise_3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Pictograms-nps-land-exercise-fitness-2.svg/2000px-Pictograms-nps-land-exercise-fitness-2.svg.png"></a>
</div>

<div class="ex_block" onclick="blockSelect(3);">
    <a><img class = "placehold" id = "exercise_4" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Pictograms-nps-land-exercise-fitness-2.svg/2000px-Pictograms-nps-land-exercise-fitness-2.svg.png"></a>
</div>

<div class="ex_block" onclick="blockSelect(4);">
    <a><img class = "placehold" id = "exercise_5" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Pictograms-nps-land-exercise-fitness-2.svg/2000px-Pictograms-nps-land-exercise-fitness-2.svg.png"></a>
</div>

<div class="ex_block" onclick="blockSelect(5);">
    <a><img class = "placehold" id = "exercise_6" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Pictograms-nps-land-exercise-fitness-2.svg/2000px-Pictograms-nps-land-exercise-fitness-2.svg.png"></a>
</div>

<br>

<!-- Exercises to be chosen and placed into placeholders -->
<button onclick="putPics();">
Load Images (WARNING! High bandwidth and RAM usage)
</button>

<div class = "title_block">
Lower Body Exercises
</div>

<br>
<br>


<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "db_bench_neutral" src = "" data-src="https://4.bp.blogspot.com/-5hVNrJuBuhg/WLBEvAOocpI/AAAAAAAANIE/BxPDgcook7MwLR96rXmzR9VsoVDhB7N6ACLcB/s1600/neutral%2Bgrip%2BDB%2Bbench.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "wall_sit" data-src="https://3.bp.blogspot.com/-UklKhO3qEp0/WfihW2XnSzI/AAAAAAAAlxE/M-RwRdDRVzICe6doTan2Gemz4ltcg6FIQCLcBGAs/s1600/Quinn%2Bchair%2Bsit_1.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "lunge_rotation" data-src="https://2.bp.blogspot.com/-NmLWWhs74Lc/WfihU2zVqgI/AAAAAAAAlw8/Lns7QrXT288jiK9w4Yr6nMELhfkA2XRqgCLcBGAs/s1600/Lunge%2Bwith%2Btorso%2Brotation%2BQuinn%2B_1.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "pb_thrust" data-src="https://4.bp.blogspot.com/-eaOdMDY_9mQ/WfihVLD62zI/AAAAAAAAlxA/VMgptWiFm4QSt4lkAom8An5kYzc9zk0QgCLcBGAs/s400/Physioball%2Bhip%2Bthrusters_1.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "singledb_overhead" data-src="https://3.bp.blogspot.com/-3hIwJGH1s0A/WfihXUhTjGI/AAAAAAAAlxM/-gD_Oy6dB7Q-xb2o9gWri4adVx-YK0TgwCLcBGAs/s400/Quinn%2Bsingle%2BDB%2Boverhead%2Bpress_1.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "supinated_row" data-src="https://1.bp.blogspot.com/-S7Q-AdDH-iA/WfihYRFJHiI/AAAAAAAAlxQ/Q7TM2s0D3ZwtpFGb61okCDtyWbYw4GwRgCLcBGAs/s400/Quinn%2Bsupinated%2Brow_1.gif"></a>
</div>
<!--
<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "bag_lunge" data-src="https://1.bp.blogspot.com/-ZL0prZiS5zs/WZwnLhA-FEI/AAAAAAAAedo/bBzrUQk2Mtwd8_wdZnjuQnSDHkLrKJgGQCLcBGAs/s1600/lunge%2Bwith%2Bbag.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "adductors" data-src="https://4.bp.blogspot.com/-eLYw_E-uXko/WZwnYP2v5gI/AAAAAAAAeds/ufupVPenXBUl_HMMS9OOyeT40j54QidFgCLcBGAs/s1600/front%2Bangle%2Badductors.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "ham_glute_bridge" data-src="https://3.bp.blogspot.com/-9t1Y5Z0Fvp8/WZwoSdgah1I/AAAAAAAAeeE/lCymndM2xpM683pe8lw5_IVKe8VA0H1hQCLcBGAs/s320/hamstring%2Bglute%2Bbridge%2BQuinn.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "ext_rot_stretch" data-src="https://1.bp.blogspot.com/-xda75fkzrdc/WfihXfAoYbI/AAAAAAAAlxI/K4OjcvjzXoA7n8zBlCDMsea3QYqMPs-5QCLcBGAs/s320/Quinn%2Bexternal%2Brotator%2Bstretch%2B_1.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "cat_camel" data-src="https://2.bp.blogspot.com/-NRfcJuvUU84/WYnnp8-C05I/AAAAAAAAbxA/i-Gu7N9nzJM3JDMg5bX720xLrNQ2chF1QCLcBGAs/s1600/catcamel.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "supported_crunch" data-src="https://2.bp.blogspot.com/-UW355qvc6MQ/WY38IgUGvcI/AAAAAAAAc7A/QVoJaLy6N-YOSMrGLh1hmPqVO3OoWSQ0QCLcBGAs/s1600/giphy-downsized-large.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "supported_obliques" data-src="https://3.bp.blogspot.com/-qWUfeXhLsJs/WY3-zfh1cRI/AAAAAAAAc70/tMZFizb3GF8oXXByNc-SdBjyU0W5ORWNQCLcBGAs/s1600/oblique%2Bmodified%2Bcrunch.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "hip_closers" data-src="https://4.bp.blogspot.com/-g6pjXenT6v0/WYDkH9xfdEI/AAAAAAAAbiM/znr5kT8nj7wJbjRqhvxhCVQ_EjBoSqMRACLcBGAs/s320/hip%2Bclosers.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "hip_openers" data-src="https://4.bp.blogspot.com/-yRAWM9OPrvk/WYDkKiVETMI/AAAAAAAAbiU/7QBXkSaWTyE0FmCFaw4FH-ipCL1x3mmfACLcBGAs/s320/hip%2Bopeners.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "6inches" data-src="https://4.bp.blogspot.com/-5AlXhAyG_70/WYDkIY3hmNI/AAAAAAAAbiQ/RBv884cCMFcm6BORA46ezTnbJfvWfwXIwCLcBGAs/s200/6%2Binch%2Bkillers.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "side_plank" data-src="https://4.bp.blogspot.com/-FlmzbV09fRY/WYDkH5QxkZI/AAAAAAAAbiI/UA1CD6VbawokcNQHTaPQrEdbGVjsxip4wCLcBGAs/s1600/front%2Bangle%2Bside%2Bplank.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "pb_squat" data-src="https://2.bp.blogspot.com/-8xb3aZ0kvac/WYDkRvdVuYI/AAAAAAAAbiY/BtuNmUAd_N4Hy5xAC29fzanPCUOdlHB3gCLcBGAs/s1600/physioball%2Bsquat.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "bw_shoulder_press" data-src="https://2.bp.blogspot.com/-gyfGpmIy6v4/WYDx1zMtZ7I/AAAAAAAAbi4/jfsamNGKuAodqiSlCend8KNlXg0l328QgCLcBGAs/s1600/side%2Bangle%2BBW%2Bshoulder%2Bpress.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "pb_chest_press" data-src="https://4.bp.blogspot.com/-k4rHsg90RlM/WYDx0xeM_nI/AAAAAAAAbi0/FYLDyss3L0EJGHf4Gv9Ef06gVBF0bwS4gCLcBGAs/s1600/physioball%2Bchest%2Bsqueeze%252Bpress.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "seated_row" data-src="https://3.bp.blogspot.com/-4Ilfr0QUnAc/WYDx13TeQYI/AAAAAAAAbi8/OMWXluTCVUwFYbbQff5BgBMJdU6Zv7nJwCLcBGAs/s1600/seated%2Brow.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "db_curl" data-src="https://1.bp.blogspot.com/-grUwf3miHNM/WYDxzzFGW7I/AAAAAAAAbiw/JH0jbfnMpFkOxmQTze2Y98f12veU-EVzwCLcBGAs/s1600/DB%2Bcurl.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "hip_flexor_stretch" data-src="https://1.bp.blogspot.com/-19VECxLQs_g/WYDzJjnhTvI/AAAAAAAAbjE/xkcMKzIlT9UKf0dtWxeQPTx7Ir7fO45OwCLcBGAs/s1600/hip%2Bflexor%2Bon%2Bground.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "outer_hip_stretch" data-src="https://3.bp.blogspot.com/-jLeo-GVn-bU/WYDzJtiycGI/AAAAAAAAbjI/qoaNkhIrjqwhIXN56j4BDlJyAt1WJxlqwCLcBGAs/s1600/hip%2Bpull%2Bacross.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "knee_to_chest" data-src="https://2.bp.blogspot.com/-0mndK1KqtxU/WYDzJlhoXPI/AAAAAAAAbjM/rS3zwrVKJrw4DLCcqolJupWL95SiBpGdQCLcBGAs/s1600/knee%2Bto%2Bchest.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "plank" data-src="https://1.bp.blogspot.com/-Z1uFJ5q2nOY/WYD0G7SgmlI/AAAAAAAAbjU/LY8jIk333sMt6Rtq757tMuU8_OxiGY1eACLcBGAs/s1600/side%2Bangle%2Bplank.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "hip_rocks" data-src="https://4.bp.blogspot.com/-BY8Q4zUG9gQ/WW9_4loDWZI/AAAAAAAAZoU/zwHadO8e-9MLsGIjctlsSw6co7bHIJUfACLcBGAs/s1600/giphy-downsized-large.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "weighted_situp" data-src="https://2.bp.blogspot.com/-81o5U56DLII/WVELaN7LtkI/AAAAAAAAXAs/H5HB_k9uHRUUo0yZP_WIHRe5Dl6TbC1NQCLcBGAs/s320/DB%2Bab%2Bpush%2Bwith%2Bbands.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "knee_pushup" data-src="https://3.bp.blogspot.com/-0eW-sCmuO50/WTq_LAbTPJI/AAAAAAAATxc/pAs184NLpwIFDVIGXPkDfjr1SbPrBVsiwCLcB/s320/giphy%2B%25282%2529.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "leg_extend_crunch" data-src="https://4.bp.blogspot.com/-1__RTw-QnU0/WTq_K_AtExI/AAAAAAAATxY/rbG3UNRGr1YUUJRdG9-QIoxsICgjyJsPACLcB/s320/giphy.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "lying_adductors" data-src="https://4.bp.blogspot.com/-HbG8O_xCFoU/WTq_74-hbfI/AAAAAAAATxw/scXHfzGvXLsH-SSkC_F5wm8Vof__Mp7SwCLcB/s320/side%2Bangle%2Babductors.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "monkeying" data-src="https://2.bp.blogspot.com/-ESxULVzBHmU/WPEPB2S1Z3I/AAAAAAAAPhQ/tVij5ANGU-8aUGM5VTvKJgSgYGoyBtbWwCLcB/s1600/pullup%2Bbar%2Bmonkey%2Bbars.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "handstand" data-src="https://1.bp.blogspot.com/-cjEusrza0Rk/WPESJcGqDcI/AAAAAAAAPh4/6i9OqGPTQH0SAsfdBxRLMYiFyV6cWdHYgCLcB/s1600/handstand%2Blongest.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "pullup_bar_jutouts" data-src="https://1.bp.blogspot.com/-0yOLDMI0rJA/WPEPAe3o73I/AAAAAAAAPhI/V8W-SD09HFA5cwuaT1mcT9zp5s24DtJigCLcB/s1600/pullup%2Bjut%2Bouts.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "pillball_pushup" data-src="https://2.bp.blogspot.com/-JaA9PYFpcN4/WPESKVEJ_oI/AAAAAAAAPiA/phAWXekP-igX3T5UUlqL4acv8PjkKfjiQCLcB/s1600/pill%2Bball%2Bpushup.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "tire_flip" data-src="https://1.bp.blogspot.com/-RdHxP71HKR4/WPEPCBL3t2I/AAAAAAAAPhU/2TxeVtFjTJMHHmTkDUv4E-xJOl9Xgbj-gCLcB/s1600/tire%2Blift.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "bag_grab" data-src="https://3.bp.blogspot.com/-DsjBwtIpHME/WPESMgftbvI/AAAAAAAAPiE/ee7XLmbzEVkzb_yMA4ChI_akK0iJRW9tQCLcB/s1600/punching%2Bbag%2Bhug.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "alt_grip_trx_row" data-src="https://2.bp.blogspot.com/-y9Wv9Q8f-d0/WOPf7gujsfI/AAAAAAAAPLw/zzRHXGb-A3Y_RKZy1iXIDFNWWTQ7PeU3QCLcB/s320/alternating%2BTRX%2Bpulls.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "band_sprints" data-src="https://1.bp.blogspot.com/-UoTeC7ZR3EU/WNKiQNELJEI/AAAAAAAAOZU/unHx4fpqZFgYhLufstmKELFo3Crrt2eTACEw/s1600/band%2Bsprints.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "hula_hoop" data-src="https://4.bp.blogspot.com/-60Vo7DxCJ0Q/WNKiQabA5II/AAAAAAAAOZU/O2-vZUtGsikfbP3RIOtc0MwdgoXT-A56gCEw/s1600/hula%2Bhoop.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "granny_shot" data-src="https://1.bp.blogspot.com/-6RTrVQRF-q4/WNvCens0qgI/AAAAAAAAOe0/scKCMr7O5yMsqEpzmIIkbSVyW4caVeAnACLcB/s1600/small%2Bball%2Bgranny%2Bshot.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "pillball_throws" data-src="https://3.bp.blogspot.com/-YQ91zd8xobw/WNvCe0bRWRI/AAAAAAAAOe4/BCun9RmIm_Q9qvkPgSj9HleAbdQZxlQAQCLcB/s1600/pill%2Bball%2Bthrow.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "shot_put" data-src="https://2.bp.blogspot.com/-DEARJpwCXcg/WNvChW8y7bI/AAAAAAAAOfA/dyTTLa25_bEryNGC79ZIdhZq4NJi7aWdwCLcB/s1600/small%2Bball%2Bthrows.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "bosu_jumps" data-src="https://1.bp.blogspot.com/-gPvYbMnIOAQ/WNvCe-u71uI/AAAAAAAAOe8/gDyMKFsJVKYUlukfM1eER_kuflUOejH3QCLcB/s1600/bosu%2Bball%2Bjumps.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "pike_jump" data-src="https://4.bp.blogspot.com/-D4F0Mc3fAKE/WMxFDxTD-3I/AAAAAAAAOYQ/PxIIWN5cauQjmDdB1ooHRgDg_3pnXk5qgCLcB/s1600/side%2Bangle%2Bside%2Bpike%2Bjump.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "pilates ring" data-src="https://3.bp.blogspot.com/-UY0NsiUsVXM/WMxFEnPKKOI/AAAAAAAAOYk/XeGpfigUQDwc19reALvA2JD1Y5n6B7X5gCEw/s1600/Rosie%2Bpilates%2Bring.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "pb_bosu_plank" data-src="https://2.bp.blogspot.com/-GLkccBa2g90/WMxFLx6-b0I/AAAAAAAAOYk/Q9GHcaVhPDMYK3etSAOh1IXF7YXFLqZYACEw/s1600/physio-bosu%2Bball%2Bplank%2BQuinn.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "reverse_crunch" data-src="https://4.bp.blogspot.com/-oKPZm4mtgP0/WMxHrTkXkOI/AAAAAAAAOYs/Kxq1bTcsP3wSEVpROGg2Jc8jt6nHf7kIwCLcB/s1600/side%2Bangle%2Btoes%2Bto%2Bceiling.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "side_stepups" data-src="https://3.bp.blogspot.com/-fTmbeJSm7R0/WMxBvtosL7I/AAAAAAAAOX0/TtJHLLOxpkssJW62gjZPL_QPBMYgWYpXgCEw/s1600/side%2Bbox%2Bstep%2Bup.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" id = "bosu_jump" data-src="https://2.bp.blogspot.com/-hL-hF6ewEnQ/WMxDO3nvIlI/AAAAAAAAOYA/CyUUi0WNxC05-ZJiHZWdwZsfwYDAr8rdgCLcB/s1600/bosu%2Bjump%2Bwarmup.gif"></a>
</div>
-->
<!-- Javascript Start -->

<script>
function putPics(){
    $(function() {
        $('.lazy').lazy();
    });
}
</script>

<script>

//declare variables
if (typeof activeGif === undefined){
    var activeGif;
}

var done;

if (done != 0 || done != 1 || done != 2 || done != 3 || done != 4 || done != 5){
    done = 0;
}

//image selector function, grabs href from mouse position
$("img").mouseover(function(){
        activeGif = $(this).attr("src");
        console.log(activeGif);
    })

//reassigns putExercise function target based on user input
function blockSelect(done_1){
    done = done_1;
    if (done_1 === 0){
        $("#exercise_1").css( "border-style", "dotted");
        $("#exercise_1").css( "border-width", "1px");
    }
    else if (done_1 === 1){

    }

}

//fill img with user choice using function
function putExercise(){

switch(done) {
    case 0:
        $("#exercise_1").attr("src", activeGif);
        done += 1;
        break;
    case 1:
        $("#exercise_2").attr("src", activeGif);
        done += 1;
        break;
    case 2:
        $("#exercise_3").attr("src", activeGif);
        done += 1;
        break;
    case 3:
        $("#exercise_4").attr("src", activeGif);
        done += 1;
        break;
    case 4:
        $("#exercise_5").attr("src", activeGif);
        done += 1;
        break;
    default:
        $("#exercise_6").attr("src", activeGif);
        console.log(done);
}
}

</script>

</body>

Upvotes: 1

Views: 421

Answers (2)

Rafv
Rafv

Reputation: 261

Why use lazyload js on blogger? You can use this simple way to load lazy image image on blogger

<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://1.bp.blogspot.com/-unwE3oGY_D8/WhRg7pQa9GI/AAAAAAAADks/kesfXqR_uD49IZd_3CtG4Goz0reBvHDQQCLcBGAs/s1600/ajax-loader%2B%25281%2529.gif",effect:"fadeIn",threshold:"-50"})})
//]]>
</script>

Upvotes: 1

Quinn Favo
Quinn Favo

Reputation: 86

The issue appears to be related to another jquery widget running on the page (Random Exercise Generator).

After including the .lazy CDN within the Random Exercise Generator widget in addition to the page html code for "Exercise Generator", the code runs fine. I still get a jquery undefined error but the app runs normally.

Below is the code for the page:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title></title>

<style>
    img.placehold{
        width: 150px;
    }
    img.exercise_gif{
        width:150px;
    }
    div.ex_block{
        display:inline-block;
    }
    img.placehold:active{
        border-style: dotted;
    }
    .title_block{
        font-size: 23px;
        padding: 0px 4px;
        margin: 0 auto -1.5rem auto;
        line-height: 50px;
        max-width: 50%;
        background-color: rgba(0,0,0,.4);
        border-color: transparent;
        border-radius: 10px;
    }
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.4/jquery.lazy.min.js"></script>
<!-- HTML5 Support for old ie browsers -->
    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body>

<!--Placeholders for exercises-->
<div class="ex_block" onclick="blockSelect(0);">
    <a><img class = "placehold" id = "exercise_1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Pictograms-nps-land-exercise-fitness-2.svg/2000px-Pictograms-nps-land-exercise-fitness-2.svg.png"></a>
</div>

<div class="ex_block" onclick="blockSelect(1);">
    <a><img class = "placehold" id = "exercise_2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Pictograms-nps-land-exercise-fitness-2.svg/2000px-Pictograms-nps-land-exercise-fitness-2.svg.png"></a>
</div>

<div class="ex_block" onclick="blockSelect(2);">
    <a><img class = "placehold" id = "exercise_3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Pictograms-nps-land-exercise-fitness-2.svg/2000px-Pictograms-nps-land-exercise-fitness-2.svg.png"></a>
</div>

<div class="ex_block" onclick="blockSelect(3);">
    <a><img class = "placehold" id = "exercise_4" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Pictograms-nps-land-exercise-fitness-2.svg/2000px-Pictograms-nps-land-exercise-fitness-2.svg.png"></a>
</div>

<div class="ex_block" onclick="blockSelect(4);">
    <a><img class = "placehold" id = "exercise_5" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Pictograms-nps-land-exercise-fitness-2.svg/2000px-Pictograms-nps-land-exercise-fitness-2.svg.png"></a>
</div>

<div class="ex_block" onclick="blockSelect(5);">
    <a><img class = "placehold" id = "exercise_6" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Pictograms-nps-land-exercise-fitness-2.svg/2000px-Pictograms-nps-land-exercise-fitness-2.svg.png"></a>
</div>

<br>

<!-- Exercises to be chosen and placed into placeholders -->
<button onclick="putPics();">
Load Images (WARNING! High bandwidth and RAM usage)
</button>

<div class = "title_block">
Lower Body Exercises
</div>

<br>
<br>


<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = "" id = "db_bench_neutral"  data-src="https://4.bp.blogspot.com/-5hVNrJuBuhg/WLBEvAOocpI/AAAAAAAANIE/BxPDgcook7MwLR96rXmzR9VsoVDhB7N6ACLcB/s1600/neutral%2Bgrip%2BDB%2Bbench.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "wall_sit" data-src="https://3.bp.blogspot.com/-UklKhO3qEp0/WfihW2XnSzI/AAAAAAAAlxE/M-RwRdDRVzICe6doTan2Gemz4ltcg6FIQCLcBGAs/s1600/Quinn%2Bchair%2Bsit_1.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "lunge_rotation" data-src="https://2.bp.blogspot.com/-NmLWWhs74Lc/WfihU2zVqgI/AAAAAAAAlw8/Lns7QrXT288jiK9w4Yr6nMELhfkA2XRqgCLcBGAs/s1600/Lunge%2Bwith%2Btorso%2Brotation%2BQuinn%2B_1.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "pb_thrust" data-src="https://4.bp.blogspot.com/-eaOdMDY_9mQ/WfihVLD62zI/AAAAAAAAlxA/VMgptWiFm4QSt4lkAom8An5kYzc9zk0QgCLcBGAs/s400/Physioball%2Bhip%2Bthrusters_1.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "singledb_overhead" data-src="https://3.bp.blogspot.com/-3hIwJGH1s0A/WfihXUhTjGI/AAAAAAAAlxM/-gD_Oy6dB7Q-xb2o9gWri4adVx-YK0TgwCLcBGAs/s400/Quinn%2Bsingle%2BDB%2Boverhead%2Bpress_1.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "supinated_row" data-src="https://1.bp.blogspot.com/-S7Q-AdDH-iA/WfihYRFJHiI/AAAAAAAAlxQ/Q7TM2s0D3ZwtpFGb61okCDtyWbYw4GwRgCLcBGAs/s400/Quinn%2Bsupinated%2Brow_1.gif"></a>
</div>
<!--
<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "bag_lunge" data-src="https://1.bp.blogspot.com/-ZL0prZiS5zs/WZwnLhA-FEI/AAAAAAAAedo/bBzrUQk2Mtwd8_wdZnjuQnSDHkLrKJgGQCLcBGAs/s1600/lunge%2Bwith%2Bbag.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "adductors" data-src="https://4.bp.blogspot.com/-eLYw_E-uXko/WZwnYP2v5gI/AAAAAAAAeds/ufupVPenXBUl_HMMS9OOyeT40j54QidFgCLcBGAs/s1600/front%2Bangle%2Badductors.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "ham_glute_bridge" data-src="https://3.bp.blogspot.com/-9t1Y5Z0Fvp8/WZwoSdgah1I/AAAAAAAAeeE/lCymndM2xpM683pe8lw5_IVKe8VA0H1hQCLcBGAs/s320/hamstring%2Bglute%2Bbridge%2BQuinn.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "ext_rot_stretch" data-src="https://1.bp.blogspot.com/-xda75fkzrdc/WfihXfAoYbI/AAAAAAAAlxI/K4OjcvjzXoA7n8zBlCDMsea3QYqMPs-5QCLcBGAs/s320/Quinn%2Bexternal%2Brotator%2Bstretch%2B_1.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "cat_camel" data-src="https://2.bp.blogspot.com/-NRfcJuvUU84/WYnnp8-C05I/AAAAAAAAbxA/i-Gu7N9nzJM3JDMg5bX720xLrNQ2chF1QCLcBGAs/s1600/catcamel.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "supported_crunch" data-src="https://2.bp.blogspot.com/-UW355qvc6MQ/WY38IgUGvcI/AAAAAAAAc7A/QVoJaLy6N-YOSMrGLh1hmPqVO3OoWSQ0QCLcBGAs/s1600/giphy-downsized-large.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "supported_obliques" data-src="https://3.bp.blogspot.com/-qWUfeXhLsJs/WY3-zfh1cRI/AAAAAAAAc70/tMZFizb3GF8oXXByNc-SdBjyU0W5ORWNQCLcBGAs/s1600/oblique%2Bmodified%2Bcrunch.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "hip_closers" data-src="https://4.bp.blogspot.com/-g6pjXenT6v0/WYDkH9xfdEI/AAAAAAAAbiM/znr5kT8nj7wJbjRqhvxhCVQ_EjBoSqMRACLcBGAs/s320/hip%2Bclosers.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "hip_openers" data-src="https://4.bp.blogspot.com/-yRAWM9OPrvk/WYDkKiVETMI/AAAAAAAAbiU/7QBXkSaWTyE0FmCFaw4FH-ipCL1x3mmfACLcBGAs/s320/hip%2Bopeners.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "6inches" data-src="https://4.bp.blogspot.com/-5AlXhAyG_70/WYDkIY3hmNI/AAAAAAAAbiQ/RBv884cCMFcm6BORA46ezTnbJfvWfwXIwCLcBGAs/s200/6%2Binch%2Bkillers.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "side_plank" data-src="https://4.bp.blogspot.com/-FlmzbV09fRY/WYDkH5QxkZI/AAAAAAAAbiI/UA1CD6VbawokcNQHTaPQrEdbGVjsxip4wCLcBGAs/s1600/front%2Bangle%2Bside%2Bplank.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "pb_squat" data-src="https://2.bp.blogspot.com/-8xb3aZ0kvac/WYDkRvdVuYI/AAAAAAAAbiY/BtuNmUAd_N4Hy5xAC29fzanPCUOdlHB3gCLcBGAs/s1600/physioball%2Bsquat.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "bw_shoulder_press" data-src="https://2.bp.blogspot.com/-gyfGpmIy6v4/WYDx1zMtZ7I/AAAAAAAAbi4/jfsamNGKuAodqiSlCend8KNlXg0l328QgCLcBGAs/s1600/side%2Bangle%2BBW%2Bshoulder%2Bpress.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "pb_chest_press" data-src="https://4.bp.blogspot.com/-k4rHsg90RlM/WYDx0xeM_nI/AAAAAAAAbi0/FYLDyss3L0EJGHf4Gv9Ef06gVBF0bwS4gCLcBGAs/s1600/physioball%2Bchest%2Bsqueeze%252Bpress.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "seated_row" data-src="https://3.bp.blogspot.com/-4Ilfr0QUnAc/WYDx13TeQYI/AAAAAAAAbi8/OMWXluTCVUwFYbbQff5BgBMJdU6Zv7nJwCLcBGAs/s1600/seated%2Brow.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "db_curl" data-src="https://1.bp.blogspot.com/-grUwf3miHNM/WYDxzzFGW7I/AAAAAAAAbiw/JH0jbfnMpFkOxmQTze2Y98f12veU-EVzwCLcBGAs/s1600/DB%2Bcurl.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "hip_flexor_stretch" data-src="https://1.bp.blogspot.com/-19VECxLQs_g/WYDzJjnhTvI/AAAAAAAAbjE/xkcMKzIlT9UKf0dtWxeQPTx7Ir7fO45OwCLcBGAs/s1600/hip%2Bflexor%2Bon%2Bground.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "outer_hip_stretch" data-src="https://3.bp.blogspot.com/-jLeo-GVn-bU/WYDzJtiycGI/AAAAAAAAbjI/qoaNkhIrjqwhIXN56j4BDlJyAt1WJxlqwCLcBGAs/s1600/hip%2Bpull%2Bacross.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "knee_to_chest" data-src="https://2.bp.blogspot.com/-0mndK1KqtxU/WYDzJlhoXPI/AAAAAAAAbjM/rS3zwrVKJrw4DLCcqolJupWL95SiBpGdQCLcBGAs/s1600/knee%2Bto%2Bchest.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "plank" data-src="https://1.bp.blogspot.com/-Z1uFJ5q2nOY/WYD0G7SgmlI/AAAAAAAAbjU/LY8jIk333sMt6Rtq757tMuU8_OxiGY1eACLcBGAs/s1600/side%2Bangle%2Bplank.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "hip_rocks" data-src="https://4.bp.blogspot.com/-BY8Q4zUG9gQ/WW9_4loDWZI/AAAAAAAAZoU/zwHadO8e-9MLsGIjctlsSw6co7bHIJUfACLcBGAs/s1600/giphy-downsized-large.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "weighted_situp" data-src="https://2.bp.blogspot.com/-81o5U56DLII/WVELaN7LtkI/AAAAAAAAXAs/H5HB_k9uHRUUo0yZP_WIHRe5Dl6TbC1NQCLcBGAs/s320/DB%2Bab%2Bpush%2Bwith%2Bbands.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "knee_pushup" data-src="https://3.bp.blogspot.com/-0eW-sCmuO50/WTq_LAbTPJI/AAAAAAAATxc/pAs184NLpwIFDVIGXPkDfjr1SbPrBVsiwCLcB/s320/giphy%2B%25282%2529.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "leg_extend_crunch" data-src="https://4.bp.blogspot.com/-1__RTw-QnU0/WTq_K_AtExI/AAAAAAAATxY/rbG3UNRGr1YUUJRdG9-QIoxsICgjyJsPACLcB/s320/giphy.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "lying_adductors" data-src="https://4.bp.blogspot.com/-HbG8O_xCFoU/WTq_74-hbfI/AAAAAAAATxw/scXHfzGvXLsH-SSkC_F5wm8Vof__Mp7SwCLcB/s320/side%2Bangle%2Babductors.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "monkeying" data-src="https://2.bp.blogspot.com/-ESxULVzBHmU/WPEPB2S1Z3I/AAAAAAAAPhQ/tVij5ANGU-8aUGM5VTvKJgSgYGoyBtbWwCLcB/s1600/pullup%2Bbar%2Bmonkey%2Bbars.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "handstand" data-src="https://1.bp.blogspot.com/-cjEusrza0Rk/WPESJcGqDcI/AAAAAAAAPh4/6i9OqGPTQH0SAsfdBxRLMYiFyV6cWdHYgCLcB/s1600/handstand%2Blongest.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "pullup_bar_jutouts" data-src="https://1.bp.blogspot.com/-0yOLDMI0rJA/WPEPAe3o73I/AAAAAAAAPhI/V8W-SD09HFA5cwuaT1mcT9zp5s24DtJigCLcB/s1600/pullup%2Bjut%2Bouts.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "pillball_pushup" data-src="https://2.bp.blogspot.com/-JaA9PYFpcN4/WPESKVEJ_oI/AAAAAAAAPiA/phAWXekP-igX3T5UUlqL4acv8PjkKfjiQCLcB/s1600/pill%2Bball%2Bpushup.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "tire_flip" data-src="https://1.bp.blogspot.com/-RdHxP71HKR4/WPEPCBL3t2I/AAAAAAAAPhU/2TxeVtFjTJMHHmTkDUv4E-xJOl9Xgbj-gCLcB/s1600/tire%2Blift.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "bag_grab" data-src="https://3.bp.blogspot.com/-DsjBwtIpHME/WPESMgftbvI/AAAAAAAAPiE/ee7XLmbzEVkzb_yMA4ChI_akK0iJRW9tQCLcB/s1600/punching%2Bbag%2Bhug.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "alt_grip_trx_row" data-src="https://2.bp.blogspot.com/-y9Wv9Q8f-d0/WOPf7gujsfI/AAAAAAAAPLw/zzRHXGb-A3Y_RKZy1iXIDFNWWTQ7PeU3QCLcB/s320/alternating%2BTRX%2Bpulls.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "band_sprints" data-src="https://1.bp.blogspot.com/-UoTeC7ZR3EU/WNKiQNELJEI/AAAAAAAAOZU/unHx4fpqZFgYhLufstmKELFo3Crrt2eTACEw/s1600/band%2Bsprints.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "hula_hoop" data-src="https://4.bp.blogspot.com/-60Vo7DxCJ0Q/WNKiQabA5II/AAAAAAAAOZU/O2-vZUtGsikfbP3RIOtc0MwdgoXT-A56gCEw/s1600/hula%2Bhoop.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "granny_shot" data-src="https://1.bp.blogspot.com/-6RTrVQRF-q4/WNvCens0qgI/AAAAAAAAOe0/scKCMr7O5yMsqEpzmIIkbSVyW4caVeAnACLcB/s1600/small%2Bball%2Bgranny%2Bshot.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "pillball_throws" data-src="https://3.bp.blogspot.com/-YQ91zd8xobw/WNvCe0bRWRI/AAAAAAAAOe4/BCun9RmIm_Q9qvkPgSj9HleAbdQZxlQAQCLcB/s1600/pill%2Bball%2Bthrow.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "shot_put" data-src="https://2.bp.blogspot.com/-DEARJpwCXcg/WNvChW8y7bI/AAAAAAAAOfA/dyTTLa25_bEryNGC79ZIdhZq4NJi7aWdwCLcB/s1600/small%2Bball%2Bthrows.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "bosu_jumps" data-src="https://1.bp.blogspot.com/-gPvYbMnIOAQ/WNvCe-u71uI/AAAAAAAAOe8/gDyMKFsJVKYUlukfM1eER_kuflUOejH3QCLcB/s1600/bosu%2Bball%2Bjumps.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "pike_jump" data-src="https://4.bp.blogspot.com/-D4F0Mc3fAKE/WMxFDxTD-3I/AAAAAAAAOYQ/PxIIWN5cauQjmDdB1ooHRgDg_3pnXk5qgCLcB/s1600/side%2Bangle%2Bside%2Bpike%2Bjump.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "pilates ring" data-src="https://3.bp.blogspot.com/-UY0NsiUsVXM/WMxFEnPKKOI/AAAAAAAAOYk/XeGpfigUQDwc19reALvA2JD1Y5n6B7X5gCEw/s1600/Rosie%2Bpilates%2Bring.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "pb_bosu_plank" data-src="https://2.bp.blogspot.com/-GLkccBa2g90/WMxFLx6-b0I/AAAAAAAAOYk/Q9GHcaVhPDMYK3etSAOh1IXF7YXFLqZYACEw/s1600/physio-bosu%2Bball%2Bplank%2BQuinn.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "reverse_crunch" data-src="https://4.bp.blogspot.com/-oKPZm4mtgP0/WMxHrTkXkOI/AAAAAAAAOYs/Kxq1bTcsP3wSEVpROGg2Jc8jt6nHf7kIwCLcB/s1600/side%2Bangle%2Btoes%2Bto%2Bceiling.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "side_stepups" data-src="https://3.bp.blogspot.com/-fTmbeJSm7R0/WMxBvtosL7I/AAAAAAAAOX0/TtJHLLOxpkssJW62gjZPL_QPBMYgWYpXgCEw/s1600/side%2Bbox%2Bstep%2Bup.gif"></a>
</div>

<div class = "ex_block" onclick="putExercise();">
<a><img class = "exercise_gif lazy" alt = "Gif" src = ""  id = "bosu_jump" data-src="https://2.bp.blogspot.com/-hL-hF6ewEnQ/WMxDO3nvIlI/AAAAAAAAOYA/CyUUi0WNxC05-ZJiHZWdwZsfwYDAr8rdgCLcB/s1600/bosu%2Bjump%2Bwarmup.gif"></a>
</div>
-->
<!-- Javascript Start -->

<script>
function putPics(){
    $(function() {
        $('.lazy').lazy();
    });
}
</script>

<script>

//declare variables
if (typeof activeGif === undefined){
    var activeGif;
}

var done;

if (done != 0 || done != 1 || done != 2 || done != 3 || done != 4 || done != 5){
    done = 0;
}

//image selector function, grabs href from mouse position
$("img").mouseover(function(){
        activeGif = $(this).attr("src");
        console.log(activeGif);
    })

//reassigns putExercise function target based on user input
function blockSelect(done_1){
    done = done_1;
    if (done_1 === 0){
        $("#exercise_1").css( "border-style", "dotted");
        $("#exercise_1").css( "border-width", "1px");
    }
    else if (done_1 === 1){

    }

}

//fill img with user choice using function
function putExercise(){

switch(done) {
    case 0:
        $("#exercise_1").attr("src", activeGif);
        done += 1;
        break;
    case 1:
        $("#exercise_2").attr("src", activeGif);
        done += 1;
        break;
    case 2:
        $("#exercise_3").attr("src", activeGif);
        done += 1;
        break;
    case 3:
        $("#exercise_4").attr("src", activeGif);
        done += 1;
        break;
    case 4:
        $("#exercise_5").attr("src", activeGif);
        done += 1;
        break;
    default:
        $("#exercise_6").attr("src", activeGif);
        console.log(done);
}
}

</script>

</body>

and the widget

<style>
#button_style{
  background-color:rgb(20, 200, 200);
  align-items:center;
  position: relative;
  top: 15px;
  left: 8px;
  border-radius: 15px;
  outline:none;
  font-family: Impact, Charcoal, sans-serif;
  -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}
#jsgif{
  position: relative;
  top: 15px;
  left: 8px;
}
</style>

<!-- div to fill with gif picture -->
<div id = "jsgif">

</div>

<!-- Created button to generate new picture -->
<input id = "button_style" onclick="imgGen()" style="font-family: &quot;arimo&quot;; font-size: 30px; height: 100%; text-align: center; white-space: normal; width: 270px;" type="button" value="Click here for another exercise!" />

<!-- Javascript start -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.4/jquery.lazy.min.js"></script>
<script type="text/javascript">

// Exercise gif replacement function 
function imgGen(){
//total images must be updated depending on how many gifs are present
var total_images = 14;
var random_number = Math.floor((Math.random()*total_images));
var random_img = new Array();
random_img[0] = '<a href="https://4.bp.blogspot.com/-5hVNrJuBuhg/WLBEvAOocpI/AAAAAAAANIE/BxPDgcook7MwLR96rXmzR9VsoVDhB7N6ACLcB/s1600/neutral%2Bgrip%2BDB%2Bbench.gif"><img src="https://4.bp.blogspot.com/-5hVNrJuBuhg/WLBEvAOocpI/AAAAAAAANIE/BxPDgcook7MwLR96rXmzR9VsoVDhB7N6ACLcB/s1600/neutral%2Bgrip%2BDB%2Bbench.gif"></a>';
random_img[1] = '<a href="https://4.bp.blogspot.com/-cZjQWbEYfbY/WLBGDMQkYzI/AAAAAAAANIQ/JDL4nB4j1xkYylhhsflpN9HWJ37_Wx05ACLcB/s1600/band%2Brow%2Bpronated.gif"><img src="https://4.bp.blogspot.com/-cZjQWbEYfbY/WLBGDMQkYzI/AAAAAAAANIQ/JDL4nB4j1xkYylhhsflpN9HWJ37_Wx05ACLcB/s1600/band%2Brow%2Bpronated.gif"></a>';
random_img[2] = '<a href="https://2.bp.blogspot.com/-vdau-h_TI-c/WLBHXY6_7YI/AAAAAAAANI0/1TIu0vHccyEzf0guYXGc22vpZVankNGtwCEw/s1600/supinated%2Bbent%2Bover%2Brow.gif"><img src="https://2.bp.blogspot.com/-vdau-h_TI-c/WLBHXY6_7YI/AAAAAAAANI0/1TIu0vHccyEzf0guYXGc22vpZVankNGtwCEw/s1600/supinated%2Bbent%2Bover%2Brow.gif"></a>';
random_img[3] = '<a href="https://1.bp.blogspot.com/-z9KPHV1Hu8s/WLBG660N9OI/AAAAAAAANIk/_lbOrlHccroWQdxuGjRyzd75_x9HLWLKQCEw/s1600/back%2Bangle%2Bsupinated%2Bbent%2Bover%2Brow.gif"><img src="https://1.bp.blogspot.com/-z9KPHV1Hu8s/WLBG660N9OI/AAAAAAAANIk/_lbOrlHccroWQdxuGjRyzd75_x9HLWLKQCEw/s1600/back%2Bangle%2Bsupinated%2Bbent%2Bover%2Brow.gif"></a>';
random_img[4] = '<a href="https://2.bp.blogspot.com/-m7j9mGwiFZw/WLBEecqhjrI/AAAAAAAANIA/W1AlpT9DKiER2nm_b202OkWTDYnT1YBVgCLcB/s1600/side%2Bangle%2Boverhead%2Bpress.gif"><img src="https://2.bp.blogspot.com/-m7j9mGwiFZw/WLBEecqhjrI/AAAAAAAANIA/W1AlpT9DKiER2nm_b202OkWTDYnT1YBVgCLcB/s1600/side%2Bangle%2Boverhead%2Bpress.gif"></a>';
random_img[5] = '<a href="https://4.bp.blogspot.com/-MkHxS7cZ5uA/WLBQCq8ViCI/AAAAAAAANKM/belAEX7btu4KfyvR0cKqWejlKEnkpQD1ACLcB/s1600/posterior%2Bangle%2Blying%2Btricep%2Bext.gif"><img src="https://4.bp.blogspot.com/-MkHxS7cZ5uA/WLBQCq8ViCI/AAAAAAAANKM/belAEX7btu4KfyvR0cKqWejlKEnkpQD1ACLcB/s1600/posterior%2Bangle%2Blying%2Btricep%2Bext.gif"></a>';
random_img[6] = '<a href="https://1.bp.blogspot.com/-c8wlCB9fhEg/WLBP4iBG4AI/AAAAAAAANJ8/eqikqliO-ogTSjVLz8KSxoBgGoLYOTQTQCLcB/s1600/side%2Bangle%2Blying%2Btricep%2Bext.gif"><img src="https://1.bp.blogspot.com/-c8wlCB9fhEg/WLBP4iBG4AI/AAAAAAAANJ8/eqikqliO-ogTSjVLz8KSxoBgGoLYOTQTQCLcB/s1600/side%2Bangle%2Blying%2Btricep%2Bext.gif"></a>';
random_img[7] = '<a href="https://1.bp.blogspot.com/-Yz8PMyC3lvM/WLCCAQBsnXI/AAAAAAAANLc/W58Shwd2ZhAE9sp1QtGMvfXYgU8qgWArgCLcB/s1600/DB%2Bcurl.gif"><img src="https://1.bp.blogspot.com/-Yz8PMyC3lvM/WLCCAQBsnXI/AAAAAAAANLc/W58Shwd2ZhAE9sp1QtGMvfXYgU8qgWArgCLcB/s1600/DB%2Bcurl.gif"></a>';
random_img[8] = '<a href="https://1.bp.blogspot.com/-F5Y-3pRexgI/WLCCAT9BbZI/AAAAAAAANLg/z0J8vMeEuWkdcnyG-dnSZbhof0rcA_0RQCLcB/s1600/side%2Bangle%2BDB%2Bcurl.gif"><img src="https://1.bp.blogspot.com/-F5Y-3pRexgI/WLCCAT9BbZI/AAAAAAAANLg/z0J8vMeEuWkdcnyG-dnSZbhof0rcA_0RQCLcB/s1600/side%2Bangle%2BDB%2Bcurl.gif"></a>';
random_img[9] = '<a href="https://1.bp.blogspot.com/-eTpuht_XAaY/WKyW9RoqKXI/AAAAAAAAM_E/c27p5n1DZjIlhE99GrbqqY_C5ayZF7ChgCLcB/s1600/side%2Bangle%2Bglute%2Bbridge.gif"><img src="https://1.bp.blogspot.com/-eTpuht_XAaY/WKyW9RoqKXI/AAAAAAAAM_E/c27p5n1DZjIlhE99GrbqqY_C5ayZF7ChgCLcB/s1600/side%2Bangle%2Bglute%2Bbridge.gif"></a>';
random_img[10] = '<a href="https://3.bp.blogspot.com/-OSzcivq9HZ4/WKtgZ_1c3ZI/AAAAAAAAM-o/6YX2uZuUR8AW8XeABEBIuYB9jJQ1NqXEACLcB/s1600/tight%2Bgrip%2Bfist%2Bpushup.gif"><img src="https://3.bp.blogspot.com/-OSzcivq9HZ4/WKtgZ_1c3ZI/AAAAAAAAM-o/6YX2uZuUR8AW8XeABEBIuYB9jJQ1NqXEACLcB/s1600/tight%2Bgrip%2Bfist%2Bpushup.gif"></a>';
random_img[11] = '<a href="https://4.bp.blogspot.com/-6-fbmqPrraM/WKtgbHqNlUI/AAAAAAAAM-s/QGt8IL6biLwXS0q-cCdQsIN6QGgRztdtwCLcB/s1600/side%2Bangle%2Bpike%2Bwith%2Bslides.gif"><img src="https://4.bp.blogspot.com/-6-fbmqPrraM/WKtgbHqNlUI/AAAAAAAAM-s/QGt8IL6biLwXS0q-cCdQsIN6QGgRztdtwCLcB/s1600/side%2Bangle%2Bpike%2Bwith%2Bslides.gif"></a>';
random_img[12] = '<a href="https://2.bp.blogspot.com/-t7-s0QIn5lw/WK8xN8Ms2bI/AAAAAAAANHY/7qCbVYuAG1gHyIsPpc09c6DTmRt1pGwuQCLcB/s1600/side%2Bangle%2Bpilates%2Bbike.gif"><img src="https://2.bp.blogspot.com/-t7-s0QIn5lw/WK8xN8Ms2bI/AAAAAAAANHY/7qCbVYuAG1gHyIsPpc09c6DTmRt1pGwuQCLcB/s1600/side%2Bangle%2Bpilates%2Bbike.gif"></a>';
random_img[13] = '<a href="https://1.bp.blogspot.com/-aXgTAfFP7w4/WK8xiSXvCQI/AAAAAAAANHc/rGfGkw5SHRYa-nsMbtsiHrXZYU8IlejkACLcB/s1600/prone%2Bscissor.gif"><img src="https://1.bp.blogspot.com/-aXgTAfFP7w4/WK8xiSXvCQI/AAAAAAAANHc/rGfGkw5SHRYa-nsMbtsiHrXZYU8IlejkACLcB/s1600/prone%2Bscissor.gif"></a>';
random_img[14] = '<a href="https://3.bp.blogspot.com/-esf5aN9Rr4c/WK8xjPkqQMI/AAAAAAAANHg/Azd1ltRGFQcgefW5pkQFIoORf5YJMazBwCLcB/s1600/side%2Bangle%2BBW%2Bshoulder%2Bpress.gif"><img src="https://3.bp.blogspot.com/-esf5aN9Rr4c/WK8xjPkqQMI/AAAAAAAANHg/Azd1ltRGFQcgefW5pkQFIoORf5YJMazBwCLcB/s1600/side%2Bangle%2BBW%2Bshoulder%2Bpress.gif"></a>';
$("#jsgif").html(random_img[random_number]);
}
imgGen();</script>

Upvotes: 1

Related Questions