Add htmlentities and/or shortcode into data-attributes

the_field echoes the output while htmlentities() expects the value to be returned. Try get_field instead:

data-img="<?php echo htmlentities(get_field('portfolio_galleries')); ?>" 

UPDATE:

Instead of adding this huge chunk of html for the slider to the data-attribute just add it after your image:

<img src="https://wordpress.stackexchange.com/questions/93587/<?php echo $large_image ?>"  
data-title="<?php echo get_the_title(); ?>" 
data-description="<?php the_content();?>" alt="<?php echo get_the_title(); // be nice ?>" class="superbox-img" />
the_field('portfolio_galleries');

and hide it with your css:

.portfolio-item .royalSlider { display: none; }

Now load the html into your superbox container when the user clicks on the item by editing this into your superbox.js around line 36:

superbox.find('.royalSlider').remove(); // remove the slider from previous events
var imgData = currentimg.data();
var sliderData = currentimg.next('.royalSlider'); // grab the slider html that we want to insert

superboximg.attr('src', imgData.img); 

    if (sliderData) { // show the slider if there is one
        superbox.clone().append(sliderData); // clone the element so we don't loose it for the next time the user clicks
    } else { // if there is no slider proceed as before
        if (imgData.title) {
            superbox.append('<h3 class="title">' + imgData.title + '</h3>');
        }
        if (imgData.description) {
            superbox.append('<div class="description">' + imgData.description + '</div>');
        }
    }

There are prettier ways to do this like echoing the urls of the slider to the <img /> attributes and then generating the slider html by looping through these urls but for now this should work.