are there any programming experts on this forum?

franci77 · December 29, 2013

Hi all!

First of all to say, PW is great and I am using it for all my projects now.

I came to a point where I needed to implement carousel/slider to my PW site with that is getting data from a JSON file.

Now I am kindly asking everybody, are there any jQuery developers/experts on this forum? I would need some small help with this carousel

Thank you everybody for any help!

Best regards,

Franci

kongondo · December 29, 2013

Uh? Really? if you searched the forums you'd find quite a number of jQuery related queries and solutions...I don't mean to be rude...but why didn't you just post your question? As for whether there are programming experts on these forums (your thread's title) ...I am honestly at a loss for words (and that doesn't happen often).... Initially I thought this was spam ;-)

franci77 · December 29, 2013

Really, as odd it may seem, it is so "custom" jQuery, that I couldn't find any solution to my problem anywhere on google, e.g. stack overflow, jquery.com...not anywhere

And I do believe that someone with more vast experience than I have would know how to solve what I need to be solved. So anyone who is willing to help me, I will much appreciate the help and I will buy him a beer

And sorry for thinking this was a spam, but it got your attention, didn't it?

kongondo · December 29, 2013

Again, it would be helpful to post your question....then the answers will come flooding in...;-) (hopefully)...so far all "we know" is that your question involves a jQuery carousel that is getting data from a JSON file...That's a bit vague. What have you tried? What is working? What is not? etc. etc...

franci77 · December 29, 2013

Sorry, here is the question. I was just writting it

So here is what I would like to do. My site uses free OWL carousel, and on the other side I have this JSON data file that can be reached through a URL. So I made a custom jQuery plugin that gets this file, process the JSON data and builds I HTML, that should be passed to OWL carousel as slides.

The thing is that I can't pass the data from my plugin to Carousel. The Carousel has support for JSON data and here is the documentation how to initiate it (link):

$(document).ready(function() { 
  $("#owl-demo").owlCarousel({
    jsonPath : 'url-to-file',  // Allows you to load directly from a jSon file. required
    jsonSuccess : customDataSuccess  // Success callback for $.getJSON build in into carousel. here the Carousel requires that it is a function
  });
 
  function customDataSuccess(data){
    var content = "";
    for(var i in data["items"]){

      var img = data["items"][i].img;
      var alt = data["items"][i].alt;
   
      content += "<img src=\"" +img+ "\" alt=\"" +alt+ "\">"
    }
    $("#owl-demo").html(content);
  }
});

And here is my plugin code:

