Learn how to use jQuery at the Blog

Creative People « visit

  • Added 6 months ago
  • 384 Lines of Code shown
  • 2 Links of Interest
http://cpeople.ru
This is my Source Code and I don't want to show it here
View Source Code only (as overlay)
// That code snippet belongs to Creative People - http://cpeople.ru

var
    effects_speed = 500,
    current_col,
    current_obj,
    cols_number,
    cached = {},
    portfolio_timer,
    portfolio_time = 500,
    portfolio_itemList_array,
    portfolio_itemList,
    portfolio_timer,
    portfolio_time = 500,
    current_language;

$(document).ready(function () {
    $('.menu a').click(function (e) {
        $('.menu a').removeClass('selected');
        $(this).addClass('selected').blur();
    });

    $("a[id^='gallery']").bind('click', galleryOnClick);

    $("a[id^='page']").click(function (e) {
        if (match = this.id.match(/(\d+)/g)) {
            setCurrentLanguage(this);
            getPage(match);
            upMenu();
        }
    });

    // if URL conrains anchor, open corresponding url
    if (location.hash != '') {
        $(".menu a[href='" + location.hash + "']").click();
    }
});

function galleryOnClick(e) {
    if (match = this.id.match(/(\d+)/g)) {
        setCurrentLanguage(this);
        getGallery(match);
        upMenu();
    }
}

function upMenu(){
	if($(document).height() < 720){ $('.menu').animate({paddingTop: '10px'}, 500);}
}

function downMenu(){
	$('.menu').animate({paddingTop: '120px'}, 500)
}

function setCurrentLanguage(obj) {
    if ($(obj).attr('lang')) {
        current_language = $(obj).attr('lang');
    } else {
        current_language = 0;
    }
}

function getPage(id) {
    request({ id : id, language_id : current_language }, 'redactor.php', 'preparePage');
}

function getGallery(id) {
    request({ id : id }, 'portfolio.php', 'prepareGallery');
}

function request(params, url, callback) {
//    down();

    $('#page_container').slideUp(effects_speed, function () {

        $('#progressbar').show();

        current_obj = url + '_' + params.id + '_' + current_language;
        if (typeof(cached[current_obj]) != 'undefined') {
            up(cached[current_obj], callback);
        } else {
            $.get (
                BASE_URL + '/ajax/' + url,
                params,
                function (data) {
                    cached[current_obj] = data;
                    up(data, callback);
                },
                'json'
            )
        }
    });
}

function down() {
    $('#page_container').slideUp(effects_speed, function () {
        $('#progressbar').show();
    });
}

function up(data, callback) {
    $('#page_container').html(data.__html);

    if (data.script != '') {
        eval(data.__script);
    }

    $('#page_container').slideDown(effects_speed, function () {
        eval(callback + '()');
        $('#progressbar').hide();
    });
}

function preparePage() {
    $('.page-next').click(function() {
        pagerOnclick(1);
    });
    $('.page-prev').click(function() {
        pagerOnclick(-1);
    });
    cols_number = $('.pagecol').length;
    current_col = 1;

    $("#page a[id^='page']").click(function () {
        if (match = this.id.match(/(\d+)/g)) {
            setCurrentLanguage(this);
            getPage(match);
        }
    });

    changeCol(current_col);
}

function pagerOnclick(val) {
    changeCol((current_col + val));
}

