Solved

How do I create the code to when a user clicks on a thumbnail have larger image slide down?

Posted on 2014-09-22
3
236 Views
Last Modified: 2014-09-24
Hi,

I'm very new to javascript and jquery and I'm trying to duplicate the code on the custom page for the gallery to the non-custome gallery. The custom gallery brings the images and videos into  a feed as thumbnails, then when a user clicks on the thumbnail, they will dim and then a larger image slides down. In the page I'm trying to duplicate the function, I have the thumbnails but they open in new window.

Let me know if you need more information.

Custom gallery page
http://espn.tmpseoqa.com/connecticut/production/jobid5994133-remote-packet-contributor-(news-sourcer)-jobs/Culture

code for the page

$.getJSON('http://behere.espncareers.com/v4/api/gallery/get.jsonp?environment=espnugc&category_id=5&gallery_id=1&callback=?', function (data) {
    $.each(data.results, function (index, value) {
        var listItem = $('<li />');
        var link = $('<a/>');
        //images
        if (value.media[0].media_type == "1") {
            link.attr('href', value.media[0].large).addClass('behere-image');
        }
        else if (value.media[0].media_type == "3") {
            link.attr('href', value.media[0].video_url).addClass('behere-video');
        }
        else return;
        var content = new Image();
        content.src = value.media[0].medium != null ? value.media[0].medium : value.media[0].large;
        content.alt = value.title;
        $(content).attr('data-description', value.description);
        listItem.append(link.append(content));
        $('#thismoment-feed').append(listItem);
    });
    initPreview();
});

//accessibility functions
jQuery.fn.extend({
    //dynamically assign appropriate aria roles to accordion-style content
    ariaHide: function () {
        $(this).attr({
            'aria-hidden': 'true',
            'aria-expanded': 'false'
        });
    },
    ariaShow: function () {
        $(this).attr({
            'aria-hidden': 'false',
            'aria-expanded': 'true'
        });
    }
});

var maxHeight = 360; //set by the height of #show-box in CSS

//insert loading overlay
function addLoader(link) {
    link.parent('li').append('<p id="loading"></p>');
}

function closePreviewBox() {
    $('#thismoment-feed a').animate({ opacity: 1 }, 0);
    $('#show-box').slideUp(200, function () {
        $(this).remove();
    });
}

function addPreviewBox(link) {
    var parent = link.parent('li');
    if (parent.hasClass('third')) {
        var rowend = parent;
    }
    else if ($(parent.nextAll('.third')).length > 0) {
        var rowend = $(parent.nextAll('.third')[0]);
    }
    //for last row when there are not 3 items in the list - target last item in image list, need to target next-to-last item if show-box is currently last item
    else {
        if ($('#thismoment-feed li:last-child').attr('id') === 'show-box') var rowend = $('#show-box').prev('li');
        else var rowend = $('#thismoment-feed li:last-child');
    }
    //check if box is there - move list if it is not in right place or add if not there, just swap out content otherwise
    if ($('#show-box').length === 0 || $('#show-box').length > 0 && rowend.next('li').attr('id') !== 'show-box') {
        $('#show-box').remove();

        $('<li id="show-box" tabindex="0"></li>').insertAfter(rowend).hide().ariaHide();
    }
    else {
        $('#show-box').html('');
    }
    $('#show-box').append($('<div id="show-caption"></div>')).append($('<a />', {
        'href': '#',
        'id': 'show-box-close',
        'click': function () {
            closePreviewBox();
            $('#culture-gallery a').animate({ opacity: '1' }, 0);
            return false;
        },
        'text': 'close media item'
    }));

}

