0

I want to display the gallery with Flexslider like in the tutorial here:

https://www.advancedcustomfields.com/resources/gallery/

So i went to the Flexslider site and followed the steps:

https://woocommerce.com/flexslider/

Where do i put this code?

<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>

I tried uploading the flexslider.css file and the and the jquery.flexslider.js to the root folder of my site via FTP and then i went to the header.php file of my theme (Divi) and i called them like this:

<?php wp_head(); ?>
<!-- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="http://electives-abroad.org/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://electives-abroad.org/jquery.flexslider.js"></script>
</head>

The result is that i got no slider and all the picture of my site disapear. How can i do it correctly?

UPDATE

This is what happens when i put the code on header.php, most of the pictures on my site become invisible and the console throws this:

Uncaught TypeError: n(...).on is not a function
    at Object.<anonymous> (n2.min.js?1552618971:1)
    at n2.min.js?1552618971:1
    at N2Deferred._doCallbacks (n2.min.js?1552618971:1)
    at N2Deferred.resolve (n2.min.js?1552618971:1)
    at s (n2.min.js?1552618971:1)
    at N2Deferred._doCallbacks (n2.min.js?1552618971:1)
    at N2Deferred.resolve (n2.min.js?1552618971:1)
    at n2.min.js?1552618971:1
    at N2Deferred._doCallbacks (n2.min.js?1552618971:1)
    at N2Deferred.then (n2.min.js?1552618971:1)
custom.js?ver=5.1.1:162 Uncaught TypeError: SFSI(...).on is not a function
    at custom.js?ver=5.1.1:162
custom.js?ver=3.0.65:1318 Uncaught TypeError: $(...).on is not a function
    at custom.js?ver=3.0.65:1318
    at custom.js?ver=3.0.65:1418
smartslider-frontend.min.js?1552619634:1 Uncaught TypeError: this.sliderElement.on is not a function
    at t.SmartSliderAbstract.onSliderHasDimension (smartslider-frontend.min.js?1552619634:1)
    at Object.g (jquery.min.js:16)
    at Object.resolveWith (jquery.min.js:16)
    at Object.done (jquery.min.js:16)
    at t.SmartSliderAbstract.waitForDimension (smartslider-frontend.min.js?1552619634:1)
    at t.SmartSliderAbstract.onSliderExists (smartslider-frontend.min.js?1552619634:1)
    at Object.g (jquery.min.js:16)
    at Object.resolveWith (jquery.min.js:16)
    at Object.resolve (jquery.min.js:16)
    at s (smartslider-frontend.min.js?1552619634:1)
VM212:1 Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

closed as off-topic by Michael, Krzysiek Dróżdż Apr 30 at 6:33

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • First of all - check your console in inspector mode. Does it return a 404 error for the files you have tried to link to in the head within your header.php file? – Jason Is My Name Apr 30 at 14:03
  • If that is the case. Maybe you have not placed the code in the correct place. It sounds like you should look for the header.php file located at the root of your theme. Within that file you will have a head tag. This code goes within this section. – Jason Is My Name Apr 30 at 14:06
  • Made an update on the original post. – Draws Ren Gundam May 1 at 10:34
0

I think you are using the free version of an advance custom field, In the free version, there is no option for gallery field. you have to buy gallery addons otherwise purchase advance custom field pro version.

  • Yes, i am. So i will need to purchase the pro version. – Draws Ren Gundam Apr 30 at 5:28

Not the answer you're looking for? Browse other questions tagged or ask your own question.