Develop Reference

Can't load leaflet maps in Wordpress

I've load the the style and the js in my function.php (you can see it in the last of each group)
function recursos_ah6studio(){
wp_enqueue_style('bootstrap', get_theme_file_uri('/css/bootstrap.min.css'));
wp_enqueue_style('slick', get_theme_file_uri('/slick/slick.css'));
wp_enqueue_style('slick-theme', get_theme_file_uri('/slick/slick-theme.css'));
wp_enqueue_style('magnific-popup', get_theme_file_uri('/magnific-popup/magnific-popup.css'));
wp_enqueue_style('font-awesome', get_theme_file_uri('/fontawesome-5.5/css/all.min.css'));
wp_enqueue_style('estilo_ah6studio', get_stylesheet_uri());
wp_enqueue_style('leaflet_style', 'https://unpkg.com/leaflet#1.8.0/dist/leaflet.css'); //here!
wp_enqueue_script('chartjs', 'https://cdn.jsdelivr.net/npm/chart.js', NULL, '1.0', true);
wp_enqueue_script('chartdatalabel', 'https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0/dist/chartjs-plugin-datalabels.min.js', NULL, '1.0', true);
wp_enqueue_script('jquery', get_theme_file_uri('/js/jquery-3.5.1.min.js'), NULL, '1.0', true);
wp_enqueue_script('popper', get_theme_file_uri('/js/popper.min.js'), NULL, '1.0', true);
wp_enqueue_script('boostrap', get_theme_file_uri('/js/bootstrap.min.js'), NULL, '1.0', true);
wp_enqueue_script('slickJS', get_theme_file_uri('/slick/slick.min.js'), NULL, '1.0', true);
wp_enqueue_script('magnific-popup', get_theme_file_uri('/magnific-popup/jquery.magnific-popup.min.js'), NULL, '1.0', true);
wp_enqueue_script('easingJS', get_theme_file_uri('/js/easing.min.js'), NULL, '1.0', true);
wp_enqueue_script('singlePageJS', get_theme_file_uri('/js/jquery.singlePageNav.min.js'), NULL, '1.0', true);
wp_enqueue_script('tool-tip', get_theme_file_uri('/js/tooltip.js'), NULL, '1.0', true);
wp_enqueue_script('leaflet_js','https://unpkg.com/leaflet#1.8.0/dist/leaflet.js', NULL, '1.0', true); // and here
}
add_action('wp_enqueue_scripts', 'recursos_ah6studio');
And put the code in my index.php I've even put some js that the official quick start of Leaflet tells you to start with
<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
</script>
But it does not load the map. Am I doing something wrong?
My footer.php looks like this (someone ask for it):
<div class="container">
<div class="tm-gallery-container">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8 footer_text"><p>Copyright © 2021 | Todos los derechos reservados | By DALF</p></div>
<div class="col-lg-2"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 social_icon">
<a href="https://www.facebook.com/ah6studio">
<img src="<?php echo get_theme_file_uri('/images/logo_fb.svg')?>" alt="facebook logo"></a>
<a href="https://www.youtube.com/channel/UCgPsU_qjhhbCFNETiT7OCWg">
<img src="<?php echo get_theme_file_uri('/images/logo_yt.svg')?>" alt="youtube logo"></a>
<a href="https://www.instagram.com/ah6studio/">
<img src="<?php echo get_theme_file_uri('/images/logo_ig.svg')?>" alt="instagram logo"></a>
<a href="https://www.linkedin.com/company/77211866/">
<img src="<?php echo get_theme_file_uri('/images/logo_Lin.svg')?>" alt="linkedin logo"></a>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

In WordPress, you don't add any code to index.php. The comment at the top of the page starts with "This file doesn't do anything..."
To make modifications, you add code to the theme's functions.php or any one of the template files. For illustration I'll use the footer.php template file that you have provided. I've not tested the code, but this should display the map in the Footer of the page:
<div class="container">
<div class="row">
<div class="col-lg-10">
<div id="map"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
</script>
</div>
</div>
<div class="tm-gallery-container">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8 footer_text"><p>Copyright © 2021 | Todos los derechos reservados | By DALF</p></div>
<div class="col-lg-2"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 social_icon">
<a href="https://www.facebook.com/ah6studio">
<img src="<?php echo get_theme_file_uri('/images/logo_fb.svg')?>" alt="facebook logo"></a>
<a href="https://www.youtube.com/channel/UCgPsU_qjhhbCFNETiT7OCWg">
<img src="<?php echo get_theme_file_uri('/images/logo_yt.svg')?>" alt="youtube logo"></a>
<a href="https://www.instagram.com/ah6studio/">
<img src="<?php echo get_theme_file_uri('/images/logo_ig.svg')?>" alt="instagram logo"></a>
<a href="https://www.linkedin.com/company/77211866/">
<img src="<?php echo get_theme_file_uri('/images/logo_Lin.svg')?>" alt="linkedin logo"></a>
</div>
<div class="col-lg-4"></div>
</div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>