(function ($) {
  $.fn.matchCarousel = function(options) {

    var settings = { 'maxMatches': 10 };
    if (options) { $.extend(settings, options); }

    var url = "http://lsdev.betradar.com/ls/feeds/?/betradar/en/Europe:Berlin/gismo/event_fullfeed/0/5"; //this line shouldn't be required afterwards, since the URL is passed in OWL carousel plugin parameter as jsonPath
    
    $.getJSON(url, function (data) { // I think that there is something that needs to be done with this line of code
      var counter = 0;        
        $.each(data.doc[0].data[0].realcategories, function (index, value) {
            var realCat = this.name;
              $.each(this.tournaments, function (x, y) {
                tourName = this.name;
                var tourSeasName = this.seasontypename;
                $.each(this.matches, function (i, j) {
                  var resultHome = this.result.home;
                  var resultAway = this.result.away;
                  var teamHome = this.teams.home.name;
                  var teamHomeAbbr = this.teams.home.abbr;
                  var teamHomeId = this.teams.home.uid;
                  var teamAway = this.teams.away.name;
                  var teamAwayAbbr = this.teams.away.abbr;
                  var teamAwayId = this.teams.away.uid;
                  var time = this._dt.time;
                  var date = this._dt.date;
                  var statusId = this.status._id;
                  var statusName = this.status.name;
                  var matchId = this._id;
                  
                  var content = $('div.slider div#owl-demo').append('<div id="' + index + i + '" class="item"><img id="' + index + i + '" class="slider ' + index + i + '" alt="' + realCat + ': ' + tourName + ' - ' + tourSeasName + '" /><p class="league">' + tourName + ' - ' + tourSeasName + '</p><p class="catName">' + realCat + '</p><div class="teams"><div class="team1"><img src="http://ls.betradar.com/ls/crest/big/' + teamHomeId + '.png" alt="' + teamHome + '"/ ><p class = "teamName">' + teamHome + '</p></div><div class="data"></div><div class="team2"><img src="http://ls.betradar.com/ls/crest/big/' + teamAwayId + '.png" alt="' + teamAway + '"/ ><p class = "teamName">' + teamAway + '</p></div></div><div class="statusName"></div></div>');
                  var itemData = $('.item[id=' + index + i + '] .data');
                  var itemStatus = $('.item[id=' + index + i + '] .statusName');
                  if (statusId == 0) {
                    $('img[id=' + index + i + ']').attr('src', 'images/bg-prematch.jpg');
                    itemData.html('<p class="dataText"><p class="vs">VS</p>' + time + '<br><span class="dateText">' + date + '</span></p>');
                    itemStatus.html('<span class="statusNameNS">' + statusName + '</span>');
                  } else if (statusId == 100) {
                    $('img[id=' + index + i + ']').attr('src', 'images/bg-postmatch.jpg');
                    itemData.html('<p class="result">' + resultHome + ':' + resultAway + '</p>');
                    itemStatus.html('<span class="statusNameEnd">' + statusName + '</span>');  
                  } else {
                    $('img[id=' + index + i + ']').attr('src', 'images/bg-live.jpg');
                    itemData.html('<p class="result">' + resultHome + ':' + resultAway + '</p>');
                    itemStatus.html('<span class="statusNameMid">' + statusName + '</span>');  
                  }
                  if ($(".shell").css("width") == "430px"){
                         $('.item[id=' + index + i + '] .team1').html('<img src="http://ls.betradar.com/ls/crest/medium/' + teamHomeId + '.png" alt="' + teamHome + '"/ ><p class = "teamName">' + teamHome + '</p>');
                    $('.item[id=' + index + i + '] .team2').html('<img src="http://ls.betradar.com/ls/crest/medium/' + teamAwayId + '.png" alt="' + teamAway + '"/ ><p class = "teamName">' + teamAway + '</p>');
                  }
                  if ($(".shell").css("width") == "320px"){
                      $('.item[id=' + index + i + '] .team1').html('<img src="http://ls.betradar.com/ls/crest/small/' + teamHomeId + '.png" alt="' + teamHome + '"/ ><p class = "teamName">' + teamHomeAbbr + '</p>');
                    $('.item[id=' + index + i + '] .team2').html('<img src="http://ls.betradar.com/ls/crest/small/' + teamAwayId + '.png" alt="' + teamAway + '"/ ><p class = "teamName">' + teamAwayAbbr + '</p>');
                  }
                  counter++;
                  return counter < settings['maxMatches'];                       
                });
                return counter < settings['maxMatches'];           
              });
            return counter < settings['maxMatches'];
        });
    });
  }
})(jQuery);

I think that how I need to initiate the Carousel is something like this:

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    jsonPath: 'URL-to-JSON-file',
    jsonSuccess: $(document).matchCarousel() // here invokes my plugin. but this isn't correct, I just suspect that this has something to do with it
});