//to display image in large preview box on click
//link parameter is the <a> element surrounding the thumbnail image
function showImage(link) {
    $('#thismoment-feed a').not(link).animate({ opacity: '0.3' }, 0); //fade out the other links - using JS animation for IE8
    $('#show-caption').css('visibility', 'hidden'); //hide the text in the caption but keep its height to maintain the layout until text updates
    link.animate({ opacity: '1' }, 0); //bring this link to full opacity
    var imgsrc = link.attr('href'); //source of large image is href of <a>
    var imgtitle = link.children('img').attr('alt'); //if image has a title, set the image title to be displayed to that text
    var imgdesc = link.children('img').attr('data-description');
    addPreviewBox(link);
    addLoader(link);

    //check to make sure large image is not already present, and insert image object into page
    var img = new Image();
    img.src = imgsrc;
    img.alt = imgtitle;
    img.id = 'show-box-img';
    $('#show-box').prepend(img);
    $('#show-box-img').css({ 'visibility': 'hidden' }).attr({ //hide image visibility to prevent alt text from showing while image is loading
        src: imgsrc + "?" + new Date().getTime(), //append unique time identifier to image to force image to re-load, so it can be resized properly in IE
        alt: imgtitle
    }).load(function () {
        var image = $(this);
        $(this).css('visibility', 'visible');
        $(this).removeAttr('width'); //removing IE8-set attributes
        $(this).removeAttr('height'); //removing IE8-set attributes
        //since image width is set to 100% of container, need to re-size images whose height is greater than width to fit fully in preview box
        if (image.height() > image.width()) {
            console.log('portrait');
            image.css('height', maxHeight + 'px');
            image.css('width', 'auto');
        }
        else {
            image.css({
                'width': '100%',
                'height': 'auto'
            });
        }
        $('#loading').remove();
        $('#show-caption').html($('<h2>' + imgtitle + '</h2><p>' + imgdesc + '</p>')).css('visibility', 'visible'); //show image title and description text - change wrapper markup to whatever best suits page
        $('#show-box').slideDown(200).focus();
    });
}

//to display video in large preview box on click
//link parameter is the <a> element surrounding the thumbnail image
function showVideo(link) {
    $('#show-caption').css('visibility', 'hidden'); //hide caption until text changes
    $('#thismoment-feed a').not(link).animate({ opacity: '0.3' }, 0); //fade out the other links - using JS animation for IE8
    $(link).animate({ opacity: '1' }, 0); //bring this link to full opacity
    addPreviewBox(link);
    addLoader(link);
    var vidsrc = link.attr('href'); //get video embed source from link href
    var vidtitle = link.children('img').attr('alt'); //if link has a title, set title to be displayed 
    var vidcap = link.children('img').attr('data-description'); //caption for video is alt tag of thumbnail image
    vidsrc += "?" + new Date().getTime();
    var vid = $('<video id="player1" src="' + vidsrc + '" type="video/mp4" controls="controls"></video>');
    $('#show-box').prepend(vid);
    MediaElement('player1', { success: function (me) { //calls on mediaelement.js - must have referenced on page, and js file must live in same directory as helper .swf file for flash (flashmediaelement.swf). 
        //me.play(); //uncomment to set autoplay
        //me.addEventListener('playing', function() { //uncomment to set autoplay
        $('#loading').remove();
        $('#show-box').slideDown(200).focus();
        $('#show-caption').html($('<h2>' + vidtitle + '</h2><p>' + vidcap + '</p>')).css('visibility', 'visible'); //show video title and description text - change wrapper markup to whatever best suits page
        //}, false); //uncomment to set autoplay
    } 
    });
}

function addThird() {
    $('#thismoment-feed li').removeClass('third');
    var counter = 1;
    $('#thismoment-feed li').not('#show-box').each(function () {
        if (counter < 3) {
            counter++;

        }
        else {
            counter = 1;
            $(this).addClass('third');
        }
    });
}