function changeCol(num) {
    if (num < 1 || num > cols_number) {
        return false;
    }

    if (cols_number == 1) {
        if ($('.page-prev').css('display') != 'none') $('.page-next').fadeOut(effects_speed);
        if ($('.page-prev').css('display') != 'none') $('.page-prev').fadeOut(effects_speed);
    } else if (num == cols_number) {
        $('.page-next').fadeOut(effects_speed);
        if ($('.page-prev').css('display') == 'none') $('.page-prev').fadeIn(effects_speed);
    } else if (num == 1) {
        $('.page-prev').fadeOut(effects_speed);
        if ($('.page-next').css('display') == 'none') $('.page-next').fadeIn(effects_speed);
    } else {
        if ($('.page-next').css('display') == 'none') $('.page-next').fadeIn(effects_speed);
        if ($('.page-prev').css('display') == 'none') $('.page-prev').fadeIn(effects_speed);
    }

    if ($('#pagecol' +  current_col).css('display') == 'none') {
        $('#pagecol' + num).fadeIn(effects_speed, function () { current_col = num; });
    } else {
        $('#pagecol' +  current_col).fadeOut(effects_speed, function () {
            $('#pagecol' + num).fadeIn(effects_speed, function () { current_col = num; });

        });
    }
}

function prepareGallery() {

    if (typeof(carousel) != 'undefined') {
        carousel.reset();
    }

    $('#pcarousel').jcarousel({
        size:               portfolio_itemList.length,
        initCallback:       portfolio_initCallback,
        itemLoadCallback:   { onBeforeAnimation: portfolio_itemLoadCallback },
        buttonNextCallback: portfolio_buttonnext,
        buttonPrevCallback: portfolio_buttonprev
    });

    $('.jcarousel-next').mouseover(function() {
        portfolio_timer = setTimeout('portfolio_startnext()', portfolio_time);
    });

    $('.jcarousel-next').mouseout(function() {
        portfolio_stop();
    });

    $('.jcarousel-prev').mouseover(function() {
        portfolio_timer = setTimeout('portfolio_startprev()', portfolio_time);
    });

    $('.jcarousel-prev').mouseout(function() {
        portfolio_stop();
    });

    $('.jcarousel-container-horizontal').css('width', parseInt($('.wrapper').width()-160));
    $('.jcarousel-clip-horizontal').css('width', parseInt($('.wrapper').width()-160));

    $("a[id^='gallery']").each(function (i) {
        if (this.id.match(/(\d+)/g)) {
            $(this).unbind('click', galleryOnClick).bind('click', galleryOnClick);
        }
    });


}



function getNextImage(projectid) {
    for (i = 0; i < portfolio_itemList.length; i++) {
        if (portfolio_itemList[i].id == projectid) {
            var urli = portfolio_itemList[i].urli;
            if (urli == portfolio_itemList[i].url.length - 1) {
                urli = 0;
            } else {
                urli++;
            }
            portfolio_itemList[i].urli = urli;
            return portfolio_itemList[i].url[urli];
        }
    }
}

function portfolio_getItemHTML(item) {

	if(item.infotitle == '' & item.infotext == '' ){
		var a = 'hide'
	}else{var a = ''}

    retval = '<div class="project">';

    if (item.url[item.urli].match(/\.swf$/)) {
        retval += '<object width="470" height="360"> \
            <param name="movie" value="'+ item.url[item.urli] +'"> \
            <param name="wmode" value="opaque"> \
            <embed src="'+ item.url[item.urli] +'" width="470" height="360" wmode="opaque"></embed> \
        </object>';
    } else {
        retval += '<img id="projectim'+ item.id +'" src="'+ item.url[item.urli] +'" width="470" height="360" alt="" />'
    }

    if (item.show_info == 1) {
        retval += '<div class="projectbrief"> \
        <div class="projectinfocontainer"><div class="projectinfo" id="projectinfo'+ item.id +'"> \
        <div class="projectinfotext"> \
        <h1>'+ item.infotitle +'</h1> \
        <p>'+ item.infotext +'</p> \
        </div> \
        </div></div> \
        <div class="rightprojectbrief"> \
            <div class="projectlinkinfo"> \
            <span class= "'+a+'" id="projectlink'+ item.id +'">&nbsp;<b>info</b></span> \
            </div>';

        if (item.link != '') {
            retval += '<div class="projectlink"> \
            <a href="' + item.link + '" target="_blank"><span>' + item.link_text + '</span></a> \
            </div>';
        }

        retval += '</div> \
        <div class="leftprojectbrief"> \
            <h1>'+ item.title +'</h1> \
            <p>'+ item.brief +'</p> \
        </div> \
        </div>';
    }

    return retval + '</div>';

};