And this is how the initiation code is written so that everything works correctly:

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    autoPlay: 5000,
    stopOnHover: true,
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true,
    jsonPath: 'http://lsdev.betradar.com/ls/feeds/?/betradar/en/Europe:Berlin/gismo/event_fullfeed/0/5',
    jsonSuccess: customDataSuccess
  });
     
  function customDataSuccess(data) {
    var counter = 0;      
      $.each(data.doc[0].data[0].realcategories, function (index, value) {
        var realCat = this.name;
          $.each(this.tournaments, function (x, y) {
            tourName = this.name;
            var tourSeasName = this.seasontypename;
            $.each(this.matches, function (i, j) {
              var resultHome = this.result.home;
              var resultAway = this.result.away;
              var teamHome = this.teams.home.name;
              var teamHomeAbbr = this.teams.home.abbr;              
              var teamHomeId = this.teams.home.uid;
              var teamAway = this.teams.away.name;
              var teamAwayAbbr = this.teams.away.abbr;              
              var teamAwayId = this.teams.away.uid;
              var time = this._dt.time;
              var date = this._dt.date;
              var statusId = this.status._id;
              var statusName = this.status.name;
              var matchId = this._id;
             
                var content = $('div.slider div#owl-demo').append('<div id="' + index + i + '" class="item"><img id="' + index + i + '" class="slider ' + index + i + '" alt="' + realCat + ': ' + tourName + ' - ' + tourSeasName + '" /><p class="league">' + tourName + ' - ' + tourSeasName + '</p><p class="catName">' + realCat + '</p><div class="teams"><div class="team1"><img src="http://ls.betradar.com/ls/crest/big/' + teamHomeId + '.png" alt="' + teamHome + '"/ ><p class = "teamName">' + teamHome + '</p></div><div class="data"></div><div class="team2"><img src="http://ls.betradar.com/ls/crest/big/' + teamAwayId + '.png" alt="' + teamAway + '"/ ><p class = "teamName">' + teamAway + '</p></div></div><div class="statusName"></div></div>');
                var itemData = $('.item[id=' + index + i + '] .data');
                var itemStatus = $('.item[id=' + index + i + '] .statusName');
                if (statusId == 0) {
                  $('img[id=' + index + i + ']').attr('src', 'images/bg-prematch.jpg');
                  itemData.html('<p class="dataText">VS<br />' + time + '<br><span class="dateText">' + date + '</span></p>');
                  itemStatus.html('<span class="statusNameNS">' + statusName + '</span>');
                } else if (statusId == 100) {
                  $('img[id=' + index + i + ']').attr('src', 'images/bg-postmatch.jpg');
                  itemData.html('<p class="result">' + resultHome + ':' + resultAway + '</p>');
                  itemStatus.html('<span class="statusNameEnd">' + statusName + '</span>');  
                } else {
                  $('img[id=' + index + i + ']').attr('src', 'images/bg-live.jpg');
                  itemData.html('<p class="result">' + resultHome + ':' + resultAway + '</p>');
                  itemStatus.html('<span class="statusNameMid">' + statusName + '</span>');  
                }
                if ($(".shell").css("width") == "430px"){
                        $('.item[id=' + index + i + '] .team1').html('<img src="http://ls.betradar.com/ls/crest/medium/' + teamHomeId + '.png" alt="' + teamHome + '"/ ><p class = "teamName">' + teamHome + '</p>');
                    $('.item[id=' + index + i + '] .team2').html('<img src="http://ls.betradar.com/ls/crest/medium/' + teamAwayId + '.png" alt="' + teamAway + '"/ ><p class = "teamName">' + teamAway + '</p>');
                }                 
                if ($(".shell").css("width") == "320px"){
                        $('.item[id=' + index + i + '] .team1').html('<img src="http://ls.betradar.com/ls/crest/small/' + teamHomeId + '.png" alt="' + teamHome + '"/ ><p class = "teamName">' + teamHomeAbbr + '</p>');
                    $('.item[id=' + index + i + '] .team2').html('<img src="http://ls.betradar.com/ls/crest/small/' + teamAwayId + '.png" alt="' + teamAway + '"/ ><p class = "teamName">' + teamAwayAbbr + '</p>');                    
                }
                counter++;                   
                return counter < 10;                       
                });
                return counter < 10;           
              });
            return counter < 10;
      });
  };      
});

All of the code is also available on jsFiddle.

I just don't understand why it works if the code is written in the same file and why not if I call some plugin (in this case my "matchCarousel" plugin). But that is probably because I don't know much about jQuery because I am fairly new with it. And I need my code to be as a plugin because I must be able to provide parameters to it, in my case "maxMatches".

