0

i want to put this html im my wordpress... I use page builer so i put it in my page.. How can i connect it with my jquery as well as with my Css? I am trying to put a lightbox in Wordpress. Im a newbie in Wordpress.. Can you please help me? Thanks in advance. ( Sorry if my English are bad :) )

Html code:

 <div class="frontleft">
 <a class="fancybox" rel="group" href="./images/frontpages/large/wratwnspor.jpg" title="Ωρα των σπορ"><img class="f1" src="./images/frontpages/small/wratwnspor.jpg" alt="Ωρα των σπορ"></a>   
 <a class="fancybox" rel="group" href="./images/frontpages/large/goal.jpg" title="Goal"><img class="f2" src="./images/frontpages/small/goal.jpg" alt="goal"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/sportday.jpg" title="Sportday"><img class="f3" src="./images/frontpages/small/sportday.jpg" alt="sportday"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/larg/live.jpg" title="Live"><img class="f4" src="./images/frontpages/small/live.jpg" alt="live"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/fwstwnspor.jpg" title="Φως των σπορ"><img class="f4" src="./images/frontpages/small/fwstwnspor.jpg" alt="Φως των σπορ"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/protathlitis.jpg" title="Προταθλητης"><img class="f4" src="./images/frontpages/small/protathlitis.jpg" alt="Προταθλητης"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/gauros.jpg" title="Γαυρος"><img class="f4" src="./images/frontpages/small/gauros.jpg" alt="Γαυρος"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/prasinh.jpg" title="Πρασινη"><img class="f4" src="./images/frontpages/small/prasinh.jpg" alt="Πρασινη"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/gata.jpg" title="Γατα"><img class="f4" src="./images/frontpages/small/gata.jpg" alt="Γατα"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/arena.jpg" title="Αρενα"><img class="f4" src="./images/frontpages/small/arena.jpg" alt="Αρενα"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/provlepseis.jpg" title="Προβλεψεις"><img class="f4" src="./images/frontpages/small/provlepseis.jpg" alt="Προβλεψεις"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/pamestoixima.jpg" title="Παμε Στοιχημα"><img class="f4" src="./images/frontpages/small/pamestoixima.jpg" alt="Παμε Στοιχημα"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/kingbet.jpg" title="Kingbet"><img class="f4" src="./images/frontpages/small/kingbet.jpg" alt="Kingbet"></a>
 <a class="fancybox" rel="group" href="./images/frontpages/large/matchmoney.jpg" title="matchmoney"><img class="f4" src="./images/frontpages/small/matchmoney.jpg" alt="matchmoney"></a>
</div>

My JQuery code:

      <script type="text/javascript">
        $(document).ready(function() {
        $(".fancybox").fancybox();
        });
    </script>

And i wanna link my jquery as well css... Where should i put my files as well..

    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>


<!-- FancyBox -->
    <script src="js/fancybox/jquery.fancybox.js"></script>
    <script src="js/fancybox/jquery.fancybox-buttons.js"></script>
    <script src="js/fancybox/jquery.fancybox-thumbs.js"></script>
    <script src="js/fancybox/jquery.easing-1.3.pack.js"></script>
    <script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>

   CSS:
         <link rel="stylesheet" href="css/fancybox/jquery.fancybox.css">
    <link rel="stylesheet" href="./css/newspaperstyle.css" type="text/css">
    <link rel="stylesheet" href="css/fancybox/jquery.fancybox-buttons.css">
    <link rel="stylesheet" href="css/fancybox/jquery.fancybox-thumbs.css">
1
  • You need to load the CSS and JS from functions.php. Also, add that jQueryon the page template where you want to load the fancybox. Check this and this Commented Jun 29, 2016 at 14:26

1 Answer 1

1

Use enqueue function to add JS files. You can add JS codes also. For further reference https://developer.wordpress.org/reference/functions/wp_enqueue_script/

In a similar way for CSS https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Use this hook functions in your functions.php. So it will be added to your theme.

No need to add these to header or any specific template.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.