function initPreview() {
    //assign classes to every third list item, as markers for where to insert content
    addThird();

    //change large image on thumbnail click
    $('#thismoment-feed .behere-image').click(function () {
        showImage($(this));
        return false;
    });
    //show large video on thumbnail click
    $('#thismoment-feed .behere-video').click(function () {
        showVideo($(this));
        return false;
    });

    $( ".behere-video img" ).after( "<span></span>" );

    $('#behere-sort a').click(function (e) {
        $('#thismoment-feed a').animate({ opacity: 1 }, 0);
        $('#show-box').remove();
        $('#thismoment-feed li').show().ariaShow();
        $('#thismoment-sort a').removeClass('active');
        $(this).addClass('active');
        $('#show-box').remove();
        var sortby = $(this).attr('href').replace('#', '');
        if (sortby !== 'all') {
            $('#thismoment-feed a').not('.' + sortby).parent('li').hide().ariaHide();
        }
        addThird();
        e.preventDefault();
    });
}

Open in new window

Two Samples of different code for non-custom
https://dl.dropboxusercontent.com/u/2399619/culture/espn-culture-slider.html

code for this one


//accessibility functions
jQuery.fn.extend({
    //dynamically assign appropriate aria roles to accordion-style content
    ariaHide: function () {
        $(this).attr({
            'aria-hidden': 'true',
            'aria-expanded': 'false'
        });
    },
    ariaShow: function () {
        $(this).attr({
            'aria-hidden': 'false',
            'aria-expanded': 'true'
        });
    }
});

var maxHeight = 360; //set by the height of #show-box in CSS

//insert loading overlay
function addLoader(link) {
    link.parent('li').append('<p id="loading"></p>');
}

function closePreviewBox() {
    $('#culture-gallery a').animate({ opacity: 1 }, 0);
    $('#show-box').slideUp(200, function () {
        $(this).remove();
    });
}

function addPreviewBox(link) {
    var parent = link.parent('li');
    if (parent.hasClass('third')) {
        var rowend = parent;
    }
    else if ($(parent.nextAll('.third')).length > 0) {
        var rowend = $(parent.nextAll('.third')[0]);
    }
    //for last row when there are not 3 items in the list - target last item in image list, need to target next-to-last item if show-box is currently last item
    else {
        if ($('#culture-gallery li:last-child').attr('id') === 'show-box') var rowend = $('#show-box').prev('li');
        else var rowend = $('#culture-gallery li:last-child');
    }
    //check if box is there - move list if it is not in right place or add if not there, just swap out content otherwise
    if ($('#show-box').length === 0 || $('#show-box').length > 0 && rowend.next('li').attr('id') !== 'show-box') {
        $('#show-box').remove();

        $('<li id="show-box" tabindex="0"></li>').insertAfter(rowend).hide().ariaHide();
    }
    else {
        $('#show-box').html('');
    }
    $('#show-box').append($('<div id="show-caption"></div>')).append($('<a />', {
        'href': '#',
        'id': 'show-box-close',
        'click': function () {
            closePreviewBox();
            $('#culture-gallery a').animate({ opacity: '1' }, 0);
            return false;
        },
        'text': 'close media item'
    }));

}

//to display image in large preview box on click
//link parameter is the <a> element surrounding the thumbnail image
function showImage(link) {
    $('#culture-gallery a').not(link).animate({ opacity: '0.3' }, 0); //fade out the other links - using JS animation for IE8
    $('#show-caption').css('visibility', 'hidden'); //hide the text in the caption but keep its height to maintain the layout until text updates
    link.animate({ opacity: '1' }, 0); //bring this link to full opacity
    var imgsrc = link.attr('href'); //source of large image is href of <a>
    var imgtitle = link.children('img').attr('alt'); //if image has a title, set the image title to be displayed to that text
    var imgdesc = link.children('img').attr('data-description');
    addPreviewBox(link);
    addLoader(link);

    //check to make sure large image is not already present, and insert image object into page
    var img = new Image();
    img.src = imgsrc;
    img.alt = imgtitle;
    img.id = 'show-box-img';
    $('#show-box').prepend(img);
    $('#show-box-img').css({ 'visibility': 'hidden' }).attr({ //hide image visibility to prevent alt text from showing while image is loading
        src: imgsrc + "?" + new Date().getTime(), //append unique time identifier to image to force image to re-load, so it can be resized properly in IE
        alt: imgtitle
    }).load(function () {
        var image = $(this);
        $(this).css('visibility', 'visible');
        $(this).removeAttr('width'); //removing IE8-set attributes
        $(this).removeAttr('height'); //removing IE8-set attributes
        //since image width is set to 100% of container, need to re-size images whose height is greater than width to fit fully in preview box
        if (image.height() > image.width()) {
            console.log('portrait');
            image.css('height', maxHeight + 'px');
            image.css('width', 'auto');
        }
        else {
            image.css({
                'width': '100%',
                'height': 'auto'
            });
        }
        $('#loading').remove();
        $('#show-caption').html($('<h2>' + imgtitle + '</h2><p>' + imgdesc + '</p>')).css('visibility', 'visible'); //show image title and description text - change wrapper markup to whatever best suits page
        $('#show-box').slideDown(200).focus();
    });
}

