do-web / jtinder Goto Github PK

How does create superlike when swipe up?

Hello,
I like jTinder. It is really useful for me.
But when i try to add a w3 sidebar, it seems that images will always be there on the top layer; whether if the sidebar is collapsed or not.
I hope you could point out what i can change in javascript code or css code. Thank you very much!

Hello, anyone can help me how to make swipe on left and right smooth and do not drop image on down? Thanks

I am new to angular js. I have implemented the module and it works fine. My need is that, after all the panes are finished, how to again load the panes. Because I want to cycle the panes from starting. Please help

Hi, thanks for this amazing plugin.

I have an issue...if i generate the needed html code the frame of your plugins is visible but cannot do any action.

What i did?
I get a json file from my server with an array of products and generated via js the html code just like the orginal one.

What do i want to achieve?
I want to achieve that when i only get 2 products as json the sliding function shall implement that and should only show the both object.

`var data = null;
var xhr = new XMLHttpRequest();
var img = []; // ARRAY MIT LINKS VON BILDER
var textarray = [];//ARAY MIT LISTELEMENTEN
var cars=[];
var options = [ 1, 2, 3, 4, 5, 6 ];



/*
 * GET DATA FROM SERVER-----LOCALHOST:8888/data-------------------------------
 * save Objects in Array
 * separate Img from arrays
 */

function getimage(array) { // VON OBJEKTE URLs IN IMAGE-ARRAY SPEICHERN
	for (var i = 0; i < array.length; i++) {
		img[i] = array[i].modelImageUrl;
		console.log(img[i]);
	}
}
/*
 * Liste erstellen 
 */
function makeUL(array) {
	for (var i = 0; i < array.length; i++) {
		textarray[i] = "pane" + (i + 1);
	}

	// Create the list element:
	var list = document.createElement('ul');
	
	for (var i = 0; i < array.length; i++) {
		// Create the list item:
		
		var list1 = document.createElement('li');
		list1.className = textarray[i];
		// Set its contents:
		//list1.appendChild(document.createTextNode(array[i]));
		// Add it to the list:
		list.appendChild(list1);
		
		
		var item2=document.createElement('div');
		item2.className="img";
		//item2.appendChild(document.createTextNode(array[i]));
		list1.appendChild(item2);
		
		
		var item3=document.createElement('div');
		//MODELLNAMEN VON JEWEILIGEM FAHRZEUG
		item3.textContent=array[i].series;
		console.log(array[i].series);
		
		
		//item3.appendChild(document.createTextNode(array[i]));
		list1.appendChild(item3);
		
		var item4=document.createElement('div');
		item4.className="like";
		//item4.appendChild(document.createTextNode(array[i]));
		list1.appendChild(item4);
		

		var item5=document.createElement('div');
		item5.className="dislike";
		//item5.appendChild(document.createTextNode(array[i]));
		list1.appendChild(item5);
		
	}

	// Finally, return the constructed list:
	return list;
}
//Add the contents to tinderslide`




//DATEN HOLEN VOM SERVER
xhr.withCredentials = true;
var obj;
xhr.addEventListener("readystatechange", function() {
	if (this.readyState === 4) {
		console.log(this.responseText);
		obj = JSON.parse(this.responseText);
		cars=obj;
		// console.log(obj); // OBJEKTE AUSSPUCKEN
		getimage(obj); // BILDER ABSICHERN 
		document.getElementById('tinderslide`').appendChild(makeUL(obj));//Liste erstellen
	}
});

xhr.open("GET", "http://localhost:8888/data");
xhr.setRequestHeader("cache-control", "no-cache");
xhr.setRequestHeader("postman-token", "f63f1e32-4633-2100-d74e-0159235048d4");
xhr.send(data);

//-----------------------------------//

//-------------------------------------------------------------------------------------

/**jTinder initialization
 */
$("#tinderslide").jTinder({
	// dislike callback
	onDislike : function(item) {
		// set the status text
		$('#status').html('Dislike Car ' + (item.index() + 1));
	},
	// like callback
	onLike : function(item) {
		// set the status text
		$('#status').html('Like Car ' + (item.index() + 1));
	},
	animationRevertSpeed : 200,
	animationSpeed : 400,
	threshold : 1,
	likeSelector : '.like',
	dislikeSelector : '.dislike'
});

