Feature Request: Active Item's position on left or right insted of centered about film_roll HOT 13 CLOSED

I'm not quite sure what you are thinking of. You want a link on just one item, or you want to start centered one of three?

If you want a link that centers on just one item, then you'll have to put an id on that item and change the last js I gave you to refer to that one element.

There is a start_index option that lets you choose which one is centered first, but I'm not sure that is what you are thinking of. Keep filling out that explanation and we can see what is possible.

from film_roll.

Hey!
You have misunderstood my requirement.

Hope below image links help :)
Now The current state of the carousel is such that the active link is always in middle (center)
http://prashantsani.com/Misc/github/center.png

The carousel active link can be right most item
http://prashantsani.com/Misc/github/right.png

or left most item
http://prashantsani.com/Misc/github/left.png

So, We can choose the position of active link whether it is in left, right or center while intialising the plugin.

        film_roll = new FilmRoll({
            container: '#slider',
            activeLinkPos: "left"
        });

OR

        film_roll = new FilmRoll({
                container: '#slider',
                activeLinkPos: 'right'
        });

OR

        film_roll = new FilmRoll({
            container: '#slider',
            activeLinkPos: 'center' //default
        });

Thanks.

(PS: Sorry clicked on "close and Comment" button by mistake, re-opened the issue).

from film_roll.

That's an interesting requirement. Sometimes the carousel has 10 or 20 images in it, so left/center/right won't fit that situation. FilmRoll is always focused on putting one element in the middle, regardless of the relative widths of all the items or how many there are. It's sort of stuck on that by virtue of its purpose.

But, you could do this yourself easy enough. Something like:

var film_roll = new FilmRoll({ container: '#slider', ... });
var offset = -1; // go to the left one

$('#slider').on('film_roll:moving', function() {

  //get the index of the offset
  var offset_index = (film_roll.index + offset) % film_roll.children.length;
  if (offset_index < 0) offset_index = film_roll.children.length - 1;

  //get the child of the offset, as a jQuery object
  $offset_child = $(film_roll.children[offset_index]);

  //now do whatever you want, such as add your own class for CSS highlighting
  film_roll.children.removeClass('offset_active'); // first remove all others
  $offset_child.addClass('offset_active');

  //or do anything else

});

Note that children returns a jQuery collection, but individual children are not jQuery objects.

You can do anything you want at that point. Will that work?

from film_roll.

Hey! Thanks for the reply.

But above solution is not working.The current item is always centered.

Here is a code-pen for the same.
http://codepen.io/Prashantsani/pen/OPqooy

I want it to be either 1st visible item or last visible item
(the below 3 carousels are just images to show the requirement).

I noticed that #32 has almost the same requirement 👍

from film_roll.

So the idea is the current item would be on the left of the visible window, or on the right of the visible window, instead of the center?

from film_roll.

Yes! Exactly.
Instead of center (by default) we can give left or right as options.

so initialising carousel will be something like :

        var film_roll = new FilmRoll({
                container: '#slider',
                scroll:false,
                pager:false,
                position: 'left' //can be 'right' or 'centre' & 'centre' is the default
        });

from film_roll.

Well that took me long enough to understand what you were asking for. :P

This should be pretty easy to do, provided I have the time to sit down and do it. I think :left, :right, :center (the default), or some pixel offset from center positive or negative would do.

from film_roll.

Great!
if you can do this 👍
Then i ll replace the other plugin carousel in my project 💯

(Again, I accidentally closed the project! Reopened it )

from film_roll.

@prashantsani I've implemented the position option, and an offset option. (Also, the moved event now fires when the carousel is smaller than the container, and the prev/next buttons are automatically hidden. more on that later.) Would you try the code out before I 'release' it and update the README? Download it from here: https://github.com/straydogstudio/film_roll/tree/master/js

Let me know if it works for your scenario.

The position option takes 'left', 'right', or it defaults to center. There is also an offset option which will add or remove pixels to the position by a given amount (e.g. 20 for 20 pixels to the right, -50 for 50 pixels to the left.) The offset works no matter what the position is.

from film_roll.

Hey!!!
Thanks for the update. However, there seems to be an issue.

here is code-pen of the same.
http://codepen.io/Prashantsani/pen/emqBpB

When u click on next/next/next and once you arrive on the last carousel item, an item does not get added peroperly(that is in our example, one item gets added the same goes to left, leaving a blank area where 3rd item shd be added).

I have also put up a screenshot inside codepen so that its easier for you to understand :)

from film_roll.

Great. Thanks. I'll see what I can do for that. It's not measuring the space available correctly given the positioning.

from film_roll.

Ok, I think I've fixed it. Take a look here:
http://codepen.io/straydogstudio/pen/myNBKY

from film_roll.

I'm going to close this and the other issues. They should be fixed in 0.1.16, which is now released. Thanks a lot for your ideas and testing. It's been a big help!

Of course open these back up or create another issue if you find problems.

from film_roll.