Button to reload the contents of a div which contains php - javascript

I have a div containing php that loads a random image from a directory. This bit works fine when i reload the page. The code:
<div id="imageArea">
<?php
$dir = 'images/assets/';
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
?>
<img src="images/assets/<?php echo $images[$i]; ?>" alt="<?php echo str_replace(array('.jpg', '.png', '.gif'), '', $images[$i]); ?>"/>
</div>
And further down the page i have another div that contains a button. I want it so that when people click this button it loads a new random image, i guess it would reload the div, but i don't want it to reload the page, is that possible? The button:
<div id="newPic">
<input type="button" value="Reload" id="Reload"/>
</div>
I have tried:
<script>
$(document).ready(function(){
$("#Reload").click(function(){
$("#imageArea").html("result reloaded successfully");
});
});
</script>
and:
$(document).ready(function(){
$("#Reload").click(function(){
$("#imageArea").html(ajax_load).load(loadUrl);
});
});
I am new to php and javascript and so i have been following other peoples instructions.
Thank you

split your php script to another file (just echo the img tag), and then use ajax to call that page.
$("#reload").click(function(){
$.ajax({
url:"demo.php",success:function(ajax_load){
$("#imageArea").html(ajax_load)
}});
});
php file
<?php
$dir = 'images/assets/';
$images = scandir($dir);
$i = rand(2, sizeof($images)-1);
?>
<img src="images/assets/<?php echo $images[$i]; ?>" alt="<?php echo str_replace(array('.jpg', '.png', '.gif'), '', $images[$i]); ?>"/>

have you tried to use ajax to update the div with the image?
here's the code
$(document).ready(function(){
$('#clickme').click(function(){
var number = 1 + Math.floor(Math.random() * 10);
$('#contentimg').attr('src','0'+number+'.jpg');
});
});
this would work given that the images are in the same folder else give the src of image accordingly

Related

How to lazy load videos with jquery or javascript

