Flickity

Hoping someone basinful can help :-)

I am using the flickity plugin for slideshow galleries.
In the flickity API They show how to Insert slides into the gallery.
Here is demo in codepen.

What I am trying to do is insert slides by their class name. So for example all slides with class "slides-floor2".
Using the "makeCellHtml" example I have tried the following but it does not seem to work. I am not very good with JavaScript so any help please.

 $('#map').on('click', 'area', function(e) {
	 e.preventDefault();	 	  
         var $cellElems = $( makeCellHtml());
         $gallery.flickity( 'insert', $cellElems, 1);
  });
});

function makeCellHtml() {	
 $.each($('.cell02'), function() { 
	 return '<div class="gallery-cell">' + '6666' + '</div>';
 });
}

Open in new window

RefaelAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
What's the issue?
From the CodePen example everything seems to work.
It starts with 3 slides and clicking the button it add 2 more slides after the 2nd.

What do you mean by "What I am trying to do is insert slides by their class name."?
Can you create a failing example for that?
0
RefaelAuthor Commented:
Alexandre Simões I do not understand what you are asking.
In my code I am trying to insert slides by their class name. As i wrote above it does not work.
Did you try it?
0
Alexandre SimõesManager / Technology SpecialistCommented:
On your example you're inserting slides in a specific position (after the 2nd).
Clicking the button, it behaves as expected.

Probably I'm missing something but I can't see any attempt there to insert by class, and actually all divs have the same gallery-cell class.

What I'm asking is an example that doesn't work so I can fix it
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

RefaelAuthor Commented:
Alexandre Simões the example in codepen is not mine. I am trying to imitate the idea as in the code attached to this post. When I test my code using the class names it does not seem to work.
0
Alexandre SimõesManager / Technology SpecialistCommented:
Ah ok! :)

So picking your code, what do you want to do with this piece?
$.each($('.cell02'), function() { 
	 return '<div class="gallery-cell">' + '6666' + '</div>';
 });

Open in new window

The code is wrong for sure because if does a loop around all the elements with the cell02 class and exits right on the first one.
So what's your idea here?
You mention adding all the slides with the class "slides-floor2", but where do they come from?

Probably something like this would work?
 $('#map').on('click', 'area', function(e) {
	 e.preventDefault();	 	  
         $gallery.flickity( 'insert', $('.slides-floor2'), 1);
  });
});
}

Open in new window

This code assumes that somewhere on the page you have some divs with the class slides-floor2 waiting to be added to the slides gallery.
0
Slick812Commented:
greetings Refael, , In your code you have this line -

    return '<div class="gallery-cell">' + '6666' + '</div>';