So how can I make it this to work? I am absolutly clueless.

Thank you very much.

Best regards,

Franci

franci77 · December 30, 2013

Hi!

I am sorry, but there isn't any solution to this matter? Didn't think that this is so difficult. :/

Still, thank you all guys for trying! Hopefully the solution is going to be found, please tell me if anybody has got an idea.

Best regards,

Franci

Pete · December 30, 2013

Your post has been up for less than 12 hours - if you are patient someone may help, but a lot of us were asleep for most of the time this has been up so far!

franci77 · December 30, 2013

Sorry, this really wasn't meant to be rude.

Is just that I have this as a project that is due to today, and I am in a little hurry.

kongondo · December 30, 2013

For starters, checking out your fiddle, I can't see how you are including matchCarousel.plugin.js. Have you checked for errors using Firebug? You probably have already but I don't want to assume anything...

Beluga · December 30, 2013

Leaving this here to give a UX perspective: http://shouldiuseacarousel.com/

I guess carousels are ok, if they don't involve links or if they don't auto-play. Otherwise they give a negative experience.

Soma · December 30, 2013

Pretty messy... I would try something like this:

(function ($) {
  $.fn.matchCarousel = function(data, options) {

    var settings = { 'maxMatches': 10 };
    if (options) { $.extend(settings, options); }

    function customDataSuccess(data) {  
        var counter = 0;
        for(var i in data["items"]){

           var img = data["items"][i].img;
           var alt = data["items"][i].alt;

           content += "<img src=\"" +img+ "\" alt=\"" +alt+ "\">"
        }
        $("#owl-demo").html(content);
    };
    customDataSuccess(data);
  }
})(jQuery);

$(document).ready(function() {
    $("#owl-demo").owlCarousel({
        jsonPath: 'data.json',
        jsonSuccess: customDataSuccess
    });
    function customDataSuccess(data){
        $(document).matchCarousel(data,{ maxMatches: 10});
    }
});

The callback function jsonSuccess doesn't allow for directly calling your plugin with arguments, but within the callback function you could easily pass "data" and other arguments...

Or little simpler and direct

$(document).ready(function() {
    $("#owl-demo").owlCarousel({
        jsonPath: '/site/templates/scripts/data.json',
        jsonSuccess: function(data){
             $(document).matchCarousel(data,{ maxMatches: 10});
        }
    });
});

franci77 · December 30, 2013

Hi guys!

Thanks for all the help!

Pretty messy... I would try something like this:

(function ($) {
  $.fn.matchCarousel = function(data, options) {

    var settings = { 'maxMatches': 10 };
    if (options) { $.extend(settings, options); }

    function customDataSuccess(data) {  
        var counter = 0;
        for(var i in data["items"]){

           var img = data["items"][i].img;
           var alt = data["items"][i].alt;

           content += "<img src=\"" +img+ "\" alt=\"" +alt+ "\">"
        }
        $("#owl-demo").html(content);
    };
    customDataSuccess(data);
  }
})(jQuery);

$(document).ready(function() {
    $("#owl-demo").owlCarousel({
        jsonPath: 'data.json',
        jsonSuccess: customDataSuccess
    });
    function customDataSuccess(data){
        $(document).matchCarousel(data,{ maxMatches: 10});
    }
});

The callback function jsonSuccess doesn't allow for directly calling your plugin with arguments, but within the callback function you could easily pass "data" and other arguments...

Or little simpler and direct

$(document).ready(function() {
    $("#owl-demo").owlCarousel({
        jsonPath: '/site/templates/scripts/data.json',
        jsonSuccess: function(data){
             $(document).matchCarousel(data,{ maxMatches: 10});
        }
    });
});

