{"id":2342,"date":"2015-09-30T13:42:20","date_gmt":"2015-09-30T12:42:20","guid":{"rendered":"https:\/\/www.firstclasswatches.co.uk\/blog\/?page_id=2342"},"modified":"2016-05-08T22:45:07","modified_gmt":"2016-05-08T21:45:07","slug":"embed-360","status":"publish","type":"page","link":"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/","title":{"rendered":"Embed Code &#8211; Interactive 360\u00b0 Wristwatch View"},"content":{"rendered":"<p>For many years here at First Class Watches we have been using our 360 degree technology to showcase thousands of watches through our website. In fact, we loved it so much <a href=\"https:\/\/www.firstclasswatches.co.uk\/blog\/2014\/11\/first-class-watches-360-imagery\/\">we shot over 70,000 images<\/a>! Now we are giving you the opportunity to use our interactive photography on your own website. We think this would be a great addition to any watch related website or product review but the possibilities are endless. All we\u00a0ask is that you do not modify the generated embed code without our permission or attempt to use our\u00a0images outside of the viewer (our copyright still applies to all images).<\/p>\n<p>To generate your own 360 embed code, find the model number of the watch on\u00a0<a href=\"https:\/\/www.firstclasswatches.co.uk\">our website<\/a> and search for it in the first box below. Customise your widget and then you will find your own personal embed code to use on your website. Please note, not every watch on our website has a 360 view, but we are working on it. You may get an error if you try to select\u00a0a watch that is not photographed. If you have a special request or any problems feel free to\u00a0<a href=\"https:\/\/www.firstclasswatches.co.uk\/contact_us.php\">send us an email<\/a>.<\/p>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/selectize.js\/0.12.1\/js\/standalone\/selectize.min.js\"><\/script>\r\n  <link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/selectize.js\/0.12.1\/css\/selectize.min.css\" \/>\r\n  <script>\r\n    jQuery(function() {\r\n      makeCode(true);\r\n      loadFromHash();\r\n      jQuery(\"input[name='width-type'], input[name='width-value']\").on('change blur keyup', setWidth);\r\n      jQuery(\"input[name='clink']\").on('change', setLink);\r\n      jQuery(\"input[name='ctitle']\").on('change', setTitle);\r\n      jQuery(\"input[name='cinstructions']\").on('change', setInstructions);\r\n\r\n      jQuery('#search').selectize({\r\n          valueField: 'url',\r\n          labelField: 'value',\r\n          searchField: 'value',\r\n          options: [],\r\n          create: false,\r\n          persist: false,\r\n          maxItems: 1,\r\n          load: function(query, callback) {\r\n              if (!query.length) return callback();\r\n              jQuery.ajax({\r\n                  url: 'https:\/\/www.firstclasswatches.co.uk\/suggest.php',\r\n                  type: 'GET',\r\n                  dataType: 'json',\r\n                  data: {\r\n                      term: query,\r\n                  },\r\n                  cache: false,\r\n                  error: function() {\r\n                      callback();\r\n                  },\r\n                  success: function(res) {\r\n                      var filtered = [];\r\n                      for (var i=0; i<res.length; i++) {\r\n                        if (res[i].url.indexOf('-p-') > 0) {\r\n                          filtered.push(res[i]);\r\n                        }\r\n                      }\r\n                      callback(filtered);\r\n                  }\r\n              });\r\n          },\r\n          onItemAdd: function(value, $item) {\r\n            var name = $item.text();\r\n            var url = value;\r\n            var pid = \/-p-([0-9]+)\/.exec(url)[1];\r\n            setProduct(pid, name, url);\r\n          }\r\n      });\r\n    });\r\n    var setWidth = function() {\r\n      var type = jQuery(\"input[name='width-type']:checked\").val();\r\n      if (type == 'fixed') {\r\n        jQuery('#fcw-360').width(parseInt(jQuery(\"input[name='width-value']\").val()));\r\n      } else {\r\n        jQuery('#fcw-360').attr('style', function(i, style) {\r\n          return jQuery.trim(style.replace(\/width[^;]+;?\/g, ''));\r\n        });\r\n      }\r\n      makeCode();\r\n    };\r\n    var setProduct = function(pid, name, url) {\r\n      jQuery('#fcw-360 iframe').attr('src', 'https:\/\/widget.firstclasswatches.co.uk\/axZm.php?products_id='+pid);\r\n      jQuery(\"input[name='pid']\").val(pid);\r\n      jQuery(\"input[name='ptitle']\").val(name);\r\n      jQuery(\"input[name='plink']\").val(url);\r\n      setLink();\r\n      makeCode();\r\n    };\r\n    var setLink = function() {\r\n      var value = jQuery(\"input[name='clink']\").is(':checked');\r\n      jQuery('#fcw-360-title').text(jQuery(\"input[name=ptitle]\").val());\r\n      if (value) {\r\n        jQuery('#fcw-360-title').attr('href', jQuery(\"input[name=plink]\").val()).css('text-decoration', 'underline');;\r\n      } else {\r\n        jQuery('#fcw-360-title').attr('href', '#').css('text-decoration', 'none');\r\n      }\r\n      makeCode();\r\n    };\r\n    var setTitle = function() {\r\n      var value = jQuery(\"input[name='ctitle']\").is(':checked');\r\n      if (value) {\r\n        jQuery('#fcw-360-title-bar').show();\r\n      } else {\r\n        jQuery('#fcw-360-title-bar').hide();\r\n      }\r\n      makeCode();\r\n    };\r\n    var setInstructions = function() {\r\n      var value = jQuery(\"input[name='cinstructions']\").is(':checked');\r\n      if (value) {\r\n        jQuery('#fcw-360-instructions').show();\r\n      } else {\r\n        jQuery('#fcw-360-instructions').hide();\r\n      }\r\n      makeCode();\r\n    };\r\n    var makeCode = function(nohash) {\r\n      var html = jQuery.trim(jQuery('#fcw-360').get(0).outerHTML);\r\n      html = html.replace(\/<span class=\"deg\">.*<\\\/span>\/, '&deg;');\r\n      html = html.replace(\/<span class=\"copy\">.*<\\\/span>\/, '&copy;');\r\n      html = html.replace(\/ onclick=\".*\"\/, '');\r\n      var code = '<!-- Start FirstClassWatches 360 - Do Not Modify -->' + \"\\n\" + html + \"\\n\" + '<!-- End FirstClassWatches 360 -->';\r\n      jQuery('#fcw-embed-code').val(code);\r\n\r\n      \/\/ Save parameters to hash\r\n      if (nohash !== true) {\r\n        jQuery(\"input[name='pid'], input[name='ptitle'], input[name='plink']\").prop('disabled', false);\r\n        window.location.hash = jQuery('#fcw-360-options').serialize();\r\n        jQuery(\"input[name='pid'], input[name='ptitle'], input[name='plink']\").prop('disabled', true);\r\n      }\r\n    };\r\n    var loadFromHash = function() {\r\n      var hash = window.location.hash, params = {};\r\n      if (hash.length) {\r\n        hash = decodeURIComponent(hash.substring(1)).split('&');\r\n        jQuery.each(hash, function(i, v) {\r\n          var parts = v.split('=');\r\n          params[parts[0]] = parts[1].replace(\/\\+\/g, ' ');\r\n        });\r\n\r\n        jQuery(\"input[name='width-value']\").val(params['width-value']);\r\n        if (params['width-type'] == 'fixed') {\r\n          jQuery(\"input[name='width-type'][value=fixed]\").prop('checked', true);\r\n        } else {\r\n          jQuery(\"input[name='width-type'][value=responsive]\").prop('checked', true);\r\n        }\r\n        if (params.clink) {\r\n          jQuery(\"input[name='clink']\").prop('checked', true);\r\n        } else {\r\n          jQuery(\"input[name='clink']\").prop('checked', false);\r\n        }\r\n        if (params.ctitle) {\r\n          jQuery(\"input[name='ctitle']\").prop('checked', true);\r\n        } else {\r\n          jQuery(\"input[name='ctitle']\").prop('checked', false);\r\n        }\r\n        if (params.cinstructions) {\r\n          jQuery(\"input[name='cinstructions']\").prop('checked', true);\r\n        } else {\r\n          jQuery(\"input[name='cinstructions']\").prop('checked', false);\r\n        }\r\n        setProduct(params.pid, params.ptitle, params.plink);\r\n        setWidth();\r\n        setLink();\r\n        setTitle();\r\n        setInstructions();\r\n      }\r\n    };\r\n  <\/script>\r\n\r\n  <div style=\"font-family: Arial, sans-serif; font-size: 12px; line-height: 18px\">\r\n\r\n<div style=\"margin-top: 10px\">Widget Preview - Embed code and options are below:\r\n<div id=\"fcw-360\" style=\"font-family: Arial, sans-serif; margin: 8px\">\r\n  <div id=\"fcw-360-title-bar\" style=\"background: #444; color: #fff; padding: 7px 10px; font-size: 13px; font-weight: bold\">Interactive 360&deg; Watch View - <a id=\"fcw-360-title\" style=\"color: rgb(255, 255, 255); text-decoration: underline;\" href=\"https:\/\/www.firstclasswatches.co.uk\/citizen-promaster-navihawk-gps-stainless-steel-cc9030-51e-p-29074\/\">Citizen Promaster Navihawk GPS Stainless Steel CC9030-51E<\/a><\/div>\r\n  <div style=\"position: relative; padding: 0 0 80% 0; height: 0; overflow: hidden; border: 1px solid #999; box-sizing: border-box\">\r\n    <div id=\"fcw-360-instructions\" style=\"position: absolute; bottom: 20px; left: 50%; width: 250px; height: 40px; padding-top: 10px; margin-left: -125px; font-size: 12px; line-height: 16px; text-align: center; z-index: 100; background: #000; opacity: 0.6; border-radius: 5px; color: #fff\">\r\n      <b>Rotate:<\/b> Swipe or Click &amp; Drag<br>\r\n      <b>Zoom:<\/b> Pinch &amp; Zoom or Scroll Mouse\r\n    <\/div>\r\n    <iframe src=\"https:\/\/widget.firstclasswatches.co.uk\/axZm.php?products_id=29074\" width=\"500\" height=\"500\" allowfullscreen=\"true\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none\"><\/iframe>\r\n  <\/div>\r\n  <div style=\"font-size: 12px; margin-top: 3px\">\r\n    <div style=\"float: right; font-size: 11px;\"><a href=\"http:\/\/www.ajax-zoom.com\/\">powered by AJAX-ZOOM 360<\/a><\/div>\r\n    <a href=\"https:\/\/www.firstclasswatches.co.uk\">First Class Watches<\/a> &copy; All rights reserved | <a href=\"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/\">embed code<\/a>\r\n  <\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<hr style=\"margin: 30px 0\">\r\n\r\n    <form id=\"fcw-360-options\">\r\n      <table>\r\n        <tr>\r\n          <td>Search for watch by product code:&nbsp;&nbsp;<\/td>\r\n          <td><input type=\"text\" id=\"search\" name=\"search\" style=\"width: 400px\"><\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Product ID:<\/td>\r\n          <td><input type=\"text\" name=\"pid\" disabled value=\"24372\" style=\"width: 100px; background:#bbb\" ><\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Product title:<\/td>\r\n          <td><input type=\"text\" name=\"ptitle\" disabled value=\"Citizen Mens Navihawk Stainless Steel Black Dial Watch JY8030-83E\" style=\"width: 400px; background:#bbb\"><\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Product link:<\/td>\r\n          <td><input type=\"text\" name=\"plink\" disabled value=\"https:\/\/www.firstclasswatches.co.uk\/citizen-mens-navihawk-stainless-steel-black-dial-watch-jy8030-83e-p-24372\/\" style=\"width: 400px; background:#bbb\"><\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td style=\"vertical-align: top\">Width:<\/td>\r\n          <td>\r\n            <label><input type=\"radio\" name=\"width-type\" value=\"fixed\"> Fixed -<\/label> <input type=\"text\" name=\"width-value\" value=\"500\" style=\"width: 50px\"> pixels<br>\r\n            <label><input type=\"radio\" name=\"width-type\" value=\"responsive\" checked> Responsive (fills container width)<\/label>\r\n          <\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Link to watch details:<\/td>\r\n          <td><input type=\"checkbox\" name=\"clink\" checked><\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Show title bar:<\/td>\r\n          <td><input type=\"checkbox\" name=\"ctitle\" checked><\/td>\r\n        <\/tr>\r\n        <tr>\r\n          <td>Show instructions:<\/td>\r\n          <td><input type=\"checkbox\" name=\"cinstructions\" checked><\/td>\r\n        <\/tr>\r\n      <\/table>\r\n    <\/form>\r\n\r\n    <div style=\"margin-top: 20px\">\r\n      Use this embed code to show the watch on your website, please do not modify:<br><br>\r\n      <textarea id=\"fcw-embed-code\" style=\"width: 500px; height: 100px; font-family: 'Courier New', Courier, monospace\"><\/textarea>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>For many years here at First Class Watches we have been using our 360 degree technology to showcase thousands of watches through our website. In fact, we loved it so&hellip;<\/p>\n","protected":false},"author":1,"featured_media":2411,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"inline_featured_image":false},"categories":[368],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v18.4.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Interactive 360\u00b0 Wristwatch View - Generate Embed Code<\/title>\n<meta name=\"description\" content=\"We are giving you the opportunity to use our interactive photography on your own website. A great addition to any watch website or product review!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interactive 360\u00b0 Wristwatch View - Generate Embed Code\" \/>\n<meta property=\"og:description\" content=\"We are giving you the opportunity to use our interactive photography on your own website. A great addition to any watch website or product review!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/\" \/>\n<meta property=\"og:site_name\" content=\"First Class Watches Blog\" \/>\n<meta property=\"article:modified_time\" content=\"2016-05-08T21:45:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-content\/uploads\/2015\/09\/360-banner.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.firstclasswatches.co.uk\/blog\/#website\",\"url\":\"https:\/\/www.firstclasswatches.co.uk\/blog\/\",\"name\":\"First Class Watches Blog\",\"description\":\"All the Guides, News &amp; Tips You Need!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.firstclasswatches.co.uk\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-content\/uploads\/2015\/09\/360-banner.jpg\",\"contentUrl\":\"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-content\/uploads\/2015\/09\/360-banner.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/#webpage\",\"url\":\"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/\",\"name\":\"Interactive 360\u00b0 Wristwatch View - Generate Embed Code\",\"isPartOf\":{\"@id\":\"https:\/\/www.firstclasswatches.co.uk\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/#primaryimage\"},\"datePublished\":\"2015-09-30T12:42:20+00:00\",\"dateModified\":\"2016-05-08T21:45:07+00:00\",\"description\":\"We are giving you the opportunity to use our interactive photography on your own website. A great addition to any watch website or product review!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Embed Code &#8211; Interactive 360\u00b0 Wristwatch View\"}]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Interactive 360\u00b0 Wristwatch View - Generate Embed Code","description":"We are giving you the opportunity to use our interactive photography on your own website. A great addition to any watch website or product review!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/","og_locale":"en_US","og_type":"article","og_title":"Interactive 360\u00b0 Wristwatch View - Generate Embed Code","og_description":"We are giving you the opportunity to use our interactive photography on your own website. A great addition to any watch website or product review!","og_url":"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/","og_site_name":"First Class Watches Blog","article_modified_time":"2016-05-08T21:45:07+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-content\/uploads\/2015\/09\/360-banner.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.firstclasswatches.co.uk\/blog\/#website","url":"https:\/\/www.firstclasswatches.co.uk\/blog\/","name":"First Class Watches Blog","description":"All the Guides, News &amp; Tips You Need!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.firstclasswatches.co.uk\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/#primaryimage","inLanguage":"en-US","url":"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-content\/uploads\/2015\/09\/360-banner.jpg","contentUrl":"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-content\/uploads\/2015\/09\/360-banner.jpg","width":1920,"height":1080},{"@type":"WebPage","@id":"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/#webpage","url":"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/","name":"Interactive 360\u00b0 Wristwatch View - Generate Embed Code","isPartOf":{"@id":"https:\/\/www.firstclasswatches.co.uk\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/#primaryimage"},"datePublished":"2015-09-30T12:42:20+00:00","dateModified":"2016-05-08T21:45:07+00:00","description":"We are giving you the opportunity to use our interactive photography on your own website. A great addition to any watch website or product review!","breadcrumb":{"@id":"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.firstclasswatches.co.uk\/blog\/embed-360\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Embed Code &#8211; Interactive 360\u00b0 Wristwatch View"}]}]}},"_links":{"self":[{"href":"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-json\/wp\/v2\/pages\/2342"}],"collection":[{"href":"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=2342"}],"version-history":[{"count":15,"href":"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-json\/wp\/v2\/pages\/2342\/revisions"}],"predecessor-version":[{"id":2406,"href":"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-json\/wp\/v2\/pages\/2342\/revisions\/2406"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-json\/wp\/v2\/media\/2411"}],"wp:attachment":[{"href":"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=2342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=2342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.firstclasswatches.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=2342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}