• Registered: 2012-11-02
  • Posts: 14

Topic: Responsive Slider Layout

Hello, didn't find this topic or don't know how to word it correctly in a search.

Basically I would like to make a slider for a HTML website that is the size of the images and responsive. No thumbs or nav or buttons. Just a set of images that fade and repeat. I have this part working already.

When I create one that is responsive it seems to have to be 100% width and height. That however fills the screen.

If I make the gallery a fixed size it works but is not responsive.

Am I missing a setting that makes both these possible?

Thanks

  • Registered: 2012-04-24
  • Posts: 5,905

Re: Responsive Slider Layout

This seems to be a similar request to your query here.
It looks like you would like the size of the gallery to change dynamically depending on the size of the image currently being displayed. If this is the case, then my reply here should help.

If you want the gallery's dimensions to change with the size of the user's browser window (but not depending on the size of the image currently being displayed), then you will need to set your gallery's dimensions (and the dimensions of all parent containers of your gallery) to percentages. If there is a fixed value anywhere up the chain, then the dimensions of the gallery will become fixed, e.g. 100% x 100% x 100% x 800px = 800px, no matter what the size of the user's browser window is.

  • Registered: 2012-11-02
  • Posts: 14

Re: Responsive Slider Layout

Wow, I forgot about those posts.

It's not exactly the same or I can't understand what you are describing.

Here's a text HTML site which I am trying to get a slider inside the sheet in a cell to just be the size of the images and responsive. It's really wonky. http://sites.ecowebdesign.net/juice/

I would like to know if this type of slider is possible? This site uses a slideshow that is responsive and fits in the cell to create a top slideshow. http://spectrumhealthmedical.com/

This is all I want to do.

Thanks for you patience.

  • Registered: 2012-04-24
  • Posts: 5,905

Re: Responsive Slider Layout

It is difficult to see exactly what is going on in your web page as your layout is controlled by complex JavaScript and your 'juicebox-container' div is nested within 9 other divs (at least one of which has not been given any dimensions via CSS) and an article.
Make sure that all the parent containers of your gallery have been given dimensions via CSS and, as you are using percentage dimensions for your gallery, please see this note for Using Percentage Heights. (It may also apply to widths in your scenario.)

If all you want is for your gallery to not take up the entire width of the browser window and for it to be horizontally centered, try something like the following (changing the gallery height as required):

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '80%',
        galleryHeight: '100%'
    });
</script>
<div id="juicebox-container" style="margin: 0 auto;"></div>
<!--END JUICEBOX EMBED-->

5 Reply by arachnid (edited by arachnid 2013-08-30 18:53:50)

  • Registered: 2012-05-01
  • Posts: 94

Re: Responsive Slider Layout

I had the same problems and have solved it. See http://www.delosgaia.nl/ how I have done it. Real responsive is not possible except when working with an iframe or full page with only one DIV. Do not define a gallerywidth and galleryheight in percentage but use px.

regards
Hans


DaveOzric wrote:

Hello, didn't find this topic or don't know how to word it correctly in a search.

Basically I would like to make a slider for a HTML website that is the size of the images and responsive. No thumbs or nav or buttons. Just a set of images that fade and repeat. I have this part working already.

When I create one that is responsive it seems to have to be 100% width and height. That however fills the screen.

If I make the gallery a fixed size it works but is not responsive.

Am I missing a setting that makes both these possible?

Thanks

  • Registered: 2012-11-02
  • Posts: 14

Re: Responsive Slider Layout

arachnid wrote:

I had the same problems and have solved it. See http://www.delosgaia.nl/ how I have done it. Real responsive is not possible except when working with an iframe or full page with only one DIV. Do not define a gallerywidth and galleryheight in percentage but use px.

regards
Hans


DaveOzric wrote:

Hello, didn't find this topic or don't know how to word it correctly in a search.

Basically I would like to make a slider for a HTML website that is the size of the images and responsive. No thumbs or nav or buttons. Just a set of images that fade and repeat. I have this part working already.

When I create one that is responsive it seems to have to be 100% width and height. That however fills the screen.

If I make the gallery a fixed size it works but is not responsive.

Am I missing a setting that makes both these possible?

Thanks

That seems odd. There are so many sliders that are responsive I can use or extensions for say Joomla, how is it this cannot be accomplished?

I am having product support look at this for my site. I will certainly report back with any results.

  • Registered: 2012-04-24
  • Posts: 5,905

Re: Responsive Slider Layout

Your gallery will resize dynamically with the size of the user's browser window as long as the gallery's own dimensions and the dimensions of all parent containers are expressed as percentages.

Otherwise, you can listen for a change in the size of the user's browser window, get the new window size from the browser and set a new appropriate size for the gallery dynamically using JavaScript as is done in the Resizable Gallery pages here.

  • Registered: 2012-11-02
  • Posts: 14

Re: Responsive Slider Layout

I have given up on a slider for now. arachnid seems to be correct.

However I now want to have a gallery on a page with some other content (same site Artisteer HTML) and everything is fine with a 100% gallery if it's the only thing on the page. Once I add any other content to the page (another div) the gallery pushes off to the side at 100%.

If I go down to a % that fits, say 40%, it stays but has to be aligned left and the images are very tiny in responsive mode.

So it isn't possible to have a embedded gallery at all if I have another div with content? This seems odd.

FYI, I tried Wow Slider for a slider to see and it had on problems staying in a div container remaining responsive.

  • Registered: 2012-04-24
  • Posts: 5,905

Re: Responsive Slider Layout

Once I add any other content to the page (another div) the gallery pushes off to the side at 100%.

Where the gallery is positioned on your web page will be dependent on the layout of your page (and the CSS you use).
For example, if you float certain elements on your page, you may need to either float the 'juicebox-container' div left or right or clear the floats before the 'juicebox-container' div on your page.

So it isn't possible to have a embedded gallery at all if I have another div with content? This seems odd.

This is not correct. You can embed a gallery in an existing web page alongside other content (e.g. other divs) by following the Embedding in a HTML Page instructions.

Take a look at the Resizable Gallery demo pages I linked to in my last post.
The View Resizable Gallery with Top Menu Example has a gallery which is embedded alongside a header div and a footer div (on the same page) and the gallery resizes dynamically depending on the size of the user's browser window. Take a look at the source of the web page in your browser to see how this can be achieved. You should hopefully be able to copy and modify the code to suit your own needs.