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)
Related
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
Been having trouble displaying an avatar for my website. I store all of them in a custom folder called images, where either I or the users create them. The avatar shows only if youre the exact id the avatar is named after. Example:
I have a user who's id is 1, I also have an image with a name 1.png, so this PHP code block gets the link where the images are stored at, fetches the users id and then searches the page for that image that is name after the id.
Here's the code block I've been having issues with:
<img id='avatar'
class='Avatar'
src='https:/mysitelink.com/images/' + <?php echo"" . $fetchuser->id . ""; ?>.png?r=<?php echo "$RefreshRate"; ?>'
height='350'
width='350'
onerror="this.src='mysitelink.com/images/default.png'" />
The mysitelink.com is inserted by me to hide the link of the website.
Try like below :
<img id='avatar'
class='Avatar'
src='https://mysitelink.com/images/<?php echo $fetchuser->id.'.png'; ?>?r=<?php echo "$RefreshRate"; ?>'
height='350'
width='350'
onerror="this.src='mysitelink.com/images/default.png'" />
instead of src='https:/mysitelink.com/images/' + <?php echo . $fetchuser->id . ""; ?>.png?r=<?php echo "$RefreshRate"; ?>'
try
echo "src='https:/mysitelink.com/images/" . $fetchuser->id . ".png?r=" .$RefreshRate ."'>";
I made a simple image gallery, I'm adding a password protected upload. With some help I'm using this php (thanks to sulthan-allaudeen). Attached the code I'm using.
The problem is that I can't find a way to have on the left side the thumbnails of all the images in the folder, but with this code I have the full-width images only. any idea?
thanks
<body>
<div id="containerfoto">
<div id="gallery">
<div id="minipics">
<?php
$dir = 'Images/photo/';
$files = scandir($dir);
$i = 1;
foreach ($files as $key)
{
if ($i>3)
{
$j = $i-3;
echo "<a href='Images/photo/".$key."'><img src ='Images/photo/".$key."'>".$key."</a>";
}
$i++;
}
?>
<div style="clear:left"> </div>
</div>
<div id="zoom">
<img src="Images/foto/foto7.jpg" id="bigimage" alt="">
<h3 id="titolo">Click to enlarge images.</h3>
</div>
</div>
</div>
<script>
window.onload=function(){
if(!document.getElementById || !document.getElementsByTagName) return;
links=document.getElementById("minipics").getElementsByTagName("a");
for(i=0;i<links.length;i++)
links[i].onclick=function(){Show(this);return(false)}
}
function Show(obj){
bigimg=document.getElementById("bigimage");
bigimg.src=obj.getAttribute("href");
smallimg=obj.getElementsByTagName("img")[0];
t=document.getElementById("titolo");
t.removeChild(t.lastChild);
t.appendChild(document.createTextNode(smallimg.title));
}
</script>
</body>
Scandir() put's the file names within your directory into an array. Therefore, we can print each image using a for loop. I've given you an example below:
<?php
$dir = 'Images/photo/';
$files = scandir($dir);
for($number = 0; $number <= count($files); $number++) { ?>
<div class="thumbnail">
<img src="<?php echo $dir; echo $files{$number} ?>">
</div>
<?php } ?>
Now you just need to apply some css to the .thumbnail class and it should do the trick. For starters, you just need to apply some width and height to .thumbnail img, let me know if you need help with that too.
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
I am having trouble with the lightbox2 plugin.
I have an image who has class on it, and I want that the class will also be added when the image opened in lightbox.
is it possible?
<a href="fileUpload/uploads/<?php echo $picture['gallery_src']; ?>" data-lightbox=<?php echo '"image-'.$picture['gallery_id'].'"' ?>>
<img src=<?php echo '"fileUpload/uploads/'.$picture['gallery_src'].'"';?> id="filter-target" style="width:600px;">
</a>
Here's a cleaned up version of your PHP. Remember to remove your duplicate IDs
echo '<a href="fileUpload/uploads/'.$picture['gallery_src'].'" data-lightbox="image-'.$picture['gallery_id'].'">';
echo '<img src="fileUpload/uploads/'.$picture['gallery_src'].'" id="filter-target" style="width:600px;">';
echo '</a>';
You can add classes and data attributes to the image being viewed by running the following code:
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(e) {
$('#lightbox .lb-image')
.addClass('filter-blur')
.data('pb-blur-amount', 5);
});
Here's a demo