JSFiddle - React, Tailwind, and code Playground

by doobada

JavaScript

var slideshow = [];
var curr_img = 0;
var tot_elements = 0;
var slideshow_cycled = 0;

function load_images_to_set(){
    var curr_num = 0;
    var img_url = jQuery.bbq.getState('image');
    $('#ss_images_set li').each(function(){
        var curr_dom = $(this);
        var curr_obj = {
            "img_url":curr_dom.find("img").attr("link"),
            "img_caption":curr_dom.find("p.img_caption").text(),
            "img_author":curr_dom.find("p.img_author").text(),
            "img_href":curr_dom.find("p.img_href").text(),
            "img_hashtag":curr_dom.find("p.img_hashtag").text(),
            "preloaded":1
        };
        if(img_url == curr_obj["img_hashtag"]){
            curr_img = curr_num;
        }
        slideshow[curr_num]=curr_obj;
        $('#real_display').append('<li id="rimg_id_'+curr_num+'">'+
                                    '<img id="crimg_id_'+curr_num+'" src="" link="'+curr_obj["img_url"]+'" />'+
                                    '</li>');
        curr_num++;
    });
    tot_elements = curr_num;
    push_hash();
}

function push_hash(){
    jQuery.bbq.pushState('image='+slideshow[curr_img]["img_hashtag"],0);
}

function take_prev_img(){
    curr_img--;
    if(curr_img<0)
        curr_img = (tot_elements-1);
    push_hash();
}

function take_next_img(){
    curr_img++;
    if(tot_elements==curr_img){
        curr_img = 0;
        slideshow_cycled = 1;
    }
    push_hash();
}

function show_img(img_num){
    if(slideshow_cycled == 0){
        if(curr_img == 0 && $('#left_arrow').is(':visible') == true){
            $('#left_arrow').hide();
        }else if(curr_img > 0 && $('#left_arrow').is(':visible') == false){
            $('#left_arrow').show();
        }
    }

    var curr_obj = slideshow[img_num];
    
    $('#real_display li:visible').hide(0); 
    
    var customURL = window.location.href;

    $('#info_box').remove();

    $('#real_display').append('<div id="info_box"><ul id="social_buttons_box"></ul>'+
              ...