Get the id from a Img without the ID

i'm creating a simple bootstrap gallery thumbnail with images that are being called from database. I succeed in calling all the info, but now i'm struggling with getting the id of each image. This is my code:
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
And this is my function in javascript:
function getID(e)
{
var x = e.src;
alert(x);
}
But it is not working, how do I get the id of each image if is being called from a database?

Why don't you get in the same way you wrote?
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
function getID(id)
{
alert(id);
}

function getID(obj){
if(obj instanceof HTMLElement) {
alert(obj.getAttribute("data-target-id"));
}
else {
alert(obj);
}
}
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="test test">
<div class="caption">
<h3>Example 1</h3>
<p>Using data-* attribute</p>
<p>Button</p>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="test test">
<div class="caption">
<h3>Example 2</h3>
<p>Passing id directly</p>
<p>Button</p>
</div>
</div>

you can use Attribute tag in a tag and add onclick function to get your id value . i set category-id Attribute and in javascript code use this tag to get value
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
then this is script function
<script>
function getID(obj)
{
alert(obj.getAttribute("category-id"));
}
</script>
or add onclick function and send id in this function
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
this is script
<script>
function getID(id)
{
alert(id);
}
</script>
both will work.

Hiding div javascript

I currently have two divs on my page, one called results, one called portfolio on my site. I have some javascript that toggles between the two. Currently, the portfolio div loads, but I would like to switch the order. At first, this appeared to be very simple, I would just switch the
<div style="display:none">
to the results section, however this throws off my page. Here's all the html markup.
<script type="text/javascript">
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
</script>
<span id="two">
<header class="title one">Portfolio</header>
<div class="spacer"></div>
<div class="title two"><?php echo fuel_var('body', 'This is a default layout. To change this layout go to the fuel/application/views/_layouts/main.php file.'); ?></div>
<section class="featured-slider">
<div id="ca-container" class="ca-container">
<div class="nav-featured">
<div class="prev-featured"></div>
<div class="next-featured"></div>
</div>
<div class="main-carousel hideme dontHide">
<div class="ca-wrapper portfolio_wrapper">
<div class="ca-item ca-item-1">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_ARDL.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Clevelandmetroparks2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>ARDL</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">ARDL</div>
</a>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_Polymerics.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Archive/Polymerics" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Polymerics</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Polymerics</div>
</a>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/screenshots/AW_Portfolio_Raune.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Archive/Ru.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Ruane Attorneys</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Ruane Attorneys</div>
</a>
</div>
</div>
<!--
<div class="ca-item ca-item-4">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="img/screenshots/AW_results_connecticut.png">
<div class="f-image">
<img src="img/featured/feat-04.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Connecticut Public Defenders</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Connecticut Public Defenders</div>
</a>
</div>
</div>
-->
<div class="ca-item ca-item-5">
<div class="f-single">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>images/screenshots/AW_results_ clevMetroparks.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/Archive/Clevelandmetroparks.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Cleveland Metroparks</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">Cleveland Metroparks</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div>
</div>
</span>
<div style="display:none" id="one">
<header class="title one">Results</header>
<div class="spacer"></div><br><br>
<section class="featured-slider">
<div id="ca-container" class="ca-container">
<div class="main-carousel hideme dontHide">
<div class="ca-wrapper results_wrapper">
<div class="ca-item ca-item-1">
<div class="f-single_two">
<a href="https://vimeo.com/84619379" class="mfp-iframe" title="My YouTube Video">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults_shit/cle2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Cleveland Metroparks</div>
<div class="clear"></div>
<div>Database Video</div>
</div>
</div>
<div class="f-info">Cleveland Metroparks</div>
</a>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="f-single_two">
<a href="http://vimeo.com/84619331" class="mfp-iframe" title="My YouTube Video">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults_shit/connecticut2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>Connecticut Public Defenders</div>
<div class="clear"></div>
<div>Database Video</div>
</div>
</div>
<div class="f-info">Connecticut Public Defenders</div>
</a>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="f-single_two">
<a data-gal="prettyPhoto[gallery1]" href="<?php echo base_url()?>assets/images/Screenshots/AW_Portfolio_ARDL.png">
<div class="f-image">
<img src="<?php echo base_url()?>assets/images/reslults_shit/ardl2.jpg" alt='img'>
<div class="image-hover-overlay"></div>
<span class="f-category"></span>
<div class="portfolio-meta">
<div>ARDL</div>
<div class="clear"></div>
<div>Database Screenshot</div>
</div>
</div>
<div class="f-info">ARDL</div>
</a>
</div>
</div>
</article>

