• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 614
  • Last Modified:

joomla - can't install thickbox/lightbox/shadowbox

I am trying to use a simple thickbox/lightbox/shadowbox as in here: http://twostepmove.com/modules/mod_form/tmpl/demo/main_form.php

but when putting the same exact that works fine here in a joomla module the link doesn't respond at all. the code is:
<a href="#TB_inline?height=155&width=400&inlineId=modalWindow" class="thickbox">Click here    
for an autocomplete inside a thickbox window.</a> (this should work even if it is beyond   
the fold)
<div id="modalWindow" style="display: none;">

Open in new window

it doesn't even cause an error, it just doesn't work.
what can I do?
  • 4
  • 3
1 Solution
what javascripts are you already running? Thickbox uses jQuery. Is it possible you are already running Scriptaculous or Prototype?

If you are running more than one JS architecture you will find certain scripts unresponsive.

Can you post your parsed head data from a page?
tomermesAuthor Commented:
this is the parsed head of the homepage:

<meta name="google-site-verification" content="TaRvuR979DtVW8TrGbVDGEOPxFUB5poLGNOvKz3p9F8" />

  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
  <meta name="robots" content="index, follow" /> 
  <meta name="keywords" content="moving companies, movers, moving services, moving quotes, quotes for moving, movers truck, moving tools, movers van lines, storage movers, packers movers, relocation movers, interstate movers, international movers, cross country van lines, long distance truck rental, twostepmove.com" /> 
  <meta name="title" content="home page welcome" /> 
  <meta name="author" content="Administrator" /> 
  <meta name="description" content="Manage moving and relocation process with our moving van line, moving truck rental quotes, home mortgage quotes and calculators, self-storage search, address change, utility transfer, and city profiling at Twostepmove.com" /> 
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" /> 
  <link href="/templates/twostep/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
  <link rel="stylesheet" href="/modules/mod_form/style.css" type="text/css" /> 
  <link rel="stylesheet" href="/media/system/css/calendar-jos.css" type="text/css"  title="Green"  media="all" /> 
  <script type="text/javascript" src="/media/system/js/mootools.js"></script> 
  <script type="text/javascript" src="/media/system/js/caption.js"></script> 
  <script type="text/javascript" src="/modules/mod_form/script.js"></script> 
  <script type="text/javascript" src="/media/system/js/calendar.js"></script> 
  <script type="text/javascript" src="/media/system/js/calendar-setup.js"></script> 
  <script type="text/javascript"> 
Calendar._DN = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday");Calendar._SDN = new Array ("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"); Calendar._FD = 0;	Calendar._MN = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");	Calendar._SMN = new Array ("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");Calendar._TT = {};Calendar._TT["INFO"] = "About the Calendar";
 		Calendar._TT["ABOUT"] =
 "DHTML Date/Time Selector\n" +
 "(c) dynarch.com 2002-2005 / Author: Mihai Bazon\n" +
"For latest version visit: http://www.dynarch.com/projects/calendar/\n" +
"Distributed under GNU LGPL.  See http://gnu.org/licenses/lgpl.html for details." +
"\n\n" +
"Date selection:\n" +
"- Use the \xab, \xbb buttons to select year\n" +
"- Use the " + String.fromCharCode(0x2039) + ", " + String.fromCharCode(0x203a) + " buttons to select month\n" +
"- Hold mouse button on any of the above buttons for faster selection.";
Calendar._TT["ABOUT_TIME"] = "\n\n" +
"Time selection:\n" +
"- Click on any of the time parts to increase it\n" +
"- or Shift-click to decrease it\n" +
"- or click and drag for faster selection.";
		Calendar._TT["PREV_YEAR"] = "Click to move to the previous year. Click and hold for a list of years.";Calendar._TT["PREV_MONTH"] = "Click to move to the previous month. Click and hold for a list of the months.";	Calendar._TT["GO_TODAY"] = "Go to today";Calendar._TT["NEXT_MONTH"] = "Click to move to the next month. Click and hold for a list of the months.";Calendar._TT["NEXT_YEAR"] = "Click to move to the next year. Click and hold for a list of years.";Calendar._TT["SEL_DATE"] = "Select a date";Calendar._TT["DRAG_TO_MOVE"] = "Drag to move";Calendar._TT["PART_TODAY"] = " (Today)";Calendar._TT["DAY_FIRST"] = "Display %s first";Calendar._TT["WEEKEND"] = "0,6";Calendar._TT["CLOSE"] = "Close";Calendar._TT["TODAY"] = "Today";Calendar._TT["TIME_PART"] = "(Shift-)Click or Drag to change the value.";Calendar._TT["DEF_DATE_FORMAT"] = "%Y-%m-%d"; Calendar._TT["TT_DATE_FORMAT"] = "%A, %B %e";Calendar._TT["WK"] = "wk";Calendar._TT["TIME"] = "Time:";

<link href="/templates/twostep/css/style.css" rel="stylesheet" type="text/css" />


Open in new window

It doesn't look like you even have the jQuery library loaded. And you do have mootools. These two libraries don't play nice together unless you add the appropriate info.

You could try adding the necessary javascript file links in the header and seeing if thickbox will work with mootools and jquery side by side.

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

tomermesAuthor Commented:
I don't of any use Scriptaculous or Prototype, but I continue an old project of some programmer I can't reach, so it might be there. here are all the usages on the module itself:
<script type="text/javascript" src="../modules/mod_form/tmpl/lib/jquery.js"></script>
<script type='text/javascript' src='../modules/mod_form/tmpl/lib/jquery.bgiframe.min.js'></script>
<script type='text/javascript' src='../modules/mod_form/tmpl/lib/jquery.ajaxQueue.js'></script>
<script type='text/javascript' src='../modules/mod_form/tmpl/lib/thickbox-compressed.js'></script>
<script type='text/javascript' src='../modules/mod_form/tmpl/jquery.autocomplete.js'></script>
<script type='text/javascript' src='../modules/mod_form/tmpl/demo/localdata.js'></script>

Open in new window

tomermesAuthor Commented:
is there any alternative to thickbox of mootools?
Were those libraries loading below the head? I just figured they would be in there if it was loading them.

Here is one for MooTools called SlimBox.


If you have a link to the site in question, can I get it?
tomermesAuthor Commented:
www.twostepmove.com is the site in question.
the top zip finder is supposed to open the box
would you recommend the mediaboxAdvanced?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now