0

I need to open lightbox when clicking on href link.
I tried the following code but it doesn't open the lightbox (the url opens in the same browser).
Would you please let me know how to open lightbox?

Existing code (created by using DWQA plugin):

<div class="dwqa-questions-list">
     <div class="dwqa-question-item dwqa-status-answered">
           <header class="dwqa-question-title">
                  <a href="https://www.web.com/question/%ed%94/">Question One</a>
          </header>
     </div>
     <div class="dwqa-question-item dwqa-status-answered">
           <header class="dwqa-question-title">
                   <a href="https://www.web.com/question/%ed%94%8c%/">Question Two</a>
           </header>
     </div>
</div>

Lightbox code I tried:
The console shows one error:
Unexpected token '<' => <!DOCTYPE html>


?>
<script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script>
<script>
        (function($){
           $(document).ready(function() {
            $("a", ".dwqa-question-title").click(
              function(event) {
                event.preventDefault();
                var elementURL = $(this).attr("href");
                $.colorbox({iframe: true, href: elementURL, innerWidth: 645, innerHeight: 509});
              });
          });
       });
</script>

Thank you.
isbe
  • 233
  • 2
  • 12
  • Are you including jQuery script in your HTML? – Dan Mullin May 28 '21 at 00:54
  • Hi Dan: ummm.. sorry but I can't cleary understand your question. I'm using jQuery, HTML, php for this page (jQuery I included ; jQuery( ".dwqa-votes-count" ).remove();). The href page => www.web.com/question/ is php and no jQuery inside.. I'm not sure if I answered rightly? – isbe May 28 '21 at 00:59
  • `Uncaught TypeError: $ is not a function` means that your script is running before JQuery has been loaded. – disinfor May 28 '21 at 01:52
  • Does this answer your question? [TypeError: $ is not a function when calling jQuery function](https://stackoverflow.com/questions/12343714/typeerror-is-not-a-function-when-calling-jquery-function) – disinfor May 28 '21 at 01:52
  • @disinfor: Hi, thank you for your advice. I deleted the jQuery I added but still shows this error in console => Uncaught TypeError: $ is not a function . Would you please let me know how to fix the problem? – isbe May 28 '21 at 02:04
  • @disinfor: and I added var $=jQuery.noConflict(); then shows this error: $.colorbox is not a function (I added the code I tried in my question) – isbe May 28 '21 at 02:15
  • Any time you see an error like `colorbox is not a function` means that the script/library is not loaded yet. You need to have your JS load AFTER those scripts. How are you loading your JS? In WP you should be using the `wp_enqueue_scripts` function. – disinfor May 28 '21 at 02:44
  • Oh... Thank you for your advice. I changed the code and it seems it's loading now but shows two different errors.. I updated the code in my question.. Would you please help me? – isbe May 28 '21 at 02:47
  • You are missing a closing parenthesis and bracket. You need to add this `});` before the closing `` tag. – disinfor May 28 '21 at 02:57
  • Oh... Thank you, I added it and now shows one error in console Unexpected token '<' => . It doesn't open the lightbox, but the url opens in the same browser. I think the code still has some problems, but I can't catch what it is... – isbe May 28 '21 at 03:51

0 Answers0