photo

Tony Hall

shared this question
3 years ago

Employees Involved

photo

PIV Support

Admin

Statistics

2
Comments
214
Views

Share

1
votes

Clicking Thumbnail does not change Main image

http://mcmullinranch.com/listing/dixie.html

Here is an example page of what I am going to talk about. I have several images added to this "listing". I am using the listing_detail_mainjavarows template. If I use it without any changes, as downloaded with the package, it works fine. As soon as I copy (line for line) the code into the area of my site template I start having problems....

The default template, without my website template HTML around it, I can click the thumbnails and it changes the main image. As soon as the OR Code is placed into my site template, the clicking no longer changes the main image. I have tried several things, and looked at the OR documentation and had no luck. Here is the code with my website template built around.

Any help would be greatly appreciated!

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!-- #BeginTemplate "../../Templates/template.dwt" -->
  4. <head>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <!-- metatags -->
  7. <!-- #BeginEditable "meta" -->
  8. <title>McMullin Ranch - {listing_title}</title>
  9. <meta name="Keywords" content="McMullin Ranch, Hereford, Bulls, Cows, Embryos, Donor Cows, Herd Sires, Semen, Bull Semen, Cows, Cattle, Texas, Registered Herefords, Registered Polled Herefords, Polled Herefords, Registered Cattle, Purebred, Purebred Cattle, Purebred Herefords, Sale Bulls, Felton Genetics, Copperas Cove, TX, Donlie McMullin" />
  10. <meta name="Description" content="The website of Donlie McMullin's McMullin Ranch." />
  11. <!-- #EndEditable -->
  12. <!-- /metatags -->
  13. <!-- language -->
  14. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  15. <!-- /language -->
  16. <!-- styles -->
  17. <link title="default" href="../../Site/styles/misc/styles.css" rel="stylesheet" type="text/css" />
  18. <link title="default" href="../../Site/styles/fonts.css" rel="stylesheet" type="text/css" />
  19. <link title="default" href="../../Library/logo/css/logo.css" rel="stylesheet" type="text/css" />
  20. <!-- /styles -->
  21. <!-- editable styles -->
  22. <!-- #BeginEditable "styles" -->
  23. <link title="default" href="../../Site/styles/minimized.css" rel="stylesheet" type="text/css" />
  24. <!-- #EndEditable -->
  25. <!-- /editable styles -->
  26. <!-- responsive styles -->
  27. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  28. <link title="default" href="../../Site/styles/misc/responsive.css" rel="stylesheet" type="text/css" id="mobileSheet" />
  29. <!-- /responsive styles -->
  30. <!-- hidden -->
  31. <!-- #BeginEditable "hide_components" -->
  32. <style>
  33. #leftinfo {visibility:hidden; display:none;}
  34. #centerinfo {visibility:hidden; display:none;}
  35. #rightinfo {visibility:hidden; display:none;}
  36. .auto-style2 {
  37. text-align: center;
  38. }
  39. .auto-style3 {
  40. font-size: small;
  41. }
  42. </style>
  43. <!-- #EndEditable -->
  44. <!-- /hidden -->
  45. <!-- variables -->
  46. <!-- #BeginEditable "rootLocation" -->
  47. <script type='text/javascript'>
  48. // if this page is in:
  49. // the root folder, then set this variable to ./
  50. // a sub folder one level deep, then set this variable to ../
  51. // a sub folder two levels deep, then set this variable to ../../
  52. var rootLocation = "./";
  53. </script>
  54. <!-- #EndEditable -->
  55. <!-- /variables -->
  56. <!-- scripts -->
  57. <script type='text/javascript' src="../../Site/javascript/jquery-1.5.1.min.js"></script>
  58. <script type='text/javascript' src="../../Site/javascript/jquery.cookie.js"></script>
  59. <script type='text/javascript' src="../../Site/javascript/pxgradient-1.0.1.jquery.js"></script>
  60. <script type='text/javascript' src="../../Site/javascript/jquery-ui-1.8.11.custom.min.js"></script>
  61. <script type="text/javascript" src="../../Site/javascript/special_functions.js"></script>
  62. <script type="text/javascript" src="../../Site/javascript/hoverIntent.js"></script>
  63. <script type="text/javascript" src="../../Site/javascript/superfish.js"></script>
  64. <!-- #BeginEditable "misc scripting" -->
  65. <!-- #EndEditable -->
  66. <!-- /scripts -->
  67. <!-- ie -->
  68. <!-- #BeginEditable "ie6-9 scripting" -->
  69. <!-- IE Styles and Scripts-->
  70. <!--[if lt IE 9]>
  71. <link title="default" rel="stylesheet" type="text/css" href="../../Site/styles/ie/ie.css" />
  72. <link title="mobile" rel="alternate stylesheet" type="text/css" href="../../Site/styles/ie/mobile.css" />
  73. <link title="narrow" rel="alternate stylesheet" type="text/css" href="../../Site/styles/ie/narrow.css" />
  74. <link title="standard" rel="alternate stylesheet" type="text/css" href="../../Site/styles/ie/standard.css" />
  75. <script type='text/javascript' src="../../Site/javascript/html5.js"></script>
  76. <script type='text/javascript' src="../../Site/javascript/dynamiclayout.js" ></script>
  77. <![endif]-->
  78. <!-- IE6 transparent PNG -->
  79. <!--[if lte IE 6]>
  80. <script type='text/javascript' src="../../Site/javascript/supersleight-min.js"></script>
  81. <![endif]-->
  82. <!-- #EndEditable -->
  83. </head>
  84. <body>
  85. <!-- #BeginEditable "advertising_top" -->
  86. <!-- #EndEditable -->
  87. <!-- bdy wrapper -->
  88. <div id="bdy_wrapper">
  89. <!-- main -->
  90. <div id="main">
  91. <!-- header -->
  92. <header id="headerTop">
  93. <div id="headerInner">
  94. <hgroup>
  95. <!-- seo1 -->
  96. <h1 id="seo_1">
  97. <!-- #BeginEditable "seo_1" -->Home of the 2000 Southwest Show Bull of The Year!<!-- #EndEditable -->
  98. </h1>
  99. <!-- /seo1 -->
  100. <!-- seo2 -->
  101. <h2 id="seo_2">
  102. <!-- #BeginEditable "seo_2" -->MCM Major League 53G ET<!-- #EndEditable -->
  103. </h2>
  104. <!-- /seo2 -->
  105. </hgroup>
  106. <!-- optional_content -->
  107. <div id="optional_content">
  108. <!-- #BeginEditable "optional_content" -->
  109. <hgroup>
  110. <h3></h3>
  111. <h4></h4>
  112. </hgroup>
  113. <!-- #EndEditable -->
  114. </div >
  115. <!-- /optional content -->
  116. <!-- #BeginEditable "header_wrapper" -->
  117. <!-- nivo_slider -->
  118. <div id="nivo_slider">
  119. <!--webbot bot="Include" U-Include="../../Library/component-nivo-slider/nivo-slider.htm" TAG="BODY" --></div>
  120. <!-- /nivo_slider -->
  121. <!-- nivo_slider_small -->
  122. <div id="nivo_slider_small">
  123. <!--webbot bot="Include" U-Include="../../Library/component-nivo-slider-small/nivo-slider-small.htm" TAG="BODY" --></div>
  124. <!-- /nivo_slider_small -->
  125. <!-- themed_object -->
  126. <div id="themed_object">
  127. <!--webbot bot="Include" U-Include="../../Library/themed-object/themed-object.htm" TAG="BODY" --></div>
  128. <!-- /themed_object -->
  129. <!-- text_logo -->
  130. <div id="text_logo">
  131. <!--webbot bot="Include" U-Include="../../Library/logo/wrappers/logo-wrapper.htm" TAG="BODY" --></div>
  132. <!-- /text_logo -->
  133. <!-- graphic_logo -->
  134. <div id="graphic_logo">
  135. <!--webbot bot="Include" U-Include="../../Library/logo/graphic-logo.htm" TAG="BODY" --></div>
  136. <!-- /graphic_logo -->
  137. <!-- logo_tagline -->
  138. <div id="logo_tagline">
  139. <!--webbot bot="Include" U-Include="../../Library/logo/logo-tagline.htm" TAG="BODY" --></div>
  140. <!-- /logo_tagline -->
  141. <!-- G10-Component-Swap:mega-menu -->
  142. <!-- menu_top -->
  143. <!--webbot bot="Include" U-Include="../../Library/menu-top/wrappers/menu-top-wrapper.htm" TAG="BODY" -->
  144. <!-- /menu_top -->
  145. <!-- /G10-Component-Swap:mega-menu -->
  146. <!-- bookmark -->
  147. <div id="bookmark">
  148. <!--webbot bot="Include" U-Include="../../Library/social-networking/bookmark.htm" TAG="BODY" --></div>
  149. <!-- /bookmark -->
  150. <!-- twitter_facebook -->
  151. <div id="twitter_facebook">
  152. <!--webbot bot="Include" U-Include="../../Library/social-networking/twitter-facebook-linkedIN.htm" TAG="BODY" --></div>
  153. <!-- /twitter_facebook -->
  154. <!-- get_in_touch -->
  155. <div id="get_in_touch">
  156. <!--webbot bot="Include" U-Include="../../Library/extras/get-in-touch.htm" TAG="BODY" --></div>
  157. <!-- /get_in_touch -->
  158. <!-- zoom_menu_component -->
  159. <div id="zoom_menu_component">
  160. <!--webbot bot="Include" U-Include="../../Library/menu-zoom/zoom-menu.htm" TAG="BODY" --></div>
  161. <!-- /zoom_menu_component -->
  162. <!-- custom_component1 -->
  163. <div id="custom_component1">
  164. <!--webbot bot="Include" U-Include="../../Library/custom-components/custom-component1.htm" TAG="BODY" --></div>
  165. <!-- /custom_component -->
  166. <!-- custom_component2 -->
  167. <div id="custom_component2">
  168. <!--webbot bot="Include" U-Include="../../Library/custom-components/custom-component2.htm" TAG="BODY" --></div>
  169. <!-- /custom_component -->
  170. <!-- custom_component3 -->
  171. <div id="custom_component3">
  172. <!--webbot bot="Include" U-Include="../../Library/custom-components/custom-component3.htm" TAG="BODY" --></div>
  173. <!-- /custom_component -->
  174. <!-- back_to_top -->
  175. <div class="back_to_top"><a id="top"></a></div>
  176. <!-- /back_to_top -->
  177. <!-- #EndEditable -->
  178. </div>
  179. </header>
  180. <!-- /header -->
  181. <div class="clear"></div>
  182. <!-- #BeginEditable "advertising_1" -->
  183. <!-- #EndEditable -->
  184. <div class="clear"></div>
  185. <!-- info boxes -->
  186. <aside id="leftinfo">
  187. <div class="boxi">
  188. <!-- #BeginEditable "left_info" -->
  189. <!--webbot bot="Include" U-Include="../../Library/news-boxes/info-left.htm" TAG="BODY" --><!-- #EndEditable --></div>
  190. </aside>
  191. <!-- centerinfo -->
  192. <aside id="centerinfo">
  193. <div class="boxi">
  194. <!-- #BeginEditable "center_info" -->
  195. <!--webbot bot="Include" U-Include="../../Library/news-boxes/info-center.htm" TAG="BODY" --><!-- #EndEditable --></div>
  196. </aside>
  197. <!-- rightinfo -->
  198. <aside id="rightinfo">
  199. <div class="boxi">
  200. <!-- #BeginEditable "right_info" -->
  201. <!--webbot bot="Include" U-Include="../../Library/news-boxes/info-right.htm" TAG="BODY" --><!-- #EndEditable --></div>
  202. </aside>
  203. <!-- /info boxes -->
  204. <div class="clear"></div>
  205. <!-- #BeginEditable "advertising_2" -->
  206. <!-- #EndEditable -->
  207. <!-- column bgs -->
  208. <div id="columns_top"></div>
  209. <div id="columns_bg">
  210. <!-- column1 -->
  211. <section id="column1">
  212. <!-- #BeginEditable "column1" -->
  213. <!-- sidemenu -->
  214. <nav class="sidemenu">
  215. <div class="box1">
  216. <!--webbot bot="Include" U-Include="../../Library/menu-side/wrappers/menu-side-wrapper.htm" TAG="BODY" --></div>
  217. </nav>
  218. <!-- /sidemenu -->
  219. <!-- #EndEditable -->
  220. </section>
  221. <!-- /column1 -->
  222. <!-- column3 -->
  223. <section id="column3">
  224. <!-- G10-Component-Swap:google-site-search -->
  225. <!-- /G10-Component-Swap:google-site-search -->
  226. <!-- box4 -->
  227. <article class="box4">
  228. <!-- #BeginEditable "body1" -->
  229. <!-- numo box right -->
  230. <h3>{listing_title}</h3>
  231. <p>
  232. <table style="width: 100%">
  233. <tr>
  234. <td><!-- bof "listing_detail_mainjavarows.html" -->
  235. <div id="listing_detail_mainjavarows">
  236. <div id="listing_detail_mainjavarows_inner">
  237. {hide_printer_friendly}
  238. {next_prev}
  239. {/hide_printer_friendly}
  240. <div id="listing_detail_mainjavarows_header">
  241. </div>
  242. <div class="clear">&nbsp;</div>
  243. <div id="listing_detail_mainjavarows_fieldslinks">
  244. <div id="listing_detail_mainjavarows_mainimage">
  245. <p>{main_image_java}</p>
  246. <p id="mainjavarows_thumbs">{listing_images_java_rows}</p>
  247. </div>
  248. <h5><div class="float_left_half">
  249. <right>{top_left}</right>
  250. </div>
  251. <div>
  252. {top_right}
  253. </div>
  254. <div class="clear">
  255. <center>{center}</center>
  256. </div></h5>
  257. <div class="clear">
  258. <center>{center2}</center>
  259. </div><h5><p>
  260. <center>{center3}</center>
  261. </p></h5><p class="auto-style2">
  262. <a href="{listing_field_link_rawvalue}" class="auto-style3">{listing_field_link_caption}</a></p>
  263. <div class="clear">&nbsp;</div>
  264. <h5><div class="float_left_half">
  265. <center>{bottom_left}</center>
  266. </div>
  267. <div>
  268. <center>{bottom_right}</center><br><br></div></h5>
  269. {lang_this_listing_has_been_viewed} <strong>{hitcount}</strong> {lang_times}.
  270. <div class="clear">
  271. <hr />
  272. </div>
  273. </div>
  274. </div>
  275. </div>
  276. <!-- eof "listing_detail_mainjavarows.html" --></td>
  277. </tr>
  278. </table>
  279. </p>
  280. <!-- #EndEditable -->
  281. </article>
  282. <!-- box4 -->
  283. </section>
  284. <!-- /column2 -->
  285. <!-- column4 -->
  286. <section id="column4">
  287. <!-- #BeginEditable "column4" -->
  288. <!-- optional box ... to enable ... delete this line
  289. <div class="box1">
  290. <h3>Heading</h3>
  291. <p>This is where you would add your text, images, or advertising banner</p>
  292. </div>
  293. /optional box ... to enable ... delete this line -->
  294. <!-- #EndEditable -->
  295. </section>
  296. <!-- /column4 -->
  297. <div class="clear"></div>
  298. </div>
  299. <div id="columns_bottom"></div>
  300. <!-- /column bgs -->
  301. <!-- #BeginEditable "advertising_3" -->
  302. <!-- #EndEditable -->
  303. <div class="clear"></div>
  304. <!-- backtotop -->
  305. <section id="backtotop">
  306. <!-- #BeginEditable "back_to_top" -->
  307. <!--webbot bot="Include" U-Include="../../Library/extras/back-to-top.htm" TAG="BODY" --><!-- #EndEditable --></section>
  308. <!-- /backtotop -->
  309. <div class="clear"></div>
  310. </div>
  311. <!--/main -->
  312. <div class="clear"></div>
  313. <!-- footer -->
  314. <footer id="footer_bg"><div id="footer"><div class="footer">
  315. <!-- #BeginEditable "footer" -->
  316. <!-- footerleft -->
  317. <section id="footerleft" class="grid_info">
  318. <div class="footer_left">
  319. <div class="footer_quicklink">
  320. <!--webbot bot="Include" U-Include="../../Library/footer/footer-left.htm" TAG="BODY" --></div>
  321. </div>
  322. </section>
  323. <!-- /footerleft -->
  324. <!-- footercenter -->
  325. <section id="footercenter" class="grid_info">
  326. <div class="footer_center">
  327. <div class="footer_social">
  328. <!--webbot bot="Include" U-Include="../../Library/footer/footer-center.htm" TAG="BODY" --></div>
  329. </div>
  330. </section>
  331. <!-- /footercenter -->
  332. <!-- footerright -->
  333. <section id="footerright" class="grid_info">
  334. <div class="footer_right">
  335. <div class="footer_contact">
  336. <!--webbot bot="Include" U-Include="../../Library/footer/footer-right.htm" TAG="BODY" --></div>
  337. </div>
  338. </section>
  339. <!-- /footerright -->
  340. <div class="clear"></div>
  341. <!-- #EndEditable -->
  342. </div></div>
  343. </footer>
  344. <!-- /footer -->
  345. <section id="copyright">
  346. <!-- #BeginEditable "copyright" -->
  347. <!--webbot bot="Include" U-Include="../../Library/footer/copyright.htm" TAG="BODY" --><!-- #EndEditable --></section>
  348. <!-- special1 -->
  349. <section id="special1">
  350. <!-- #BeginEditable "special_1" -->
  351. <div style="text-align: center" class="box4"><a style="text-decoration: none;" href="http://www.tonymdhall.com">Website Designed by Tony Hall</a></div>
  352. <!-- #EndEditable -->
  353. </section>
  354. <!-- /special1 -->
  355. <!-- special2 -->
  356. <section id="special2">
  357. <!-- #BeginEditable "special_2" -->
  358. <!-- copy scripts or tracker codes here -->
  359. <!-- #EndEditable -->
  360. </section>
  361. <!-- /special2 -->
  362. <!-- #BeginEditable "premium_components" -->
  363. <!-- #EndEditable -->
  364. </div>
  365. <!-- /bdy wrapper -->
  366. <!-- #BeginEditable "advertising_bottom" -->
  367. <!-- #EndEditable -->
  368. </body>
  369. <!-- #EndTemplate -->
  370. </html>

