Нуждаете се от условен jquery за отзивчив сайт

Нов, но запален потребител на jquery тук, моля, бъдете нежни :)

Използвам фантастичния caroufredsel (отзивчив jquery карусел) и го настроих първоначално, така че съм доволен от функционалност за превъртане.

Показва списък с китари. В момента има само 3, но искам да позволя да се добавят още в бъдеще.

Създавам адаптивен сайт и при по-малки размери на екрана се виждат само 2, а след това 1 китара наведнъж. Проблемът е, че ако започнете с браузър с пълна ширина, когато преоразмерите до по-малък екран, jquery не се задейства повторно, за да вземе това предвид. Следователно трябва да опресните екрана с по-малък размер, за да се появят контролите на плъзгача.

По същия начин, ако започнете с малък екран, когато го увеличите, контролите остават на екрана, въпреки че са функционално безполезни, тъй като всички елементи се показват.

Затова искам контролите да са видими само ако е необходимо (т.е. не ако цялото съдържание на въртележката е видимо наведнъж) и те да се коригират в отговор на текущия размер на екрана без опресняване.

Вярвам, че това е възможно чрез унищожаване на въртележката и повторното й задействане, когато екранът се преоразмери, но просто не мога да я накарам да работи.

Сайтът е онлайн на този адрес: http://www.wirebirdguitars.com/staging/guitars.html

Всяка помощ/предложение ще бъде наистина оценена. Благодаря!!


jquery conditional
person Jonathan Garner    schedule 21.06.2012    source източник
comment
Хубаво изглеждащ сайт :-) Между другото, това са „препоръки“.   -  person Jasper Mogg    schedule 21.06.2012
comment
Всъщност, когато заредите банкомата на сайта си, въртележката не се стартира. Трябва да имате кода, който първоначално сте имали там както и кода, който поставих в отговора си. По този начин ще стартира при първото зареждане на страницата, както и ще се рестартира при преоразмеряване на прозореца.   -  person Jasper Mogg    schedule 21.06.2012
comment
Здравей Джаспър - Първо, благодаря много за бързия отговор! Бях започнал да използвам отговора ви, но се уверих, че съм го разбрал правилно, преди да отговоря. Сега работи наистина добре! Изглежда, че превъртането все още е малко хаотично - понякога превъртане през повече от един елемент след преоразмеряване на екрана, но се получава. Благодаря за любезните коментари за сайта - тепърва започвам като уеб дизайнер и е трудно, но забавно да го направя както трябва :-) Благодаря отново   -  person Jonathan Garner    schedule 21.06.2012
comment
Надяваме се, че сте изгладили тези пречупвания - за начинаещ този сайт изглежда страхотно. Не че и аз съм нещо различно от начинаещ!   -  person Jasper Mogg    schedule 21.06.2012
comment
Хей Джаспър - публикувах друг въпрос, за да ми помогне да се опитам наистина да го излъскам. Благодаря отново за помощта. stackoverflow.com/questions/11145041/   -  person Jonathan Garner    schedule 21.06.2012

Отговори (1)


arrow_upward
1
arrow_downward

Добавете това към вашия JS.

function doSomething() {

    $('#guitars-gallery').trigger('destroy');

    $("#guitars-gallery").carouFredSel({
    auto: false,
    circular: false,
    prev: '#prev',
    next: '#next',
    responsive : true,
    height : 'auto',
    items : { width : 400, visible : { min : 1, max : 3 } } });

};

var resizeTimer;

$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});

Вдъхновен от този въпрос.

person Jasper Mogg    schedule 21.06.2012
comment
С добавянето на този код, това е един адски секси отзивчив сайт, който имате, г-н @JOnathan Garner :-) - person Jasper Mogg; 21.06.2012