I'm using magnific-popup for a lightbox gallery which I have working fine but I need to have the image title above the image and the description below the image.
the link I have when clicking the image for a larger view is:
<a <a class="test-popup-link" href="<?php echo $image_large['sizes']['gallery-main']; ?>" title="<?php echo the_sub_field('title'); ?>" data-description="<?php echo the_sub_field('description'); ?>">
which has the title and data-description but I need to somehow seperate these.
I also have this:
$('.popup-container').magnificPopup({
delegate: 'a',
type: 'image',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
},
image: {
titleSrc: function(item) {
return item.el.attr('title') + '<p>' + item.el.attr('data-description') + '</p>';
}
}
});
Is there a way of separating the title and description?
Related
I have page php & I have link to download file i need code show img one time
OR onclick Link (Download File) Hide img (nof1.gif)
Now I am replacing the image(nof1.gif) in an empty img (empty_img.png)
But when reloading the page the images Again
The idea to show the image only once
<a href="<?php echo base_url($l['admin_file']); ?>" target="_blank" >Download File </a>
<img id="my_images" src="nof1.gif" style="width:40px;height:30px"
onclick="this.src='empty_img.png'; "
>
or see the code There is an error and I do not know the solution!!!
<html>
<button onclick="hideImage()'"> Remove img </button>
<img id="my_images" src="http://karachiairport.com.pk/images/data-section/airline/24-11.png">
<script>
document.addEventListener('DOMContentLoaded', function() {
// If cookie exist
if (document.cookie.indexOf('image_clicked') > -1) {
document.getElementById("my_images").src="http://www.1dmag.com/all_asset/img/no-image.png";
}
function hideImage() {
document.getElementById("my_images").src="http://www.1dmag.com/all_asset/img/no-image.png";
document.cookie = "image_clicked=true";
}
});
</script>
A simple way is to use cookie
if (document.cookie.indexOf('image_clicked') > -1) {
document.getElementById("my_images").src="empty_img.png";
}
function hideImage() {
document.getElementById("my_images").src="empty_img.png";
document.cookie = "image_clicked=true";
}
Your html :
<a href="<?php echo base_url($l['admin_file']); ?>" onclick="hideImage()'" target="_blank" >Download File </a>
I am trying to echo WordPress post featured image URL inside JS file.
Below code will get the URL of wordpress post featured image:
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?><img src="<?php echo $url ?>" />
I have embedded the above code inside the below JS file.
var fapDom = '<div id="fap-wrapper" class="'+(options.wrapperPosition == 'top' ? 'fap-wrapper-top' : 'fap-wrapper-bottom')+' mjv-playlist-bg" style="'+options.wrapperPosition+': 0; height: '+totalHeight+'px;"><?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?><img src="<?php echo $url ?>" /><div id="fap-main" style="color:'+options.mainColor+';"><div id="fap-wrapper-switcher" style="background: '+options.wrapperColor+'; border-color: '+options.strokeColor+'" class="fap-'+options.wrapperPosition+'"></div><p id="fap-init-text">Creating...</p></div></div>';
But this is not working. PHP code not working inside the JS file, so is it possible to fetch the WordPress post featured image URL which is compatible to insert in the place of PHP code.
can we use div tag inside anchor function?
I have this div
#first{ opacity:0; }
Then I want to put it into my anchor. Here it is:
<?php
if(is_array($databuku)){
echo '<ol><br>';
$i = 1;
foreach($databuku as $key){
$judul = '<div id="draggable'.$i++.'" class="ui-widget-content"><center><strong>'.$key->tbl_name.'</strong>
<br> <br>
' .$key->index_no. ' / ' .$key->id. '
<br>
'.anchor('perpustakaan/koreksi_buku/'.$key->id, 'Edit').' |
// I want to put the div #first in 'Delete' function below //
'.anchor('perpustakaan/konfirm_hapus_buku/'.$key->id, 'Delete').'
</center></div>';
echo $judul;
}
echo '</ol>';
}
?>
I want to put the div #first in anchor -> delete. How can I do that?
This will work
anchor('perpustakaan/konfirm_hapus_buku/'.$key->id, '<div id="first">Delete</div>')
As the div opacity is 0 in your CSS, so that the div content is not visible to you and if you want to add the div#first in your anchor tag then try,
...anchor('perpustakaan/konfirm_hapus_buku/'.$key->id, '<div id="first"></div>Delete')....
On my webpage I have this link:
<\a onclick="#" class="compose"></a>
By clicking the link, this script gets activated:
$(function(){
$('.compose').click(function() { // Button which will activate our modal
$('#popup_bestanden_edit_name').reveal({ // The item which will be opened with reveal
animation: 'fade', // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
});
return false;
});
});
The script above will make this DIV visible, wich is a popup:
<div id="popup_bestanden_edit_name">
<div id="popupheading">
Naam wijzigen
</div>
<div id="popupcontent">
<p><form action="" method="post" name="naamwijzigen"><input name="naam" type="text"></form></p>
<img src="<?php echo $domein.'/images/confirm_popup/tick.png'; ?>">Ja, wijzigen
<img src="<?php echo $domein.'/images/confirm_popup/cross.png'; ?>">Nee, annuleren
</div>
The popup that opens gives people the opportunity to edit a name of a document on the website.
So when the link <\a onclick="#" class="compose"></a> is clicked, it has to send an id ($fetch_row['id']) to the popup, so I can use this in the further scripting.
Does anyone know how to do this?
Add the id to your a tag like this
<a onclick="#" class="compose" data-id="<?php echo $fetch_row['id']?>"></a>
Then fetch the id and send it to your popup with Jquery:
id = $(this).attr("data-id");
Now use this id wherever you want.
jQuery reveal plugin has many callback functions in which opened callback function that triggers 'after' the modal is opened. See docs at foundation.zurb.com
echo "<a onclick='#' class='compose' id='".$fetch_row['id']."'></a>";
$(function(){
$('.compose').click(function() {
var id = $(this).attr('id'); //getting id from clicked anchor tag
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissmodalclass: 'close',//missing comma (,) added
opened: function(id) {
$("#popup_bestanden_edit_name").append("<input type='hidden' name='myid' id='myid' value='"+id+"'>");
}
});
return false;
});
});
Your id will set in myid element in popup get this from here.
add id to the anchor tag only i.e
<a id = '2' class='compose' ></a>
then you can get it like jQuery('.compose').attr('id');
now everything is working i have one more question.
This is the code i use now:
echo "<a onclick='#' class='compose' id='".$fetch_row['id']."'></a>";
$(function(){
$('.compose').click(function() {
var id = $(this).attr('id'); //getting id from clicked anchor tag
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissmodalclass: 'close',//missing comma (,) added
opened: function(id) {
$("#popup_bestanden_edit_name").append("<input type='hidden' name='myid' id='myid' value='"+id+"'>");
}
});
return false;
});
});
But when the link is clicked while people are on the bottom of the page, the popup will open on the top of the page.
But people need to scroll back to the top to see this.
How can i automatically send the user back to the top where the popup is being showed?
I am using the Lightbox_me plugin to create a photo gallery from scratch. Right now the way my images are populated on the screen is by using:
<?php
require 'DB.php';
try{
$stmt ='SELECT * FROM victoria';
foreach ($conn->query($stmt) as $row)
{
echo ('<div class="photo"> <a href="images/photoGallery/' . $row['name'] .'">
<img src="images/photoGallery/thumbnails/' . $row['name'] . '" /> </div> </a>');
}
} catch (PDOException $e){
echo 'Connection failed: ' . $e->getMessage();
}
?>
Each photo is stored inside a div class named photo right now I have 39 photos. Lightbox me works by calling:
$('#try-1').click(function(e) {
$('#sign_up').lightbox_me({
centered: true,
onLoad: function() {
$('#sign_up').find('input:first').focus()
}
});
e.preventDefault();
});
If I wanted to invoke Lightbox_me by clicking on a photo thumbnail and opening the larger high resolution inside the lightbox how would I do this?
You have following (not properly nestede)
echo ('<div class="photo"> <a href="images/photoGallery/' . $row['name'] .'">
<img src="images/photoGallery/thumbnails/' . $row['name'] . '" /> </div> </a>');
First of all, make changes here, make it look like this
echo '<div class="photo"><a href="images/photoGallery/' . $row['name'] .'">
<img src="images/photoGallery/thumbnails/' . $row['name'] . '" /></a></div>';
Now, register click event on .photo a, like
$('div.photo a').on('click', function(e){
e.preventDefault();
var img = $('<img/>', {'src':$(this).attr('href')}),
div = $('<div/>', {'id':'lightBoxWrapper', 'style':'display:none;'});
$('body div#lightBoxWrapper').remove();
$('body').append(div.append(img));
$('#lightBoxWrapper').lightbox_me({centered: true})
});