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
244 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 40338206
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
ID: 40342154
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
ID: 40342159
'welcome
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

756 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