if you're familiar with jQuery, there's a much easier way to do it.
$('#divName').hide();
$('#divName').show();
Put those inside your toggle/swap function.
P.S.: You prepend it with a '#' if you are using id (i.e.: div id="divName"), if you are using class you prepend it with a '.' You can also use $('#divName').css('display', 'none') and $('#divName').css('display', 'block').

The following JavaScript should work:
<script>
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
</script>
<div id="first" style="display:none"><p>One</p></div>
<div id="second"><p>Two</p></div>
<button onclick="swap('first','second')">Swap</button>

I found a solution: I figured something was coming up when it displayed it as a block, so I changed my javascript to this:
<script type="text/javascript">
function swap(one, two) {
document.getElementById(one).style.height = '100%';
document.getElementById(one).style.width = '100%';
document.getElementById(two).style.height = '0';
document.getElementById(two).style.width = '0';
}
</script>
Hope this helps anyone else.

Jquery images slide show does not start from beginning

I'm new to Jquery and Javascript. I have used the below code to display the images in a lightbox
<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#album1 a').lightBox();
$('#album2 a').lightBox();
});
</script>
Below is the PHP code to display the images using the above script.
<div class="image-zoom" rel="lightbox" id="gallery">
<div id="album1" style="margin-right:18px;" rel="lightbox">
<?php
if (isset($albums[0])) {
$i = 1;
foreach ($albums[0]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<?php
} else {
?>
<?php
}
$i++;
}
?>
<div class="zoom-magnifier" id="gallery">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom"/>
</a>
<div id="more-text" align="left" ><?=$albums[0]['title']?></div>
</div>
<?php
}
?>
</div>
<div id="album2" rel="lightbox">
<?php
foreach (array(1, 0) as $album_id) {
if (isset($albums[$album_id])) {
$i = 1;
foreach ($albums[$album_id]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<?php
} else {
?>
<?php
}
$i++;
}
?>
<div class="zoom-magnifier">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom1"/>
</a>
<div id="more-text2" class="more-txt-link"><?=$albums[$album_id]['title']?></div>
</div>
<?php
break;
}
}
?>
</div>
</div>
This generates a magnifier image inside an image.
When I click on the image, lightbox slides the images from 1 to 6. But when I click on the magnifier(zoom-icon.png). the lightbox starts sliding from last but one image. How to make it start from image 1.

Try
<div class="image-zoom" rel="lightbox" id="gallery">
<div id="album1" style="margin-right:18px;" rel="lightbox">
<?php
if (isset($albums[0])) {
$i = 1;
foreach ($albums[0]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<div class="zoom-magnifier" id="gallery">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom"/>
</a>
<div id="more-text" align="left" ><?=$albums[0]['title']?></div>
</div>
<?php
} else {
?>
<?php
}
$i++;
}
}
?>
</div>
<div id="album2" rel="lightbox">
<?php
foreach (array(1, 0) as $album_id) {
if (isset($albums[$album_id])) {
$i = 1;
foreach ($albums[$album_id]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<div class="zoom-magnifier">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom1"/>
</a>
<div id="more-text2" class="more-txt-link"><?=$albums[$album_id]['title']?></div>
</div>
<?php
} else {
?>
<?php
}
$i++;
}
break;
}
}
?>
</div>
</div>

Jquery : Why is the first image repeated twice in lightbox

I'm new to Jquery and PHP. With the below code, I see the first image gets repeated twice, while the rest of the images are displayed properly.
<div class="image-zoom" rel="lightbox" id="gallery">
<div id="album1" style="margin-right:18px;" rel="lightbox">
<?php
if (isset($albums[0])) {
$i = 1;
foreach ($albums[0]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<div class="zoom-magnifier" id="gallery">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom"/>
</a>
<div id="more-text" align="left" ><?=$albums[0]['title']?></div>
</div>
<?php
} else {
?>
<?php
}
$i++;
}
}
?>
</div>
<div id="album2" rel="lightbox">
<?php
foreach (array(1, 0) as $album_id) {
if (isset($albums[$album_id])) {
$i = 1;
foreach ($albums[$album_id]['photos'] as $photo) {
if ($i == 1) {
?>
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?= $photo ?>" width="214" height="160" />
</a>
<div class="zoom-magnifier">
<a href="<?= $photo ?>" rel="lightbox">
<img src="<?php echo Yii::app()->theme->baseUrl; ?>/images/zoom-icon.png" id="zoom1"/>
</a>
<div id="more-text2" class="more-txt-link"><?=$albums[$album_id]['title']?></div>
</div>
<?php
} else {
?>
<?php
}
$i++;
}
break;
}
}
?>
</div>
</div>
Below is the code of lightbox script.
<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#album1 a').lightBox();
$('#album2 a').lightBox();
});
</script>
So if there are 5 images to be displayed, with the above code I get 6 images displayed with the first image repeated twice.
How can I avoid this