So for each of the elements that have the class=".cell02" , from your loop-
   $.each($('.cell02'), function() {

all it does is place the same string "66666" in the cell, in a each loop there is the -
    $( this )
which represents the particular element in the Loop, so you might try-
    return '<div class="gallery-cell">' + $( this ).text() + '</div>';
instead

Please study the Jquery info about the  each loop here -
    http://api.jquery.com/each/
0
Slick812Commented:
sorry my bad, I have revised it -
function makeCellHtml() {
 var re = "";
 $.each($('.cell02'), function() { 
	 re += '<div class="gallery-cell">' + $( this ).text() + '</div>';
 });
return re;
}

Open in new window

you can not use the -
var $cellElems = $( makeCellHtml() + makeCellHtml() );

in the click function, as my codes returns a multi length addition
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RefaelAuthor Commented:
Slick812 ... you got me :-) I think you understand what i am trying to do so I will explain even better hopping you can suggest a way to reach the goal....

The slideshow HTML is something like this:

<section id="hero">

   <div class="hero-cell">
        <div class="hero-img-bg">
                 <-- photo here or simple content -- >
        </div>
  </div>
<section>

Open in new window


The first slide in the slideshow is an image of a house. I am using an image map and areas of each floor (e.g. 1st floor, 2nd floor).

When the user click on the first floor, for example, I need to add the relevant slides e.g. all the apartments in the 1st floor.
When the user click on the 2nd floor I need to reset the slides and then add the 2nd floor apartments slides. Basically the apartments slides contains ground floors images with some text.

When I saw the codepen script I tried to imitate it by creating a parent div to include all the apartments per floor.
So e.g. DIV#floor1 and its children e.g. the apartments.
The slides per apartment is wrapped in the "hero-cell" div ready to be inserted.

So in my original code I tired to create an array per floor then call its children slides to be inserted followed by the floor click on the house image. When it did not work for me I then tried to call the their class e.g. ".floor-01" and insert all the slides with this class but it does not work too.

Does this make sense or?
0
Slick812Commented:
Yes makes BIG sense now! ! , thanks for the info about what you need done, and what you are trying to do.

You can ADD slide blocks to the flickity slider thingy, as the codepen demo shows, but what you are doing is removing the present slides and replacing wid another set (first floor, third floor).

if you have your image info in a set of arrays ("an array per floor"), then you do NOT need the code example using the -
       $.each($('.cell02'), function() {

JS arrays are best run through using a for loop, let's say your floor two image array is named "imgFloor2" as maybe -
   var imgFloor2 = ['<img src="flr2apart1.jpg" />', '<img src="flr2apart2.jpg" />', '<img src="flr2apart3.jpg" />'];

to construct the slider div elements you might use -
function slidesMake( imgArray ) {
 var re = "";
for (var x = 0; x < imgArray.length; ++x) { 
     re += '<div class="gallery-cell">' + imgArray[x] + '</div>';
     }
return re;
}

// call it like
var str1 = slidesMake( imgFloor2 );

Open in new window

where you just change the " imgFloor2" to any other floor array in the slidesMake(  )

or if you have an empty slider, then code like this may work -
    $gallery.flickity( 'append', slidesMake( imgFloor2 ));


I am uncertain how to clear all slides from the flickity, but there is the 'remove' as -
   $gallery.flickity( 'remove', cellElement );
0
Slick812Commented:
this may clear all the elements -
 $gallery.flickity( 'remove', $gallery.flickity('getCellElements') );

if that works then you may can use -
function changeFloor( imgArray ) {
   $gallery.flickity( 'remove', $gallery.flickity('getCellElements') );
   var re = "";
   for (var x = 0; x < imgArray.length; ++x) { 
       re += '<div class="gallery-cell">' + imgArray[x] + '</div>';
       }
   $gallery.flickity( 'append', re);
}

Open in new window

0
RefaelAuthor Commented:
Hi Slick812.

The slides as I said above are not only images it will include an image of the floorplan and some text as well.
Thank you for this! I am not sure I understand everything you said but i will give it a try and test. I sent you a message via your profile.
0
Slick812Commented:
I have not used the flickity slides, however, I gave a simple example, and I realize that you have MORE html in the array strings than the <img />, , , just so you have tested the html as a slide element, say -

    <div class="gallery-cell"><span class="title1">Title as</span><br /><img src="flr2apart1.jpg" class="apartment" /><br />Apart One is 500 square meters</div>

then you can have what text you need in the array sections.
0
Slick812Commented:
OK, I tried to get the "Flickity slider" to work 4 me, I followed the instructions at their page, downloaded the files, and set up a test page, but it did not work AT ALL, in my firefox development browser. It did not even show a slider at all, much less do any image sliding. After chasing my tail and getting nowhere in the slider working from their "code Pen" examples, I finally found a web page that gave some "Alternate" set up and initialization code, and I got it to show a slide and work as a slider, HOWEVER, no matter what I would do, , it Always placed four extra empty cells in the slides, If I had 4 images, it would add 4 more empty cells at the end. Also I tried to use some if the change functions like  'remove' , and it was inconsistent in what would happen, and There is little or no explanation that I could find about  errors and or code that works.  This is a very advanced and complicated slider, You may do better with another Jquery slider for images and html. there are a thousand of um.
0
Slick812Commented:
here is a page you can look at that has a list of jquey sliders -
        http://streetsmash.com/responsive-jquery-slider-plugins/
0
RefaelAuthor Commented:
Thank you Slick812 :-) Sorry I was away to respond in time.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.