Add Comment

Comments (2)

photo Employee
1

The listing_detail_mainjavarows.html template file cannot contain <html> <head> or <body> elements. That markup should only be placed within 'main.html' or any of its special counterparts.

http://docs.transparent-tech.com/open-realty/latest/maintemplates.html

Additionally you cannot just replace the content contained in the <head> </head> of an existing OR template's 'main.html' file you are using as a model for your custom template (tags such as: {load_js} and others must be present) unless you can provide replacement functionality for items such as the default CSS, the slideshow (and other JS javascript) and the version of jQuery already being loaded by OR which is v1.7.1.

In your code above you are loading an old version of jQuery, (you shou;d use OR's in most cases), and you also need to make sure any jQuery libs or scripts you use are compatible with the version of jQuery you load. Chrome's developer tools are useful for debugging JS problems or conflicts.

You should carefully examine and understand the contents of the <head> in either the HTML5 or Lazuli example template's 'main.html' before attempting to replace or omit those contents. I would suggest viewing the source of your home page when set to use either template above to see what the {load_js} and other tags actually generate for your setup.

You should also be placing/copying any custom code into an OR template, and not the reverse. Best way to do this quickly is in the docs:

http://docs.transparent-tech.com/open-realty/latest/creatingorconvertingatemplate.html

It would also benefit you to leverage the {baseurl} and/or {template_url} template tags when loading any custom JS, CSS, or image files into your template files as those tags will always generate the proper URL for the root of your site or your custom template folder respectively even if you move the site to a different domain or URL.

http://docs.transparent-tech.com/open-realty/latest/maintemplatetags.html

photo Employee
1

Also, viewing your site link above using chrome and its Developer tools, there are a lot of 404 errors (not found) being reported to the browser for various images, some of which would seem to be handled via your old version of jQuery. It seems you are trying to store/load photos and etc from outside of your custom template folder beneath /template/ and either are using incorrect URLs or the files are truly missing. I would suggest placing all custom images, scripts, CSS and etc somewhere within your custom template folder, that way you can keep everything in one location for moving/backing-up/migrating and then you can use an OR template tag within your template files to render most of the URL automatically:

e.g.

{template_url}/themed_images/portfolio-very-large-4.jpg

That would generate the following URL for the photo:

http://mcmullinranch.com/Site/template/YOURTEMPLATE/themed_images/portfolio-very-large-4.jpg

(where YOURTEMPLATE is the folder name of your custom template. Assumes you have your photo in a /themed_images/ sub-folder of the same custom template folder.)

If you don't want to do that I would strongly urge you to use absolute and not relative links for any URLs you create.

Also, if you load your CSS files via {load_css_FILENAME} you can also use the {template_url} tag within your CSS files themselves for anything requiring a link to an image stored in your template folder.

http://docs.transparent-tech.com/open-realty/latest/developernotestips0.html

Lastly, you will want to make sure to read and understand the following curly-brace { } considerations when using any inline javascript within your template otherwise it may break:

http://docs.transparent-tech.com/open-realty/latest/troubleshootingdisplayproblems.html

Leave Comment

photo

Attach files...

The file must be a jpg, gif, png, bmp, ico, pdf, doc, rtf, txt, zip or rar no more than 20M