OrdaSoft forum
Welcome, Guest
Please Login or Register.    Lost Password?
OrdaSoft forum Joomla Real Estate Forums Joomla Real Estate
mod_remslideshow show if ($(window).width() (0 viewing) 

Joomla Real Estate

Go to bottom Favoured: 0

Mod_remslideshow show if ($(window).width()

#18572
sliwamaster (User)
Junior Boarder
Posts: 30
graphgraph
User Offline Click here to see the profile of this user
mod_remslideshow show if ($(window).width() 8 Years, 1 Month ago
Karma: 0  
Hey I would like to get help to change the code of slider.js to make:

On resolutions lower than 1024px ( smartphones ) slider type: vertical
on resolutions bigger than 1024 px ( pc / laptops / tablets ) slider type: horizontal

Don't know exacly how to do: I tried with

if ($(window).width() < 1024) {

}[/quote]
but it doesn't work ;f
[quote]


here is screenshot what i mean:
modulesmod_remslideshowassetsslider.js


Code:
/*
* @version 2.1
* @package RealEstateManager - property slideShow
* @copyright 2012 OrdaSoft
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL
* @author 2012 Andrey Kvasnekskiy (akbet@ordasoft.com )
* @description RealEstateManager - property slideShow for Real Estate Manager Component
*/

(function($){

var DocumentLoaded = false;

window.addEvent('load',function(){DocumentLoaded = true});

this.RemSlideShow = new Class({

    initialize: function(settings, options){

        var slider_size = 0;
        var loaded_images = 0;
        var max_slides = 0;
        var current_slide = 0;
        var slider = 'slider' + settings.id;
        var autoplay = options.auto;
        var stop = 0;
        var show_nav = 0;
var is_fading = false;
        
        var slides = $('slider'+ settings.id).getChildren('li');
        slides.each(function(){
            slider_size += settings.slide_size;
            loaded_images++;
        })
        
        max_slides = loaded_images - settings.visible_slides;

        $(slider).setStyle('position', 'relative');

        var slideImages;
if (settings.slider_type == 2) { // fade
slides.setStyle('position', 'absolute');
slides.setStyle('top', 0);
slides.setStyle('left', 0);
$(slider).setStyle('width', settings.slide_size);
slides.setStyle('opacity',0);
slides[0].setStyle('opacity',1);
slides[0].setStyle('z-index','10');
$('navigation' + settings.id).setStyle('z-index',20);
slides.set('tween',{property: 'opacity', duration: options.duration});

} else if (settings.slider_type == 1) { // vertical
            $(slider).setStyle('top', 0);
            $(slider).setStyle('height', slider_size);
            slideImages = new Fx.Tween(slider, {
property: 'top', 
                duration: options.duration,
                transition: options.transition,
                link: 'cancel'
            });
        }
        else { // horizontal
            $(slider).setStyle('left', 0);
            $(slider).setStyle('width', slider_size);
            slideImages = new Fx.Tween(slider, {
property: 'left', 
                duration: options.duration,
                transition: options.transition,
                link: 'cancel'
            });
        }
        
// navigation effects
if (settings.show_buttons==1) {
var play = new Fx.Tween('play' + settings.id, {
property: 'opacity', 
duration: 200,
link: 'cancel'
}).set('opacity',0);
var pause = new Fx.Tween('pause' + settings.id, {
property: 'opacity', 
duration: 200,
link: 'cancel'
}).set('opacity',0);
}
if (settings.show_arrows==1) {
var nextFx = new Fx.Tween('next' + settings.id, {
property: 'opacity', 
duration: 200,
link: 'cancel'
}).set('opacity',0);
var prevFx = new Fx.Tween('prev' + settings.id, {
property: 'opacity', 
duration: 200,
link: 'cancel'
}).set('opacity',0);
}

        $('next' + settings.id).addEvent('click', function(){
            if (settings.show_buttons==1) hideNavigation();
            nextSlide();
        });        
        $('prev' + settings.id).addEvent('click', function(){
            if (settings.show_buttons==1) hideNavigation();
            prevSlide();
        });        
        $('play' + settings.id).addEvent('click', function(){
            changeNavigation();
            autoplay = 1;
        });        
        $('pause' + settings.id).addEvent('click', function(){
            changeNavigation();
            autoplay = 0;
        });
        
$('remslideshow-loader' + settings.id).addEvents({
            'mouseenter': function(){
                if (settings.show_buttons==1) showNavigation();
if (settings.show_arrows==1) {
nextFx.start(1);
prevFx.start(1);
}
stop = 1;
            },
            'mouseleave': function(){
                if (settings.show_buttons==1) hideNavigation();
if (settings.show_arrows==1) {
nextFx.start(0);
prevFx.start(0);
}
stop = 0;
            }
        });

var buttons = $('cust-navigation' + settings.id).getElements('.load-button');
buttons.each(function(el,index){
el.addEvent('click',function(e){
if (!is_fading && !el.hasClass('load-button-active')) {
loadSlide(index);
}
});
});

function updateActiveButton(active){
buttons.each(function(button,index){
button.removeClass('load-button-active');
if(index==active) button.addClass('load-button-active');
});
}

function loadSlide(i) {
if (settings.slider_type == 2) {
if(is_fading) return;
is_fading = true;
prev_slide = current_slide;
current_slide = i;
makeFade(prev_slide);

}
else {
current_slide = i;
slideImages.start(-settings.slide_size * current_slide);
updateActiveButton(current_slide);
}
}

        function nextSlide(){
if (settings.slider_type == 2)
nextFade();
else {
if (current_slide < max_slides) 
current_slide++;
else 
current_slide = 0;
slideImages.start(-settings.slide_size * current_slide);
updateActiveButton(current_slide);
}
        }
        
        function prevSlide(){
if (settings.slider_type == 2) {
prevFade();
}
else {
if (current_slide > 0) {
current_slide--;
}
else {
current_slide = max_slides;
}
slideImages.start(-settings.slide_size * current_slide);
updateActiveButton(current_slide);
}
        }
        
function nextFade(){
if(is_fading) return;
is_fading = true;
prev_slide = current_slide;
if (current_slide < max_slides) {
current_slide++;
}
else {
current_slide = 0;
}

makeFade(prev_slide);
}

function prevFade(){
if(is_fading) return;
is_fading = true;
prev_slide = current_slide;
if (current_slide > 0) {
current_slide--;
}
else {
current_slide = max_slides;
}

makeFade(prev_slide);
}

function makeFade(prev_slide){
slides[current_slide].get('tween').set(1);
slides[prev_slide].get('tween').start(0).chain(function(){
slides[prev_slide].setStyle('z-index',0);
slides[current_slide].setStyle('z-index',10);
is_fading = false;
});
updateActiveButton(current_slide);
}

        function hideNavigation(){
            if (!autoplay) {
                play.start(stop, 0).chain(function(){
                    if (!show_nav) 
                        $('play' + settings.id).setStyle('display', 'none');
                });
            }
            else {
                pause.start(stop, 0).chain(function(){
                    if (!show_nav) 
                        $('pause' + settings.id).setStyle('display', 'none');
                });
            }
            show_nav = 0;
        }
        
        function showNavigation(){
            if (!autoplay) {
                $('play' + settings.id).setStyle('display', 'block');
                play.start(stop, 1);
            }
            else {
                $('pause' + settings.id).setStyle('display', 'block');
                pause.start(stop, 1);
            }
            show_nav = 1;
        }
        function changeNavigation(){
            if (autoplay) {
                $('pause' + settings.id).setStyle('display', 'none');
                if (settings.show_buttons==1) pause.set('opacity',0);
                $('play' + settings.id).setStyle('display', 'block');
                if (settings.show_buttons==1) play.set('opacity',1);
            }
            else {
                $('play' + settings.id).setStyle('display', 'none');
                if (settings.show_buttons==1) play.set('opacity',0);
                $('pause' + settings.id).setStyle('display', 'block');
                if (settings.show_buttons==1) pause.set('opacity',1);
            }
        }
        
        function slidePlay(){
            setTimeout(function(){
                if (autoplay && !stop) 
                    nextSlide();
                slidePlay();
            }, options.delay);
        }

function sliderLoaded(){
// hide loader and show slider
if (/bMSIE 8.0b/.test(navigator.appVersion)) { // only for IE8
var visibles = new Array();
for (var i = 0; i < settings.visible_slides; i++) {
visibles[i] = slides[i];
}
visibles.each(function(el){
el.setStyle('opacity', 0);
});
}

$('remslideshow' + settings.id).setStyle('opacity',0);
$('remslideshow' + settings.id).setStyle('display','block');
$('remslideshow-loader' + settings.id).setStyle('background','url(blank.gif)');

$('remslideshow' + settings.id).fade('in');

if (/bMSIE 8.0b/.test(navigator.appVersion)) { // only for IE8
visibles.each(function(el){
el.fade('in');
});
}
// count and change remslideshow dimensions
buttons_height = $('next' + settings.id).getStyle('height').toInt();
buttons_height = Math.max(buttons_height,$('prev' + settings.id).getStyle('height').toInt());
//$('navigation' + settings.id).setStyle('height',buttons_height);
         button_pos = $('navigation' + settings.id).getStyle('top').toInt();
         remslideshow_height = $('remslideshow' + settings.id).getStyle('height').toInt();
if(button_pos > 0) {
new_height = buttons_height + button_pos;
} else {
new_height = remslideshow_height - button_pos;
}        
         if (new_height > remslideshow_height) {
             $('remslideshow' + settings.id).setStyle('height', new_height);
$('remslideshow-loader' + settings.id).setStyle('height', new_height);
         if (button_pos < 0) {
$('navigation' + settings.id).setStyle('top', 0);
$('slider-container' + settings.id).setStyle('top', -button_pos);
}
         }
buttons_margin = $('navigation' + settings.id).getStyle('margin-left').toInt() + $('navigation' + settings.id).getStyle('margin-right').toInt();
remslideshow_width = $('remslideshow' + settings.id).getStyle('width').toInt();
if(buttons_margin < 0) {
$('remslideshow-loader' + settings.id).setStyle('width', remslideshow_width - buttons_margin);
}
nav_width = $('navigation' + settings.id).getStyle('width').toInt();
play_width = $('play' + settings.id).getStyle('width').toInt();
$('play' + settings.id).setStyle('left',(nav_width/2 - play_width/2));
pause_width = $('play' + settings.id).getStyle('width').toInt();
$('pause' + settings.id).setStyle('left',(nav_width/2 - pause_width/2));

if(autoplay) {
$('play' + settings.id).setStyle('display','none');
} else {
$('pause' + settings.id).setStyle('display','none');
}

// start autoplay
slidePlay();
}

if(settings.preload) sliderLoaded.delay(settings.preload);
else if (DocumentLoaded) sliderLoaded();
else window.addEvent('load', sliderLoaded);
        
    }
    
});

})(document.id);
Logged Logged
Last Edit: 2016/02/29 23:24 By sliwamaster.
The administrator has disabled public write access.
#18585
Taras (User)
Platinum Boarder
Posts: 2857
graphgraph
User Offline Click here to see the profile of this user
Re:mod_remslideshow show if ($(window).width() 8 Years, 1 Month ago
Karma: 58  
Hello,

We recommended to use Module Touch Slider
for Real Estate Manager for resolutions lower than 1024px. Touch Slider is slideshow module for Joomla too and it 100% responsive and provides an optimal viewing experience across a wide range of devices.

ordasoft.com/Real-Estate-Manager-Software-Joomla.html
Thanks
Logged Logged
The administrator has disabled public write access.
#18588
sliwamaster (User)
Junior Boarder
Posts: 30
graphgraph
User Offline Click here to see the profile of this user
Re:mod_remslideshow show if ($(window).width() 8 Years, 1 Month ago
Karma: 0  
I don't recomend, because it's payable, I have done payment already for other componnets from Your site I would like to get help with this one.
Logged Logged
The administrator has disabled public write access.
#18593
Taras (User)
Platinum Boarder
Posts: 2857
graphgraph
User Offline Click here to see the profile of this user
Re:mod_remslideshow show if ($(window).width() 8 Years, 1 Month ago
Karma: 58  
Hello


Could you give us full FTP and admin access
and our team will try to find solution special for You, FTP and admin access You can send to our contact form.
ordasoft.com/contact-us-form


Link on website

Joomla Admin

username
password


FTP

FTP host

FTP username

FTP password

Thanks,
Taras
OrdaSoft team.
Logged Logged
The administrator has disabled public write access.
#18594
sliwamaster (User)
Junior Boarder
Posts: 30
graphgraph
User Offline Click here to see the profile of this user
Re:mod_remslideshow show if ($(window).width() 8 Years, 1 Month ago
Karma: 0  
It's impossible, because it's localsever on my PC computer by xammp
Logged Logged
The administrator has disabled public write access.
#18619
Taras (User)
Platinum Boarder
Posts: 2857
graphgraph
User Offline Click here to see the profile of this user
Re:mod_remslideshow show if ($(window).width() 8 Years, 1 Month ago
Karma: 58  
Hello,

It is very hard configure slideshow, that's way we need access.

you can use Module Touch Slider
for Real Estate Manager for resolutions lower than 1024px. Touch Slider is slideshow module for Joomla too and it 100% responsive.

or migrate website on hosting and provide access. Our team will find solution for you.

thanks
Logged Logged
The administrator has disabled public write access.
Go to top
Powered by OrdaSoft
 
What are you looking for?
»