straydogstudio / film_roll Goto Github PK

Hi.
First of all i could not find a carousel plugin which puts a active link on leftmost or rightmost carousel item.
Can we do that using this plugin?
--> 'activeLinkPos': left/center/right

the default will be center but we can have an option of having the active list item on left or right.

Hello,

I have some trouble when the content is smaller than the container (on smartphone or resized window).
I can't scroll on the film_scroll div (on smartphone) and the swipe effect doesn't works anymore when I try to swipe with my finger or even click on the buttons.

Can you give me an issue ?

Best regards,
Thib.

Parameter force_rotate: true in some cases works ok. But in some cases it caused browser page hangs. This is an example of page, that used Film_Roll with force_rotate: true paremeter which hangs in my browser (last version of Chrome).

`
<script type="text/javascript" src="http://127.0.0.2/stat/jquery.min.js"></script>
<script src="http://127.0.0.2/stat/film_roll-0.1.16/js/jquery.film_roll.js"></script>

Hello,

I searched this but I couldn't find in docs.
Can we have a infinite loop ?

For more on this feature visit : http://owlcarousel.owlgraphic.com/demos/basic.html

As you can see from the demo than when we click on prev button, 12th item is shown.

Hi. When I include TouchSwipe library in the page, link clicks are prevented. How can I click links while swipe is active? Because the page is accesible by both mobile and desktop users. Thanks.

Hallo, thank you, this plugin is great!
Is some way, how add slide counter? (slide # / # of slides)
Thanks

You just helped answer a question re: touch support I had. Thanks for your time.

I came across your plugin attempting to build my own slideshow doing the same thing — it was amazing that no one else had a centering slideshow that was also a carousel. While my skills in javascript proved too low to properly do everything I needed on my own, I did come up with some concepts that might help with some of the issues you've had with your version.

Here is my working example with my attempt. http://www.ookb.co/rg-about.html
I've handled the animations with CSS transitions instead of any jQuery.
jQuery sets margin-left properties for the whole wrapper of the images, and then the CSS transition property is set to animate the margin-left change. This solves the multi-click jump issue you note having.

There is, however, one draw back. In all alternative solutions a click during an animation does not work correctly. E.g. if someone clicks next twice, the library is not able to properly detect the current position of the shuttle in mid animation. So things jump around. If this does not bother you try transit.js. If it does, stick with jQuery animate.

I know the proper way to share this idea would probably be to fork your code and then add my stuff — but I don't know enough JS to do that. I thought this would suffice as a way to have a conversation at least.

What's your suggestion for stopping/destroying an instance of FilmRoll? Since it uses quite a bit of CPU I'd like to pause it when it's not visible, and resume it when it's visible.

hallo,
i know that this carousel is "a lightweight carousel that focuses on one item, centering it in the view", but i need for some reason align focused item not in center of view.
Is there any way, how i can setup horizontal alignment of active item?
Thank you very much
(sorry for my english)

Hi
I'm on mixing FilmRoll with Angularjs to create a few angularjs directive to make things easier to load and display slides which created by an Angular Service.
I've done some google to check whether there is an existing angular directive for this purpose or not but I didn't find one .
do you know any ?
and I was trying to create one but I ends up with this error

TypeError: _this.child_widths is undefined
_this.active_half = _this.child_widths[_this.index] / 2;

here is what I did :
first I fetch data from my service and create my divs inside a container, then I create FilmRoll object on that container.
I leave some codes for you which may helps you better understand my issue :

Template for each slide :

<div class="item">
    <div class="content-item">
        <div class="special-left-item"
             style="background: url('{{book.image}}') center no-repeat;background-size: cover;">
        </div>
        <div class="shadow-left-item">
            <div class="icon-item-roll-book">
                <img src="images/rollbook/Heart_icon_forwishlist.png"/>
            </div>
            <div class="icon-item-roll-book">
                <img src="images/rollbook/Book_post_share_icon.png"/>
            </div>
        </div>
        <div class="body-item-hover">
            <div class="text-body-item-hover">
                <span class="title-roll">
                    &#8249;&#8249;
                    {{book.title}}
                    &#8250;&#8250;
                </span><br/>
                <span class="subtitle-roll">نویسنده :
                    {{book.author}}
                </span><br/>
                <span class="price-roll"> {{book.price}}تومان</span>
            </div>
        </div>
    </div>
</div>

The Container and Ng-Repeat :

  <div id="RollIranianBook">

        <span ng-repeat="mybook in books" class="bookViewOne" book="mybook">A</span>

    </div>

And finally the directive itself :

app.directive("bookViewOne", ["$timeout",function ($timeout) {
    return {
        restrict: "C",
        replace: true,
        scope: {
            book: "=",
            xWidth: "@"
        },
        templateUrl: "templates/book-view-one.html",
        link: function (scope, element, attrs) {
                $timeout(function () {
                    new FilmRoll({
                        container: '#RollIranianBook',
                        height: 300,
                        scroll: false,
                        position:'left'
                    });
                },2000);
        }
    }
}]);

Lets take the 3rd carousel for example.

http://straydogstudio.github.io/film_roll/

so, if the carousel width is more than number of items in it, can we have a class added to next/prev buttons???

disabling click or hiding them can be via css. for example

.film_roll_prev.flimRollFreeze,
.film_roll_next.flimRollFreeze{
    opacity: 0
}

( i need this feature as current project requirement is such that carousel next/prev buttons are hidden when the width of carousel is more than items in it)

It would be nice if there were a build-in method to destroy a current FilmRoll object. This would enable dynamically creation and destroying of galleries and is very handy if you would like to load a gallery after the user clicked a link or so.

As a workaround I suggest doing the following:

$("#container_id").swipe("destroy");
$("#container_id").removeData();
$("#container_id").html("");

The last line isn't really necessary if you are going to directly create a new FilmRoll gallery afterwards. This could be done by filling #container_id with the appropriate content and subsequently creating the FilmRoll as usuall using configure_load: true. The first line is only needed if TouchSwipe is used.

Love this tool. Definitely saved me a ton of headache!

Is there a quick option to disable the pause on hover feature?

If you add a fade transition along with .active for film_roll_child, it will be smooth between navigation

Hello, are you thinking about adding this feature?

Hello, is it possible to have the film roll center on a specific item when it initializes?
For example, can I make it so that it centers on item 145/160 rather than 1/160?

Can you give some example of using callbacks?

Hello, this is great plugin! Thank you.
I was trying to figure out how to move to a div from a costum text link.
While "#div1" is a film_roll child I was trying to use the following code:
My Costum Link

But this doesn't seem to work.

I would appreciate your advise.
Thanks!
MSt

When i use START_INDEX value the next/previous buttons wont go back/forward. It's always jumping back to the picture with index 0.

Is there a option to avoid this so it will work to go back/forward in the items if start_index is set ?

Have a problem to init filmroll when popup open. First time loading normal, but when i'm try to open popup second time, slider crashed. I'm using magnific popup callback:

$.magnificPopup.open({
items: {
type: 'inline',
src: '#gallery-popup',
},
callbacks: {
open: function() {
var popupGallery = new FilmRoll({
container: '#photo-slide',
pager: false,
next: '.slider-photo-wrap .next',
prev: '.slider-photo-wrap .prev',
height: 500,
scroll: false,
configure_load: true,
});
}
},
})

Screenshots:
Loading 1 time: http://take.ms/U5dUi
Loading this popup another time (crashed): http://take.ms/BYL3a

Hi, thanks for creating this. It's exactly what I need. I do have one problem and looking through the documentation and source isn't helping me figure out how to fix it: All the child divs of .film_roll are receiving new style attributes setting the width of the div to 354px. Here's an example.

`