/**
 * Set button action to trigger jTinder like & dislike.
 */
$('.actions .like, .actions .dislike').click(function(e) {
	e.preventDefault();
	$("#tinderslide").jTinder($(this).attr('class'));
});

Where is the problem?Would be nice if you could help me

Hi Folks

I closed my previous post in regards to lazy loading having looked through the different forks that are available and have seen that JoeSchr has done an incredible amount of work and changes to this.

I have tried downloaded the jTinder-infinite but I just cannot seem to get this working from using the default setup from the download to making the requested changes within the Readme file. i.e jTinder Installation, jTinder Option Usage Example etc.

Regardless of the changes I make the sliding of images just doesn't seem to want to work for me.

I have reverted back to the default setup just now of the jTinder-infinite setup just now.

With in the readme file under jTinder installation.

It states using

$("#tinderslide").jTinder()

Instead of using

<script type="text/javascript" src="js/main.js"></script>

within the main.js file this references tinderslide-a and tinderslide-b that is used within the index file.

I have tried both without any success:

1. using the default setup within html file, This just lists the images in a list with no styling
2. Using the following script and code within the html file which does displaying the images one behind the other with styling but with swiping not working

<script type="text/javascript" src="js/main.js"></script>

with

list of 5 pane images

I would just like to say trhis is a great plugin and exactly what I have been looking for.

I have been working with this for the past week now and everything has been working well, however when I add a base of 50 images to it I start to see the pluggin struggle on various browsers.

The lastest versions of Firefox and IE (PC) are fine. Google Chrome (PC) does struggles a little while it loads in all of the images. On my Galaxy Note 4 Firefox (Android) is fine. Google Chrome struggles to load in all of the content. Android Stock Browser really struggles

I haven't checked this personally on iOS yet but did have someone quickly look at it for me and they said they had similar issues with a large image base

When I reduce the amount of images though all of the above browsers work very well.

Is there a way to lazy load the images to prevent these issues or even load the images in as you swipe.

I've attached some screenshots of the issues I'm seeing

Hi, It will be very nice if there is an online demo using github pages.

Is there a way of adding additional interactive elements within each slide? Basically I need to add some colour swatches to a product image within the slide but when you click on the slide it currently invokes the like/dislike functionality, so there's no other way of interacting with the content within. Any ideas?

Heyo,

I have noticed that both mobile firefox responds to drags way too sensitively. The action is being triggered literally on any touch on the card.

Desktop firefox works fine so are both chromes.

Plz help

I don't understand why this line
var percent = ((100 / pane_width) * deltaX) / pane_count;
contains pane_count. When there is only one pane it rotates like crazy and when there are 100 panes you can barely see the the rotation.

Hi... I was trying your plugin and it's great!

But, I wanted to add items dynamically to the list and as it is, it didn't work for me. For that, I had to do some modifications to your code that I would like to share with you for your review.

Basically, each time I add a new li element to the ul, I "initialize" the plugin by calling

$("#tinderslide").jTinder(options);

But that didn't work.

So what I ddid was:
in jquery.jTinder.js I added to the Plugin.prototype the following method:

        bindNew: function(element){
            panes = $(">ul>li", element);
            pane_count = panes.length;
            current_pane = panes.length - 1;
        },

I believe that this updates the courrent_pane counter since new elements have been added to the list.

Besides that modification, I also changed the invocation to call that function:

    $.fn[ pluginName ] = function (options) {
        this.each(function () {
            /************ BEFORE
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
            else if ($.isFunction(Plugin.prototype[options])) {
                $.data(this, 'plugin_' + pluginName)[options]();
            } *******END OF PREVIOUS CODE****/

            /**** NEW CODE *****/
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
            else {
                $.data(this, "plugin_" + pluginName).bindNew(this);
            }   /**** END OF NEW CODE *****/        

        });

        return this;
    };

Like this I had the plugin working with dynamic items added to the list. And each time a item is added to the list I just invoke:

$("#tinderslide").jTinder(options);

