Search code examples
javascriptjqueryhtmlflexslider

Flexslider Thumb Image Base 64

I'm using the flexslider component to make a carousel with thumbnails. I can use the component normally if I use the data-thumb attribute with the image path, however, I do not have the image path but I have the Base64. How can I use the component with images in Base64?

Below my code working without Base64:

<div class="flexslider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
    <ul class="slides" style="width: 1200%; transition-duration: 0.6s; transform: translate3d(-2500px, 0px, 0px);">	
        <div style="display: none;">
            <li data-thumb="images/si3.jpg" class="cnt-pi-model" aria-hidden="true" style="width: 625px; float: left; display: block;">
                <div class="thumb-image">
                    <img src="images/si3.jpg" data-imagezoom="true" class="img-responsive" draggable="false">
                </div>
            </li>
        </div>
    </ul>
</div>
<ol class="flex-control-nav flex-control-thumbs">                                    
    <li><img src="images/si3.jpg" draggable="false" class="flex-active"></li>
</ol>
<ul class="flex-direction-nav">
    <li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li>
    <li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li>
</ul>
</div>

Solution

  • I did it by making a Generic Handler that turns the Base64 into an image so the component can get a url.