Menu icon Foundation

My Posts

No Content

My Comments

Nimish kumar commented on Greg Blass's post over 3 years

Hi,

I don't know whether it is still a problem for Foundation 5, but I had a similar issue while using Foundation version 4.1.0, While loading the partial from angular js,

So that is what I did in my partial :

1) I added a dummy list with an image as first element into the <ul> container
<li class="hack-orbit-li">
<img src="PATH/htr-slide.png" width="100%" />
</li>

Note : The Dimensions of image inside <li> above must be same as other images you are using in carousel

then in my foundation.orbit.js :
2) in _init funtion - remove :

$slides = $slides_container.children();

and replace it by

$slides = $slides_container.children().not('.hack-orbit-li');


3) in _init_dimensions function -
add this as the last line

//custom hack list element need to be removed
$slides_container.children('.hack-orbit-li').remove();

_init_dimension is initially used to calculate the height of slide_container so the dummy li element helps in calculating the height of the slide container(otherwise it will be 0px as there is no content untill image loads)

I think Foundation 5 can be fixed with the same idea.

Nimish kumar commented on Murphy Randle's post over 3 years

Hi,

I don't know whether it is still a problem for Foundation 5, but I had a similar issue while using Foundation version 4.1.0, While loading the partial from angular js,

So that is what I did in my partial :

1) I added a dummy list with an image as first element into the <ul> container
<li class="hack-orbit-li">
<img src="PATH/htr-slide.png" width="100%" />
</li>

Note : The Dimensions of image inside <li> above must be same as other images you are using in carousel

then in my foundation.orbit.js :
2) in _init funtion - remove :

$slides = $slides_container.children();

and replace it by

$slides = $slides_container.children().not('.hack-orbit-li');


3) in _init_dimensions function -
add this as the last line

//custom hack list element need to be removed
$slides_container.children('.hack-orbit-li').remove();

_init_dimension is initially used to calculate the height of slide_container so the dummy li element helps in calculating the height of the slide container(otherwise it will be 0px as there is no content untill image loads)

I think Foundation 5 can be fixed with the same idea.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Greg Blass's post over 3 years

Hi,

I don't know whether it is still a problem for Foundation 5, but I had a similar issue while using Foundation version 4.1.0, While loading the partial from angular js,

So that is what I did in my partial :

1) I added a dummy list with an image as first element into the <ul> container
<li class="hack-orbit-li">
<img src="PATH/htr-slide.png" width="100%" />
</li>

Note : The Dimensions of image inside <li> above must be same as other images you are using in carousel

then in my foundation.orbit.js :
2) in _init funtion - remove :

$slides = $slides_container.children();

and replace it by

$slides = $slides_container.children().not('.hack-orbit-li');


3) in _init_dimensions function -
add this as the last line

//custom hack list element need to be removed
$slides_container.children('.hack-orbit-li').remove();

_init_dimension is initially used to calculate the height of slide_container so the dummy li element helps in calculating the height of the slide container(otherwise it will be 0px as there is no content untill image loads)

I think Foundation 5 can be fixed with the same idea.

You commented on Murphy Randle's post over 3 years

Hi,

I don't know whether it is still a problem for Foundation 5, but I had a similar issue while using Foundation version 4.1.0, While loading the partial from angular js,

So that is what I did in my partial :

1) I added a dummy list with an image as first element into the <ul> container
<li class="hack-orbit-li">
<img src="PATH/htr-slide.png" width="100%" />
</li>

Note : The Dimensions of image inside <li> above must be same as other images you are using in carousel

then in my foundation.orbit.js :
2) in _init funtion - remove :

$slides = $slides_container.children();

and replace it by

$slides = $slides_container.children().not('.hack-orbit-li');


3) in _init_dimensions function -
add this as the last line

//custom hack list element need to be removed
$slides_container.children('.hack-orbit-li').remove();

_init_dimension is initially used to calculate the height of slide_container so the dummy li element helps in calculating the height of the slide container(otherwise it will be 0px as there is no content untill image loads)

I think Foundation 5 can be fixed with the same idea.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content