Web Analytics Made Easy -
StatCounter trying to bring fiddle code into a DIY software - CodingForum


No announcement yet.

trying to bring fiddle code into a DIY software

  • Filter
  • Time
  • Show
Clear All
new posts

  • trying to bring fiddle code into a DIY software

    Going to ask something I asked recently in a different way, the previous post may have been confusing.

    I use a DIY web building service/software to build sitesforhealers.com, which allows people to create their own sites.

    I'd like to offer a way to add premium stock images from within the site, but there isn't. There is a way to add code in 2 places, so I thought I could try to add code to offer a way for users to get images.

    I found some code that seems close: Edit fiddle - JSFiddle. In my mock up site, I copied and pasted a bunch of it, and this is what I got bigstocktest2. It doesn't look the same.

    In my editor I used, the 2 areas I have to enter code are: One that corresponds to the head, which I wasn't sure what to do with, but I added some links I thought I need to, and one called 'Raw', which allows code that would affect the whole site:

    Click image for larger version

Name:	head_equivalent.jpg
Views:	1
Size:	33.7 KB
ID:	2283592 Click image for larger version

Name:	raw.jpg
Views:	1
Size:	46.6 KB
ID:	2283593

    Now, to migrate the elements from the fiddle. The areas I see that I thought I needed to add are:
    • the html, css, js
    • references to bootstrap-combined.min.css, jquery 1.7.2, and Bootstrap 2.0.2. Not sure if that's right, my guess.

    I didn't know what to do about the jquery and Bootstrap references, so I made references to what I thought to do in the 'head' area:

    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    Then I copied and pasted the html, CSS and js one after the other into the 'raw' area in a way I thought made sense (code at the bottom of this post).

    Then, in the 'raw' section, I:
    • Pasted HTML as is.
    • wrapped the CSS it with style tag
    • wrapped the js with script tag

    There's also a 'live' version, after I click publish, but, it doesn't show evidence of the code at all: bigstocktest2

    So, bigstocktest2 doesn't look right, bigstocktest2 is blank.

    I emailed their support, they wrote: "It seems like that the code you embedded has conflicts with our editor.
    I can offer you to remove it from your real site, and you'll test it on another site, a test site.
    Once you'll manage to resolve all conflicts I believe that the live site will display the code."

    Wondering what's wrong, if it's me, their editor or both.

    Is it something in the head section?

    Why doesn't either of my sites look like the fiddle?


    <div id="search-form" class="modal hide fade">
      <div class="modal-header">
        <h3>Find an Image</h3>
      <div class="modal-body">
        <form class="well form-search">
          <input type="text" class="search-query span4" placeholder="Find the perfect image...">
          <button type="submit" class="btn btn-primary">Search</button>
        <!-- this div will be populated with categories -->
        <div id="categories">
          <h3>or Browse by Category</h3>
          <div class="well">
        <!-- this div will be populated with search results -->
        <div class="well hide" id="results-holder">
          <ul class="thumbnails" id="results">
      <div class="modal-footer">
        <a href="" id="category-link" class="pull-left hide">&larr; browse by category</a>
        <a href="http://www.bigstockphoto.com"><img src="//www.bigstockphoto.com/images/bigstock-black-medium.png" alt="Bigstock"></a>
    <!-- search results item template -->
    <ul class="item-template hide">
        <a href="#" class="thumbnail"><img></a>
    <!-- image detail template -->
    <div class="detail-template modal fade hide">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
      <div class="modal-body">
      <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Select this image</a>
    <style>/* make modal larger */
    .modal {
      width: 700px
    /* put the categories in two columns */
    #categories ul {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
    /* make the thumbnail grid pretty */
    .thumbnails {
      text-align: justify;
    .thumbnails li {
      height: 180px;
      display: inline-block;
      float: none;
    <script>// change to your account id at bigstock.com/partners
    var account_id = '883610';
    var selected_category, search_term, infinite_scroll, page, max_page, jsonp_happening;
    $(function() {
      // open search modal on page load
        backdrop: 'static'
      // populate the categories
      $.getJSON("http://api.bigstockphoto.com/2/" + account_id + "/categories/?callback=?", function(data) {
        if (data && data.data) {
          $.each(data.data, function(i, v) {
            if (v.name == "Sexual") {
            $("#categories ul").append("<li><a href='#'>" + v.name + "</a></li>");
      // when the user clicks on a category
      $("#categories").on("click", "a", function(e) {
        selected_category = $(this).text();
        $(".form-search").trigger("submit", {
          category: true
      // show a loading message when the search button is clicked
      $("html").on("submit", ".form-search", function(e, val) {
        page = 1;
        var results = $("#results");
        results.append("<li id=\"loading\"><span class=\"label\">Loading...</span></li>");
        var val = val || {};
        //check if the user selected a category or did a keyword search
        if (val.category) {
          search_term = "";
        } else {
          selected_category = "";
          search_term = $(".search-query").val();
        //start the search
        $("html").trigger("bigstock_search", {
          q: search_term,
          category: selected_category
      // infinite scroll
      infinite_scroll = setInterval(function() {
        var offset = $("#results li:last").offset();
        if (offset && offset.top < 1000 && !jsonp_happening && page < max_page && $("#results-holder").is(":visible")) {
          $("html").trigger("bigstock_search", {
            q: search_term,
            category: selected_category,
            page: page
      }, 100);
    // populate the search results
    $("html").on("bigstock_search", function(e, val) {
      if (!jsonp_happening) {
        jsonp_happening = true;
        var val = val || {};
        val.page = val.page || 1;
        var results = $("#results");
        //setup the paramaters for the JSONP request
        var params = {};
        if (val.category != "") params.category = val.category;
        params.q = val.q;
        params.page = val.page;
        $.getJSON("http://api.bigstockphoto.com/2/" + account_id + "/search/?callback=?", params, function (data) {
          if (data && data.data && data.data.images) {
            max_page = data.data.paging.total_pages;
            var template = $(".item-template");
            $.each(data.data.images, function(i, v) {
              template.find("img").attr("src", v.small_thumb.url);
              template.find("a").attr("href", "#" + v.id);
          } else {
          	results.append("<li id=\"oops\"><div class=\"alert alert-error\">OOOPS! We found no results. Please try another search.</div></li>");
          jsonp_happening = false;
    // when a user clicks on a thumbnail
    $("#results").on("click", "a", function(e) {
      $.getJSON("http://api.bigstockphoto.com/2/" + account_id + "/image/" + $(this).attr("href").substring(1) + "/?callback=?", function(data) {
        if (data && data.data && data.data.image) {
          var detail_template = $(".detail-template");
          detail_template.find("img").attr("src", data.data.image.preview.url);
            backdrop: false
    // when a user clicks on the "select this image" button
    $(".detail-template").on("click", ".btn-primary", function(e) {
      alert('Here you will need server-side code to purchase and download the un-watermarked image. See the documentation at http://bigstock.com/partners/')
    // when a user clicks "browse by category"
    $("#category-link").click(function(e) {
      $("#results-holder, #category-link").hide();

  • #2
    You should not double post. Now we have two threads running here.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


    • #3
      Originally posted by sunfighter View Post
      You should not double post. Now we have two threads running here.
      To be fair, he did explain that his first post might have been confusing. And as a newcomer he is not able to edit it.

      All the code given in this post has been tested and is intended to address the question asked.
      Unless stated otherwise it is not just a demonstration.


      • #4
        Hello Whirl,

        Just so you know, your document should follow this format:
          //PHP CODE HERE
        <!DOCTYPE html>
            <meta charset="utf-8">
              /* CSS STYLE AREA*/
            <!-- ... CONTENT ... -->
              // JAVASCRIPT
        You should be placing ANY java script at the bottom of your document so you load it last.

        The biggest thing that may be causing conflict is the order you are calling the CSS files

        You need to make sure you call the Bootstrap CSS File first, then your extra styles, otherwise, you will basically override the custom styles.
        <link to Bootstrap CSS>
        <link to Custom CSS>
        Let me know if that resolves it. if not, we can dive more in-depth.

        Good luck!
        Riley-Shannon.com - My Portfolio
        FraktalServices.com - My Company


        • #5
          Thank you Philip and Riley.

          I am using xprs.imcreator.com, and I have some areas to build templates and some other things as the 'owner' of a site. There are 2 areas to enter code - one affects the head, and the other, called Raw, affects the rest of the site supposedly.

          Click image for larger version

Name:	raw_and_head_sections.jpg
Views:	1
Size:	50.0 KB
ID:	2270482

          On p 19 and 20 of http://imcreator.com/files/xprs_manual_v1_0.pdf, you can see some info on the Raw element.

          I had a developer look at this, and he said he could not get it to work, as xprs has restrictions.

          This is all new to me. I have access to APIs with 2 companies, Big Stock and Getty. I would like to implement something like one of these sites offers for my potential customers:

          squarespace - chitime's library
          wix - chitime's library
          canva - chitime's library

          Now I know you probably haven't seen the editor. It's probably not used a lot. Am I sharing enough to determine if I can add code to offer premium images like the sites above do?