That probably would work. But in your opinion, is there a way to customize Carousel core code? It probably would be easier and faster in my opinion, because in this case I would have to make all the adjustments to my code. Here is the part of the code where Carousel handles "jsonSuccess" and so on:

               loadContent : function(){
			var base = this;

			if (typeof base.options.beforeInit === "function") {
				base.options.beforeInit.apply(this,[base.$elem]);
			}
      
			if (typeof base.options.jsonPath === "string") {
				var url = base.options.jsonPath;
        
				function getData(data) {
					if (typeof base.options.jsonSuccess === "function") {          
						base.options.jsonSuccess.apply(this,[data]);
					} else {
						var content = "";
						for(var i in data["owl"]){
							content += data["owl"][i]["item"];
						}
						base.$elem.html(content);
					}
					base.logIn();
				}
				$.getJSON(url,getData);
			} else {
				base.logIn();
			}
		}

Since I am quite new in JS/jQuery, I don't really know much what is happening in this block of code. Can you check it out, please? Thank you.

For starters, checking out your fiddle, I can't see how you are including matchCarousel.plugin.js. Have you checked for errors using Firebug? You probably have already but I don't want to assume anything...

My plugin would be called in this block of code:

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    jsonPath: 'URL-to-JSON-file',
    jsonSuccess: $(document).matchCarousel() // call to my plugin matchCarousel.plugin.js
  });

Leaving this here to give a UX perspective: http://shouldiuseacarousel.com/

I guess carousels are ok, if they don't involve links or if they don't auto-play. Otherwise they give a negative experience.

It is not up to my so I guess there isn't much to do, but to create the site as my customers wants it.

Again, thank you all guys for your effort in helping me!

Best regards,

Franci

Soma · December 30, 2013

That probably would work. But in your opinion, is there a way to customize Carousel core code? It probably would be easier and faster in my opinion, because in this case I would have to make all the adjustments to my code. Here is the part of the code where Carousel handles "jsonSuccess" and so on:

Not "probably", it will work the way I showed you.

I don't think you want to modify the carousel core code, because it works already the way you want. I know how it handles the jsonSuccess and I showed you how to properly use it to call your plugin. If at all I would not make a jquery plugin, but just call a function.

This is not the owl support forum nor stack overflow. Sorry can't help you further.

Edit:

jsonSuccess: $(document).matchCarousel() // call to my plugin matchCarousel.plugin.js

This won't ever work but also is not really a problem, as I showed you how to handle it correctly. Looks like you don't understand it anyway. The problem is not the owl core code.

franci77 · December 30, 2013

Not "probably", it will work the way I showed you.

I don't think you want to modify the carousel core code, because it works already the way you want. I know how it handles the jsonSuccess and I showed you how to properly use it to call your plugin. If at all I would not make a jquery plugin, but just call a function.

This is not the owl support forum nor stack overflow. Sorry can't help you further.

Edit:
jsonSuccess: $(document).matchCarousel() // call to my plugin matchCarousel.plugin.js
This won't ever work but also is not really a problem, as I showed you how to handle it correctly. Looks like you don't understand it anyway. The problem is not the owl core code.

Sorry, I didn't mean no disrespect, just asking. Yes, I do not understand everything since I am a beginner in programming. I just wanted to ask you if in data["items"] the "items" refers to anything in particular, or is it just a name?

And do I need to include data["items"] in for loop or is it possible that I can somehow include it $.each loop? And if I can, based on my plugin code, how could I do it?

Thank you.

Best regards,

Franci

Soma · December 30, 2013

the code is just from the example of the owl json custom data.

data["items"] is from the json data. It could also be just data.items. Of course you could use just any methods that works for iterating a object/array.

{
  "items" : [
    {
      "img": "assets/owl1.jpg",
      "alt" : "Owl Image 1"
    },
    {
      "img": "assets/owl2.jpg",
      "alt" : "Owl Image 2"
    },
    {
      "img": "assets/owl3.jpg",
      "alt" : "Owl Image 1"
    },
    {
      "img": "assets/owl4.jpg",
      "alt" : "Owl Image 2"
    },
    {
      "img": "assets/owl5.jpg",
      "alt" : "Owl Image 1"
    },
    {
      "img": "assets/owl6.jpg",
      "alt" : "Owl Image 2"
    }
  ]
}

Sign In

are there any programming experts on this forum?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content