joomla - can't install thickbox/lightbox/shadowbox

Posted on 2011-04-28
Last Modified: 2012-05-11
I am trying to use a simple thickbox/lightbox/shadowbox as in here:

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?
Question by:tomermes
    LVL 13

    Expert Comment

    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?

    Author Comment

    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," /> 
      <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" /> 
      <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) 2002-2005 / Author: Mihai Bazon\n" +
    "For latest version visit:\n" +
    "Distributed under GNU LGPL.  See 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

    LVL 13

    Accepted Solution

    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.

    Author Comment

    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


    Author Comment

    is there any alternative to thickbox of mootools?
    LVL 13

    Expert Comment

    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?

    Author Comment

    thanks. is the site in question.
    the top zip finder is supposed to open the box
    would you recommend the mediaboxAdvanced?

    Featured Post

    Gigs: Get Your Project Delivered by an Expert

    Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

    Join & Write a Comment

    In the following article I will try to explain some of the issues I had learning Joomla and I hope this helps all of you beginners out there that love the concept but find it confusing and difficult to manage and configure a Joomla website. Like …
    Have you ever wanted to use that sweet jQuery gallery plugin on your Joomla site but couldn't get it working due to jQuery conflicts or your lack of knowledge about what's under the Joomla hood? This article will step you through the process of impl…
    In this sixth video of the Xpdf series, we discuss and demonstrate the PDFtoPNG utility, which converts a multi-page PDF file to separate color, grayscale, or monochrome PNG files, creating one PNG file for each page in the PDF. It does this via a c…
    Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now