function portfolio_initCallback(carousel) {
    portfolioWidth();

    $('.pcarousel').mousewheel(function(event, delta) {
        portfolio_stop();
        if (delta > 0) carousel.prev();
        else if (delta < 0) carousel.next();
        return false;
    });

    portfolio_startnext = function() {
        carousel.next();
        portfolio_timer = setTimeout('portfolio_startnext()', portfolio_time);
    }

    portfolio_startprev = function() {
        carousel.prev();
        portfolio_timer = setTimeout('portfolio_startprev()', portfolio_time);
    }

    portfolio_stop = function() {
        clearTimeout(portfolio_timer);
    }

    portfolio_reset = function(k) {
        carousel.reset();
        carousel.options.size = k;
    }
}

function portfolio_itemLoadCallback(carousel, state) {

    for (var i = carousel.first; i <= carousel.last; i++) {
        if (carousel.has(i)) {
            continue;
        }
        if (i > portfolio_itemList.length) {
            break;
        }
        carousel.add(i, portfolio_getItemHTML(portfolio_itemList[i-1]));

        var projectid = portfolio_itemList[i-1].id;

        for(var j = 0; j < portfolio_itemList[i-1].url.length; j++) {
            $('<img>').attr('src', portfolio_itemList[i-1].url[j]);
        }

        $('#projectlink' + projectid).click(function() {
            if (match = $(this).attr("id").match(/projectlink(\d+)/)) {
                toggleProject(parseInt(match[1]));
            }
        });

		if (portfolio_itemList[i-1].url.length > 1)
		{
    		$("body").append('<div class="projecturli" id="projecturli'+ projectid +'">Next</div>');
    		$("#projectim"+projectid).mouseover(function(){
    			if (match = $(this).attr("id").match(/projectim(\d+)/)) {
    				$("#projecturli"+match[1]).show();
    			}
    		}).mousemove(function(kmouse){
    			if (match = $(this).attr("id").match(/projectim(\d+)/)) {
    				$("#projecturli"+match[1]).css({left:kmouse.pageX+1, top:kmouse.pageY+1});
    			}
    		}).mouseout(function(){
    			if (match = $(this).attr("id").match(/projectim(\d+)/)) {
    				$("#projecturli"+match[1]).hide();
    			}
    		});
    		$("#projectim"+projectid).click(function() {
    			if (match = $(this).attr("id").match(/projectim(\d+)/)) {
    				$("#projectim"+match[1]).fadeOut('slow', function(){$(this).attr('src', getNextImage(match[1])); $(this).fadeIn('slow');});
    			}
    		});
		}
    }
};

function portfolio_buttonnext(carousel, button, enabled) {
    if (!enabled) {
        portfolio_stop();
    }
}

function portfolio_buttonprev(carousel, button, enabled) {
    if (!enabled) {
        portfolio_stop();
    }
}

function portfolioWidth() {
    $('.jcarousel-container-horizontal').css('width', parseInt($('.wrapper').width()-160));
    $('.jcarousel-clip-horizontal').css('width', parseInt($('.wrapper').width()-160));
}

function toggleProject(projectid) {
    if ($("#projectinfo" + projectid).length > 0) {
        $("#projectinfo" + projectid).slideToggle(effects_speed);
    }
}

function togglePortfolio(portid) {
    if (disportid != portid) {
        $(".portfolio").fadeOut('slow');
        $("#port"+disportid).removeClass("cur");
        portfolio_itemList = portfolio_itemList_array[portid];
        portfolio_reset(portfolio_itemList.length);
        $(".portfolio").fadeIn('slow');
        $("#port"+portid).addClass("cur");
        disportid = portid;
    }
}