I want to display the gallery with Flexslider like in the tutorial here:
/
So i went to the Flexslider site and followed the steps:
/
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=".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=".css" type="text/css">
<script src=".6.2/jquery.min.js"></script>
<script src=".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() . '.css' );
wp_enqueue_script( 'jquery-custom', '.6.2/jquery.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'flexslider-script', '.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:
/
I want to display the gallery with Flexslider like in the tutorial here:
https://www.advancedcustomfields/resources/gallery/
So i went to the Flexslider site and followed the steps:
https://woocommerce/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/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/flexslider.css" type="text/css">
<script src="https://ajax.googleapis/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://electives-abroad/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/flexslider.css' );
wp_enqueue_script( 'jquery-custom', 'https://ajax.googleapis/ajax/libs/jquery/1.6.2/jquery.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'flexslider-script', 'http://electives-abroad/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/
Share Improve this question edited May 3, 2019 at 7:25 Draws Ren Gundam asked May 3, 2019 at 7:01 Draws Ren GundamDraws Ren Gundam 251 gold badge2 silver badges6 bronze badges1 Answer
Reset to default 0In 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/ajax/libs/jquery/1.6.2/jquery.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'flexslider-script', 'http://electives-abroad/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/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.