So I am trying to the load a embed video after a image(Splash-Imag) is clicked. The Delay should be 1.5 Seconds
<div id="mv-info">
<div id="content-embed" style="<?php $splash = info_movie_get_meta('fondo_player'); if(empty($splash)) { echo 'display:block;';}?>">
<div class="mplay">
<?php if (get_sub_field('type_player') == "p_iframe") {?>
<?php if($dato = get_sub_field('embed_player')) { ?>
<iframe src="<?php echo $dato; ?>" frameborder="0" allowfullscreen></iframe>
<?php }?>
</div>
Here $dato is the embed URL, Once I click the splash-image(class) in div class mvi-info the splash image goes and video pops out. But what i want to do is delay the video for 1.5 seconds or less so that it doesn't hinder my page speed.
I used this code but it doesn't seem to work
<script type="application/javascript">
$('.mvi-cover').click(function(){
var iframe = $('.mplay iframe').each(function(item){
var src= $(this).data('src');
$(this).attr("src",src);
});
$( ".splash-image" ).fadeOut(function(){
$( ".splash-image" ).remove()
});
$('#content-embed').fadeIn();
})
</script>
If anyone can help me then I will be really grateful.
You could use some jQuery objects to load the iframes without appending them to DOM. And using a timeout, you could do this 1,5 second after the page has finished loading.
Then, on a click event, change the src attribute of the iframe next to the clicked splash image (not all). Since the browser already has loaded the content, it will be instantanous.
I am pretty sure you have many iframes like this because you use a PHP loop. DO NOT use id in that kind of loop that produces HTML. It ends up in multiple time the same id. Use classes instead.
Try that to load the iframes 1.5 sec after page load:
$(document).ready(function () {
let iframes = $(".mplay iframe");
setTimeout(function () {
iframes.each(function (index) {
console.log(`Looping through iframes... #${index+1}`)
// Create a temporary jQuery object just to load
let temp = $("<iframe>")[0];
temp.src = $(this).data("src");
// Make sure the content gets loaded
temp.on("load", ()=> console.log(`The content of Iframe #${index+1} is loaded... The url was ${$(this).data("src")}`) )
});
},1500);
});
And this to handle the click events on the splash images:
$(".mvi-cover").click(function () {
let src = $(this).data("src");
$(this).attr("src", src);
let embed = $(this).next(".content-embed");
$(this).fadeOut(function () {
$(this).remove();
embed.fadeIn();
});
});
I am not 100% sure of your rendered HTML structure... But you get the idea.
Try this:
<div id="mv-info">
<?php if($splash = info_movie_get_meta('fondo_player')) {?><a title="<?php the_title(); ?>" class="thumb mvi-cover splash-image" style="background-image: url(<?php echo $splash;?>)"></a><?php }?>
<?php }?>
<div id="content-embed" style="<?php $splash = info_movie_get_meta('fondo_player'); if(empty($splash)) { echo 'display:block;';}?>">
<div class="mplay">
<?php if (get_sub_field('type_player') == "p_iframe") {?>
<?php if($dato = get_sub_field('embed_player')) { ?>
<iframe data-src="<?php echo $dato; ?>" frameborder="0" allowfullscreen></iframe>
<?php }?>
</div>
<script type="application/javascript">
$('.mvi-cover').click(function(){
var iframe = $('.mplay iframe').each(function(item){
var src= $(this).data('src');
$(this).attr("src",src);
});
$( ".splash-image" ).fadeOut(function(){
$( ".splash-image" ).remove()
});
$('#content-embed').fadeIn();
})
</script>
This code works fine for delay for one source. But not able to get it right for multiple sources.
<div class="mplay">
<?php if (get_sub_field('type_player') == "p_iframe") {?>
<?php if($dato = get_sub_field('embed_player')) { ?>
<script>
window.setTimeout(function () {
var iframe = document.getElementById('myIframe');
iframe.setAttribute('src', '<?php echo $dato;?>');
}, 1500);
</script>
<iframe id="myIframe" src="" frameborder="0" allowfullscreen></iframe>
<?php }?>

only 1st img is display onclick of link for multiple modal

The images are fetched from the PHP PDO database from the directory "Images" where there are multiple images in it using SQL queries. When I try to click on the source link of the image and try to open the modal image, only the first image is been viewed by all other images too. I tried to change the ID names, but still it is showing the same first page. I have attached my code and the output below. Requesting anyone to help me in this and also the procedure to change the ID values.
if($data=$stmt->fetchAll(PDO::FETCH_ASSOC)) // to display all the images from the given condition
{
$link_id=0;
foreach($data as $row)
{
//$img=$row['images'];
$id=$row['id'];
$link_id=$link_id+1;
$query="SELECT images FROM pictures WHERE id=$id";
$stmt2=$conn->query($query);
$pictures=$stmt2->fetchAll(PDO::FETCH_ASSOC);
foreach($pictures as $rowimg)
{
$img=$rowimg['images'];
?>
<b><a id='<?php echo $link_id;?>' class='link_class' onclick='myfunc();'> <?php echo $img;?> </a></b>
<br><br>
<div id='modal_id' class='modal_class'>
<div class='modal_content_class'>
<img id='<?php echo $id;?>' class='img_class' src="images/<?php echo $img;?>" width='300' height='260'>
<span id='close_id' class='close_class' onclick="modal.style.display='none'">×</span>
</div>
</div>
<script>
var modal = document.getElementById("modal_id");
var closebtn =modal.getElementsByClassName("close_class");
function myfunc()
{
modal.style.display='block';
document.getElementById('<?php echo $id; ?>'). src="images/<?php echo $img;?>";
console.log(123);
};
</script>
}
}
}
Output
Output

How do I trigger this hover function each time a new image has focus?

How can I hide all the images in a recordset except the image with the mouse hover on?
Images are displayed from the database and I am trying to manipulate how the images respond when a user hovers on any particular image.
Based on what I have read here on stackoverflow I came up with the following that actually works but with one limitation
On page load it works fine but once you start moving from image to image nothing happens.
I want only the active or image with hover to show while hiding the rest.
$(document).ready(function() {
$('.teamDisplay').hover(function(){
var infoFont = $(".imageDiv")
var $imgLink = $(this).children(infoFont).attr("data-imgPath");
$('.memberPicBg').css('background-image', 'url(' + $imgLink + ')');
$('.teamDisplay').addClass('imageDivOff');
$(this).addClass('imageDivOn');
}, function(){
$('.memberPicBg').css('background-image', 'url(' + $imgLink + ')');
$('.teamDisplay').addClass('imageDivOn');
$(this).addClass('imageDivOff');
});
});
I am also using css to show or hide the images but the hover function appears to work just once on page load.
How do I trigger this hover function each time a new image has focus?
This is the website with the feature I hope to replicate
UPDATE
The html code
`<div class="memberPicBg">
<?php do { ?>
<span class="teamDisplay">
<?php
// Show If File Exists (region1)
if (tNG_fileExists("../images/team/", "{members.tmemberphoto}")) {
?>
<span class="imageDiv" data-imgPath="../images/team/<?php echo $row_members['tmemberphoto']; ?>">
<span class="teamMemberNameH"><?php echo $row_members['tmember']; ?></span>
<span class="teamMemberTitleH"><?php echo $row_members['tmemberposition']; ?></span><br /><br />
<img src="../images/team/<?php echo $row_members['tmemberphoto']; ?>" alt="<?php echo my_meta_description($row_members['tmember'],6); ?>" border="0" /> </span>
<?php
// else File Exists (region1)
} else { ?>
<span class="teamMemberNameH"><?php echo $row_members['tmember']; ?></span>
<span class="teamMemberTitleH"><?php echo $row_members['tmemberposition']; ?></span>
<?php }
// EndIf File Exists (region1)
?>
</span>
<?php } while ($row_members = mysql_fetch_assoc($members)); ?>
</div>`
NB: apologising if I am not clear enough.

Links not working in a Repeat Region in JQuery

I recently download this Slideshow with jmpress.js for a website. I'm using PHP and a database in MYSQL. I used a recordset in Dreamweaver to get the data from database to the site. Then I tried to create a Repeat Region to show the latests posts in the slider.
Headings, images and text are working fine. The problem is on the href (links), which are not changed and remain the same (the ID of the latest post) for all records.
In the head I have these files:
SlideshowJmpress/css/style.css
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
SlideshowJmpress/js/jmpress.min.js
SlideshowJmpress/js/jquery.jmslideshow.js
SlideshowJmpress/js/modernizr.custom.48780.js
Here is the HTML Code:
<section id="jms-slideshow" class="jms-slideshow">
<?php do { ?>
<div class="step" data-color="color-1">
<div class="jms-content">
<h3><?php echo $row_slider['packageTitle']; ?></h3>
<p><?php echo $row_slider['packageDescription']; ?></p>
<a class="jms-link" href="article.php?ID=<?php echo $row_slider['ID']; ?>">Read more</a>
</div>
<img src="<?php echo $row_slider['packageGraphic']; ?>" width="300px;" height="300px;" />
</div>
<?php } while ($row_slider = mysql_fetch_assoc($slider)); ?>
</section>
<script type="text/javascript">
$(function() {
$( '#jms-slideshow' ).jmslideshow({
});
});
</script>
Here is the php code for the recordset:
$maxRows_slider = 4;
$pageNum_slider = 0;
if (isset($_GET['pageNum_slider'])) {
$pageNum_slider = $_GET['pageNum_slider'];
}
$startRow_slider = $pageNum_slider * $maxRows_slider;
mysql_select_db($database_nipvlach, $nipvlach);
$query_slider = "SELECT * FROM pages ORDER BY `date` DESC";
$query_limit_slider = sprintf("%s LIMIT %d, %d", $query_slider, $startRow_slider, $maxRows_slider);
$slider = mysql_query($query_limit_slider, $nipvlach) or die(mysql_error());
$row_slider = mysql_fetch_assoc($slider);
if (isset($_GET['totalRows_slider'])) {
$totalRows_slider = $_GET['totalRows_slider'];
} else {
$all_slider = mysql_query($query_slider);
$totalRows_slider = mysql_num_rows($all_slider);
}
$totalPages_slider = ceil($totalRows_slider/$maxRows_slider)-0;
Error is either in IDs in your DB or in the slideshow script i think.
Look at source of your page. Are the links right ?
I think that the problem is in the script or in the jmpress.min.js
When I changed slider, everything worked fine!

Get cache with yii to image function

I have this javascript code:
function Thumbnail(url) {
$.each(url, function(key, value){
$('#thumb_'+key).load(function(){}).attr('src', "http://domain.com/="+encodeURIComponent(value));
});
}
Thumbnail({<?php echo $id ?>:'<?php echo $domain ?>'});
and i have this php code:
<img class="thumbnail" id="thumb_<?php echo $id ?>" src="" />
how can i save this image to be in folder by chach (CFileCache) (i dont need to change the image a lot so the image can be saved in cache for a long time)

Categories

Resources