JSFiddle - React, Tailwind, and code Playground

by Raynos

HTML

<a href="images/slideshow/1-GW.PhillipBarnhart.ReverendMemory.jpg" title="Phillip Barnhart as: 
            Reverend Memory - a clergyman who stands for decorum and truth." rel="slideshow"><img src="images/view-slideshow.jpg" width="490" height="352" alt="View Slideshow"></a>
            <a rel="slideshow" href="images/slideshow/2-GW.BethBrooks.POLLYTODD.jpg">fff</a>
            <a rel="slideshow" href="images/slideshow/3-GW.NickHale.NOSTALGIA.jpg">test</a>

JavaScript

var slideShow = {
    config : {
        wrapper : 'body',
        container : 'div',
        anchor : 'a[rel="slideshow"]'
    },

    init : function(config) {
        $.extend(slideShow.config, config);
        $(slideShow.config.anchor).hide();
        $(slideShow.config.wrapper).find(slideShow.config.anchor)
            .eq(0)
            .show()
            .click(function(e){
                e.preventDefault();
                slideShow.getItem($(slideShow.config.anchor));
            });
    },
    
    getItem : function($image){
        console.log($image)
        console.log(jQuery.type($image))
        
    
        $.each($image, function(i){
            var setup ='<img src="' + $(this).attr('href') + '" title="' +$(this).attr('title') + '"/>';
            alert( setup);
        });
    /*
        for ($image = 0; $image < 100; $image++){
            
             console.log($(slideShow.config.wrapper).append(setup));
        }*/
        
    },
    
    createTumbnail : function($image){
        
    }
    
};


$(document).ready(function() {
    slideShow.init();
    //$("a[rel='slideshow']").colorbox();
});