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?

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.

*UPDATE

I included the flexslider css an js in functions.php like this:

function call_custom_scr_styles() {
    wp_enqueue_style( 'flexslider-style', get_template_directory_uri() . 'http://electives-abroad.org/flexslider.css' );

    wp_enqueue_script( 'jquery-custom', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js', array(), '1.0.0', true );

wp_enqueue_script( 'flexslider-script', 'http://electives-abroad.org/jquery.flexslider.js', array(), '1.0.0', true );

}
add_action( 'wp_enqueue_scripts', 'call_custom_scr_styles' );

I'm having the same problem. Some pictures disappear from home:

http://electives-abroad.org/

0

In wordpress, you should always use enqueue to include scripts and styles.

Find functions.php file inside your theme, go to the end and add following

function call_custom_scr_styles() {
    wp_enqueue_style( 'flexslider-style', get_template_directory_uri() . '/css/flexslider.css' );

    wp_enqueue_script( 'jquery-custom', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js', array(), '1.0.0', true );

wp_enqueue_script( 'flexslider-script', 'http://electives-abroad.org/jquery.flexslider.js', array(), '1.0.0', true );

}
add_action( 'wp_enqueue_scripts', 'call_custom_scr_styles' );

note: I assumed you have flexslider.css file inside your theme directory/css folder. if not, change the location

In this case why you get errors because your browser cannot properly render required content and resources. You should include jQuery as first because flexSlider's scrips have dependencies on jQuery. then you said you uploaded css file into your site using ftp but you didn't call that but you call yyour flexslider css from http://electives-abroad.org/flexslider.css.

Make sure all your resources are available, and browser is capable of loading/rendering everything.

TypeError: $(...).on is not a function is caused because $ symbols you've used in your scripts are not defined. probably because jQuery error. could be not properly included or either JS conflict.

Uncaught TypeError: this.sliderElement.on is not a function is because browser doesn't know what to do when this.sliderElement.on is called. As I said before, flexslider require jQuery and for that, jQuery should have loaded before your flexslider script loads.

  • I updated my post. I tested it and the results are the same. – Draws Ren Gundam May 3 at 7:26
  • how many images do you have?I can see 4 – Vishwa May 3 at 7:27
  • and I see the errors you first mentioned are gone. did you tried clearing up your cache? – Vishwa May 3 at 7:29
  • 3 images in "Country Profiles", 1 on the left in "Why do your elective abroad", the images for each post in the carousel in "Most popular elective placements". I don't understand why do they disappear. – Draws Ren Gundam May 3 at 7:31
  • you have a css code which sets image opacity to 0. This is the rule .et_pb_slide:first-child .et_pb_slide_image img { opacity: 0; } overrite it in your css to make opacity:1. – Vishwa May 3 at 7:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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