//to display video in large preview box on click
//link parameter is the <a> element surrounding the thumbnail image
function showVideo(link) {
    $('#show-caption').css('visibility', 'hidden'); //hide caption until text changes
    $('#culture-gallery a').not(link).animate({ opacity: '0.3' }, 0); //fade out the other links - using JS animation for IE8
    $(link).animate({ opacity: '1' }, 0); //bring this link to full opacity
    addPreviewBox(link);
    addLoader(link);
    var vidsrc = link.attr('href'); //get video embed source from link href
    var vidtitle = link.children('img').attr('alt'); //if link has a title, set title to be displayed 
    var vidcap = link.children('img').attr('data-description'); //caption for video is alt tag of thumbnail image
    vidsrc += "?" + new Date().getTime();
    var vid = $('<video id="player1" src="' + vidsrc + '" type="video/mp4" controls="controls"></video>');
    $('#show-box').prepend(vid);
    MediaElement('player1', { success: function (me) { //calls on mediaelement.js - must have referenced on page, and js file must live in same directory as helper .swf file for flash (flashmediaelement.swf). 
        //me.play(); //uncomment to set autoplay
        //me.addEventListener('playing', function() { //uncomment to set autoplay
        $('#loading').remove();
        $('#show-box').slideDown(200).focus();
        $('#show-caption').html($('<h2>' + vidtitle + '</h2><p>' + vidcap + '</p>')).css('visibility', 'visible'); //show video title and description text - change wrapper markup to whatever best suits page
        //}, false); //uncomment to set autoplay
    } 
    });
}

function addThird() {
    $('#culture-gallery li').removeClass('third');
    var counter = 1;
    $('#culture-gallery li').not('#show-box').each(function () {
        if (counter < 3) {
            counter++;

        }
        else {
            counter = 1;
            $(this).addClass('third');
        }
    });
}

function initPreview() {
    //assign classes to every third list item, as markers for where to insert content
    addThird();

    //change large image on thumbnail click
    $('#culture-gallery .gallery-image').click(function () {
        showImage($(this));
        return false;
    });
    //show large video on thumbnail click
    $('#culture-gallery .gallery-video').click(function () {
        showVideo($(this));
        return false;
    });

    $( ".gallery-video img" ).after( "<span></span>" );

    $('#gallery-sort a').click(function (e) {
        $('#culture-gallery a').animate({ opacity: 1 }, 0);
        $('#show-box').remove();
        $('#culture-gallery li').show().ariaShow();
        $('#culture-gallery-sort a').removeClass('active');
        $(this).addClass('active');
        $('#show-box').remove();
        var sortby = $(this).attr('href').replace('#', '');
        if (sortby !== 'all') {
            $('#culture-gallery a').not('.' + sortby).parent('li').hide().ariaHide();
        }
        addThird();
        e.preventDefault();
    });
}

https://dl.dropboxusercontent.com/u/2399619/culture/culture-slider.html

[b]code for this one[/b]



//accessibility functions
jQuery.fn.extend({
    //dynamically assign appropriate aria roles to accordion-style content
    ariaHide: function () {
        $(this).attr({
            'aria-hidden': 'true',
            'aria-expanded': 'false'
        });
    },
    ariaShow: function () {
        $(this).attr({
            'aria-hidden': 'false',
            'aria-expanded': 'true'
        });
    }
});