I attempted to turn off default CSS with no_css: true and to restyle the divs (but of course the local style attribute overrides my CSS). Thanks.

I'm having one problem. When installing 2 slider runs on one tab, and when transferred to the screen, the 2nd tab slider smartphone does not capture the screen witdh. Please help me solve this problem.
Desktop run ok:
TAB 1: https://gyazo.com/ab71f35d4985407af0cadf5489a8a9d2
TAB 2: https://gyazo.com/ab71f35d4985407af0cadf5489a8a9d2

Smartphone not working Tab 2nd:
TAB 1: https://gyazo.com/1e823500dea2c56e65b29721194b9366
TAB 2: https://gyazo.com/7e6efb52538008c34d8e8c503976e868

Thank all!

Hello,
just wanted to ask another question:
Setting the interval to zero
interval:0,
works fine as long as no button was clicked; after that the interval is set back to the standard interval again (4000)

Best,
MSt

I read the documentation and I find it very interesting Idea to use a function for configure_load but I didn't find any clue about how to correctly use this function ?
can you please give me some details about how to use this function?

.removed question

When i click on < or > for scrolling, ALL of the callbacks are triggered twice. Looks like a bug.

jQuery(function() {
  this.film_rolls || (this.film_rolls = []);
  this.film_rolls['film_roll_1'] = new FilmRoll({
    container: '#film_roll_1',
    height: '+10'
  });
    return true;
});

