HTML5 Parallax Slider Support Product Page

panels/sliders with progressbar

Asked 17 Jan 2013 07:27:24
1
has this question
17 Jan 2013 07:27:24 Michele - posted:
I'd like to know if is possible insert a general progress-bar for each slider/panel.

I'm looking a solution like this:
www.gayadesign.com/scripts/presentationCycle/

Other example (see the little yellow rectangle in the slider):
www.sap.com/index.epx

Do you know if available a jquery plugin to use with your parallax slider extension?

Thanks,
Michele

Replies

Replied 17 Jan 2013 08:06:32
17 Jan 2013 08:06:32 Vulcho Vulev replied:
Hello Michele.

Currently the extension don't provide such progressbar .Your idea will be discussed with our developers.
Regarding your second Example. You can construct simmilar slider using DMXzone Supersized

Regards:Vulcho.
Replied 17 Jan 2013 10:01:59
17 Jan 2013 10:01:59 Michele - replied:
Hi Vulcho... another question... Supersized extension is compatible with Parallax Slider? is possibile to use them together?

Thanks
Replied 17 Jan 2013 10:22:58
17 Jan 2013 10:22:58 Vulcho Vulev replied:
Yes Michele.

You can link the both extensions to work together by pressing the blue clip called "behavior connector".
You can explain your idea here and i will guide you how you can achieve it.

Regards:Vulcho.
Replied 17 Jan 2013 21:18:01
17 Jan 2013 21:18:01 Michele - replied:
Hi Vulcho... I bought supersized extension and now I've the fullscreen background, but... parallax slider extension is RWD (Responsive Web Designer) compatible? ... currently have problems to adapt the panels to the various resolutions (percentages and not pixels).

Thanks
Replied 18 Jan 2013 10:49:05
18 Jan 2013 10:49:05 Vulcho Vulev replied:
Hello Michelle.

You can style responsive the parallax slider in the following way:

1.You need to create 3 sliders with the elements for 3 different resolutions.
The IDs that i will use in my example are:
dmxParallaxSlider1 - with width:480px
dmxParallaxSlider2 - with width:768px
dmxParallaxSlider3 - with width:1232px

After that in your responsive stylesheet you need to add the following media queries to prevent from DOM loading the desired element :

/* Mobile Layout: 480px and below. */
@media only screen and (max-device-width: 480px) {

#dmxParallaxSlider2 {
    display:none;
}

#dmxParallaxSlider3 {
    display:none;
}
}


/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

#dmxParallaxSlider1 {
    display:none;
}

#dmxParallaxSlider3 {
    display:none;
}
}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {


#dmxParallaxSlider1 {
    display:none;
}

#dmxParallaxSlider2 {
    display:none;
}
}

Replied 21 Jan 2013 07:45:09
21 Jan 2013 07:45:09 Michele - replied:
Ok... but now I have another problem with Supersized extension.
I need to hide the fullscreen in the smartphone and tablet resolution, but If I include your supersized script in a css instruction, not works.

For example, if I try with "display:none" for smartphone in a media query, not hidden nothing:
<div class="hidden-phone">
<script type="text/javascript">
/* dmxSupersized name "dmxSupersized" */
jQuery(document).ready(...
</div>


Any ideas to resolve this issue?

Can I use the backgrounds of the panels of Parallax for this, instead Supersized script?
Is it possibile to set width 100% for every panels (each with its own background) and center the content (images, text, video, HTML tags, URLs etc.) in the page?

Thanks
Replied 21 Jan 2013 10:16:05
21 Jan 2013 10:16:05 Vulcho Vulev replied:
Hello Michele.

In your responsive style sheet add the following css rules in the media queries for tablet and mobile layout:

<style type="text/css">
.load-item {
    display: none !important;
}
#supersized {
    display: none !important;
}
</style>

They will prevent Supesized to be loaded.

Regards:Vulcho.
Replied 21 Jan 2013 14:32:12
21 Jan 2013 14:32:12 Michele - replied:
Ok… another issue… I'd like to insert in supersize, the same image but with width and height different, optimized for smaller and larger desktop. I'd like to use Parallax with fixed height for desktop and landscape tablet resolutions but the images in supersize must change to adapt in the correct way to avoid to lose the focal point.

In practice, every slide would have three (or more) images to be loaded in accordance with screen resolution.

Is it possible?

Examples:
For Desktop over 1600 width:
<script type="text/javascript">
  /* dmxSupersized name "dmxSupersized" */
  jQuery(document).ready(
   function()
     {
       jQuery.dmxSupersized(
         {"design": "shutter", "transition": 1, "transition_speed": 300, "performance": 0, "min_height": [b]415[/b], "vertical_center": false, "fit_portrait": false, "fit_landscape": true, "slide_links": "", "thumb_links": false, "arrows_navigation": false, "play_pause_btn": false, "slides_titles": false, "slide_counter": false, "slides": [{"image": "images/sliders/[b]slide_01_desket_large.jpg[/b]" ...



For Desktop from 1200 to 1599 width:
<script type="text/javascript">
  /* dmxSupersized name "dmxSupersized" */
  jQuery(document).ready(
   function()
     {
       jQuery.dmxSupersized(
         {"design": "shutter", "transition": 1, "transition_speed": 300, "performance": 0, "min_height": [b]315[/b], "vertical_center": false, "fit_portrait": false, "fit_landscape": true, "slide_links": "", "thumb_links": false, "arrows_navigation": false, "play_pause_btn": false, "slides_titles": false, "slide_counter": false, "slides": [{"image": "images/sliders/[b]slide_01_desket_medium[/b].jpg" ...



Etc.


Thanks,
Michele
Replied 21 Jan 2013 15:59:49
21 Jan 2013 15:59:49 Teodor Kuduschiev replied:
Hello,

This is not possible. The whole point of Supersized is that it scales automatically on different screen sizes.

Reply to this topic