I hope it helps!

this plugin works for me very well,just one issue is there:
i am implementing this plugin for swiping cards that is of information and not of simple images,so there will be content in tinder slide which might include scrolling and even there in one image inside this tinder slides which i want clickable.
I tried a lot but not getting success.
please let me know if you have any idea for this and even some option for this kind of functionality.

Basically what i need is : "slider with slides that is having clickable image and scrolling content and can swipe left right to like or dislike with preview."

Hello,

I need a way to undo the swipe (left/right). Is there a way for it?

Hi,

very great plugin - really. Love it. There is just one piece of problem I'm facing on the smartphone. I can't scroll down. Is there any way you could provide an option to prevent swipe down/up to prevent scroll interuption? Thank you!

Hi all,

I am trying your plugin and it's great!

But, as I am adding or refreshing list items dynamically to the list, it didn't work for me. Actually Plugin isn't initialising again. I want to know that how to call Plugin initialisation again and again.

Thanks in advance, your response will be appreciable.

Hey,
First of thank you very much for making it open source.
It would be nice to have more information regarding browser compatibility (IE8+?) + libraries dependencies, etc (ex: jQuery 1/2?).

Hello. I was using your plugin and I must say you made our project easier to execute. Superb.

However there is an issue with our jTinder buttons. For some strange reason they do not seem to be working.

Swiping is working smoothly so my team are even considering getting rid of buttons altogether.

Is this an issue anyone else has experienced? If so, how was it resolved?

Thank you.

Hi, in my case I need to apply jTinder to div elements, however jTinder is limited to only work with <li>elements, is there a way of make it work with <divs> instead?

I am using jTinder in angular js. all the cards pulled dynamically and on click on perticular card showing detailed information but when i came back it loads from 1st card. please help me to display that selected card when i come back from detailed page.

Any chance to get the images responsive?

Can anyone help?

Hi, thanks for this amazing plugin, however i seem to have a drawback as i can't seem to destroy/refresh an existing JTinder instance except if the browser refreshes.

Thanks in advance

Hi there,

Thanks a lot for your contribution. For one of my projects, I was thinking to use jtinder.
Project is in wordpress so I was willing to use jtinder and create a wordpress plugin contribute back to them, this way I could use this in my project and if this gets approved, anyone can use this plugin in future.
I will keep the dependency on your library as well so anyone who is using wp-jtinder, will have to use your jquery library as well.
So before starting development I thought it would be better if I should have a word with you about this.
Are you okay if I go ahead with this?

Looking forward to hear from you.

Thanks!

Hey,

first thanks for making this open source! :)
Why you've choose the GPL Licence?
Any special plans with this?

Rob

Hi,

Thank you for creating this amazing plugin.
There is only a drawback. I don't seem to be able to create more then 1 jTinder slider.

Is this functionality in the plugin?
If not, maybe it would be a nice addon.

Just saying.

Melletjee

I saw there is no NPM module and no package.json file for this library. Can it be added?
Thanks a lot!!!

I created a destroy method for the plugin:

destroy: function(element){
    $(element).unbind();
    $(this.element).removeData();
},

and called using
$("#tinderslide").data('plugin_jTinder').destroy();

Hi, would be nice to have a way of revert a like or dislike, for example:

In my use case, users cannot like or dislike items if they are not logged in, so if user drags and drops the item without log in the current item should go back to the top of the deck, so that should be something like

$("#tinderslide").jTinder('revert');

Any idea how to modify the current script for add this functionality?

Hi! I really like this script.

Can someone please how to save this to an mysql database? I am using php and mysql

I have been trying to use this library on my Angularjs app.
I couldn't figure out the work around this. Has anyone tried it?
Is there someone who can help with the implementation of this library in an Angularjs app?

I needed to dynamically update the images in the card stack, because I'm randomizing the order on every page reload. The readme only says you can update the images by changing the css, but I came up with a quick jquery command to dynamically change images. Thought I would share here for anyone else who might need:

$('.pane5 .img').css('background', 'url('+'URL_HERE'+')'+' no-repeat scroll center center').css('background-size', 'cover')

Just replace pane5 with your pane number and URL_HERE with the image url.