var maxHeight = 360; //set by the height of #show-box in CSS

//insert loading overlay
function addLoader(link) {
    link.parent('li').append('<p id="loading"></p>');
}



function addPreviewBox(link) {
    var parent = link.parent('li');
    if (parent.hasClass('third')) {
        var rowend = parent;
    }
    else if ($(parent.nextAll('.third')).length > 0) {
        var rowend = $(parent.nextAll('.third')[0]);
    }
    //for last row when there are not 3 items in the list - target last item in image list, need to target next-to-last item if show-box is currently last item
    else {
        if ($('#culture-gallery li:last-child').attr('id') === 'show-box') var rowend = $('#show-box').prev('li');
        else var rowend = $('#culture-gallery li:last-child');
    }
    //check if box is there - move list if it is not in right place or add if not there, just swap out content otherwise
    if ($('#show-box').length === 0 || $('#show-box').length > 0 && rowend.next('li').attr('id') !== 'show-box') {
        $('#show-box').remove();

        $('<li id="show-box" tabindex="0"></li>').insertAfter(rowend).hide().ariaHide();
    }
    else {
        $('#show-box').html('');
    }
    $('#show-box').append($('<div id="show-caption"></div>')).append($('<a />', {
        'href': '#',
        'id': 'show-box-close',
        'click': function () {
            closePreviewBox();
            $('#culture-gallery a').animate({ opacity: '1' }, 0);
            return false;
        },
        'text': 'close media item'
    }));

}

//to display image in large preview box on click
//link parameter is the <a> element surrounding the thumbnail image
function showImage(link) {
    $('#show-caption').css('visibility','hidden'); //hide the text in the caption but keep its height to maintain the layout until text updates
    var imgsrc = $(link).attr('href'); //source of large image is href of <a>
    if ($(link).attr('title').length) { var imgtitle = $(link).attr('title'); } //if image has a title, set the image title to be displayed to that text
    else { var imgtitle = 'Image'; } //default image title if none specified
    var imgalt = $(link).children('img').attr('alt'); //alt tag of large image will match thumbnail
    clearPreview();
    addLoader();
    
    //check to make sure large image is not already present, and insert image object into page
    if (!$('#show-box-img').length) {
        var img = new Image();
        img.src = imgsrc;
        img.alt = imgalt;
        img.id = 'show-box-img';
        $('#show-box').prepend(img);
        $('#show-box-img').css('visibility','hidden').attr({ //hide image visibility to prevent alt text from showing while image is loading
            src: imgsrc + "?" + new Date().getTime(), //append unique time identifier to image to force image to re-load, so it can be resized properly in IE
            alt: imgalt
        }).load( function() {
            $(this).css('visibility','visible');
            $(this).removeAttr('width'); //removing IE8-set attributes
            $(this).removeAttr('height'); //removing IE8-set attributes
            //since image width is set to 100% of container, need to re-size images whose height is greater than width to fit fully in preview box
            if ($(this).height() > $(this).width()) {
                $(this).css('height', maxHeight+'px');
                $(this).css('width', 'auto');
                $(this).css('width', 'auto');
            }
            $('#loading').remove();
            $('#show-caption').html($('<h2>'+imgtitle+'</h2><p>'+imgalt+'</p>')).css('visibility','visible'); //show image title and description text - change wrapper markup to whatever best suits page
            $('#show-box').focus();
        });
    }
}