$('#film_roll_1').on('film_roll:activate', function(event) {
    alert(event.toSource()); // shows 2 times
});

Hello,

"film_roll:moved" does not trigger in following example :

http://codepen.io/Prashantsani/pen/emoXGO
Reason : The carousel width is more than the number of items in it.

But the same thing works in following example :
http://codepen.io/Prashantsani/pen/WbWmZY
Reason : carousel width is bigger than number of items in it.

Thanks.

Hello.
I m using your carousel for one of my recent projects. However, we realised that on click the carousel does not go to respective item.,

For Example
http://straydogstudio.github.io/film_roll/
(referring first carousel)
If i click on 2nd carousel item (600 x 500), it does not do anything.
rather it should go to that item.

Thanks.

hello your plugin is fantastic, great work
is there a way throught the css to have the container on the full page or full browser
i mean height: 100% and width: auto
i try to set the plugin but it doesn't work

thanks

Hi there.

Is there possible to add a caption into those carousel?

I tried to add in a caption yesterday. But it's fail to do so.

In my carousal, Its working fine in full width browser. But if I reduce the size of a browser (or in Ipad mini 2), It won't show the right side images after active(middle) one.
Specially not working on Ipad mini 2

Full width browser

In reduced size (768×1024 , 800×1280, 980×1280) browser or Ipad mini

Filmroll is failing to load in iOS 8 until the window is scrolled, possibly something to do with the resizing event. Here's a video: https://www.dropbox.com/s/3sw8z18mqytn08s/filmroll-ios8.mov?dl=0

I have 9 child divs. Clicking a link in the pager, or the next/prev buttons, which would require a significant of amount of scrolling you can see the child div disappear before it has scrolled off the screen. I was going to fork and alter the code but succeeded only in breaking other things so I am reporting it here. Thanks.

When clicking a button with film_roll.moveToIndex(4), while 4 is the last .film_roll_child of the .film_roll_shuttle, the left slide is suddenly missing

Working example:
http://www.workupload.com/file/TUQdyNe5

Hi, Is it possible to stop the film roll move to right (tune to center) before start rolling?

Thanks!!

I just wanted to say thank you, really looking forward to In The Works this is certainly whats missing. Especially links and touch support.

Hi, I need to add a start and pause button in the slider, can you give me some suggest? thanks!

Is there a callback which I can call after the film_roll is fully loaded? I would like to give all images the exact same, absolute position, as the active (centered) image. And after that all images (except the active one, cause I don't move that image in the first place) need to slowly move back to it's original position by using:

-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

So it looks like a deck of cards which slowly unfolds if you know what I mean.

So is there a callback for this? Cause if I use dom_ready to determine the position of the active image, it returns a left position of -4, which is not correct.

Hi, how can i make possible to scroll slider on hover ?

This is really great lib, this is the effect I want long time ago. thank you.

But have you thought to support IE 6/7, it is broken now on IE6/7.

Hallo, are you thinking about adding this feature?
THX again

My situation is like "Feature Request: Active Item's position on left or right instead of centered #31"
My form will always show 2 items, and I would like it to show 2 items. But it shows half an item, then a whole item, followed by a half item. If the items were left or right justified, it would show 2 items. That would be perfect.

Hi there. I love the slideshow, it is what I've been looking for for ages. I have tried to incorporate it into a Weebly site ( http://photographertestsite.weebly.com/ ) I have made and it works great in Desktop browsers but all the images just stack on top of each other on a mobile. Is there a CSS way to avoid this ?
Sorry if this is a dumb question but my coding understanding is extremely limited and I've been googling for an understandable solution for about 10 hours now!

Cheers.

Is there a function I can call for next or previous slide so that I can easily add some gesture support?

basically I want to do this:

//Enable swiping...
  $("#film_roll").swipe( {
    //Generic swipe handler for all directions
    swipe:function(event, direction, distance, duration, fingerCount) {
      if (direction=="left") {
        //WHATEVER THE NEXT FUNCTION IS
      } else if (direction=="right") {
        //WHATEVER THE PREV FUNCTION IS
      }
    },
    //Default is 75px, set to 0 for demo so any distance triggers swipe
     threshold:0
  });

I'm using jquery TouchSwipe for the swipe/gesture handling.