//to display video in large preview box on click
//link parameter is the <a> element surrounding the thumbnail image
function showVideo(link) {
    $('#show-caption').css('visibility','hidden'); //hide caption until text changes
    clearPreview();
    addLoader();
    var vidsrc = link.attr('href'); //get video embed source from link href
    if ($(link).attr('title').length) { var vidtitle = link.attr('title'); } //if link has a title, set title to be displayed 
    else { var vidtitle = 'Video'; } //default video title if none set in admin
    var vidcap = link.children('img').attr('alt'); //caption for video is alt tag of thumbnail image
    
    //add skip link for embeddable content
    $('#show-box').append($('<a href="#culture-gallery" id="skip-content">skip embedded content</a>'));
    
    //show youtube video
    if (link.hasClass('youtube')) { 
        //vidsrc = vidsrc+'?autoplay=1'; //uncomment to set autoplay
        if (!$('#show-box-vid').length) { //create iframe element for video
            var iframe = $('<iframe id="show-box-vid" frameborder="0"></iframe>'); 
            iframe.attr('src', vidsrc);
            $('#show-box').append(iframe);
            $('#show-box-vid').load(function() {
                $('#loading').remove();
                $('#show-caption').html($('<h2>'+vidtitle+'</h2><p>'+vidcap+'</p>')).css('visibility','visible'); //show video title and description text - change wrapper markup to whatever best suits page
                $('#show-box').focus();
            });
        }
    }
    
    //show .mp4 video
    else if (link.hasClass('hosted')) {
        vidsrc += "?" + new Date().getTime();
        var vid = $('<video id="player1" src="'+vidsrc+'" type="video/mp4" controls="controls"></video>');
        $('#show-box').append(vid);
        MediaElement('player1', { success: function(me) { //calls on mediaelement.js - must have referenced on page, and js file must live in same directory as helper .swf file for flash (flashmediaelement.swf). 
            //me.play(); //uncomment to set autoplay
            //me.addEventListener('playing', function() { //uncomment to set autoplay
                $('#loading').remove();
                $('#show-caption').html($('<h2>'+vidtitle+'</h2><p>'+vidcap+'</p>')).css('visibility','visible'); //show video title and description text - change wrapper markup to whatever best suits page
            //}, false); //uncomment to set autoplay
        }});
    }
}


function addThird() {
    $('#culture-gallery li').removeClass('third');
    var counter = 1;
    $('#culture-gallery li').not('#show-box').each(function () {
        if (counter < 3) {
            counter++;

        }
        else {
            counter = 1;
            $(this).addClass('third');
        }
    });
}

function closePreviewBox() {
    $('#culture-gallery a').animate({ opacity: 1 }, 0);
    $('#show-box').slideUp(200, function () {
        $(this).remove();
    });
}

function initPreview() {
    //assign classes to every third list item, as markers for where to insert content
    addThird();

    //change large image on thumbnail click
    $('#culture-gallery .gallery-image').click(function () {
        showImage($(this));
        return false;
    });
    //show large video on thumbnail click
    $('#culture-gallery .gallery-video').click(function () {
        showVideo($(this));
        return false;
    });

    $( ".gallery-video img" ).after( "<span></span>" );

    $('#gallery-sort a').click(function (e) {
        $('#culture-gallery a').animate({ opacity: 1 }, 0);
        $('#show-box').remove();
        $('#culture-gallery li').show().ariaShow();
        $('#culture-gallery-sort a').removeClass('active');
        $(this).addClass('active');
        $('#show-box').remove();
        var sortby = $(this).attr('href').replace('#', '');
        if (sortby !== 'all') {
            $('#culture-gallery a').not('.' + sortby).parent('li').hide().ariaHide();
        }
        addThird();
        e.preventDefault();
    });
}

Open in new window

0
Comment
Question by:craftyfirst
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
Comment Utility
Here what you're looking for : http://fancybox.net
How to : http://fancybox.net/howto

So just remove your current code, add jQuery plugin, fancybox files (plugin, css, images) and follow the wya you need to set your HTML basically one image is like this :
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
0
 

Author Comment

by:craftyfirst
Comment Utility
Thank you for the advice. It will be helpful in the future and I definitely will use. For this scenario, I was able to figure out what was going wrong. I just need to add a line of code at the bottom.

I needed to initialize the preview function and add this line: initPreview();

Will keep your suggestion for the next time I need a slide show.  I looked at the samples and looks really easy.

Thanks again for answering my question and helping me out.
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
'welcome
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now