I want to change the image source on select a new image so that i can apply my java-script on all images.. Code working properly on 1st image but not updating the source for others.
Help me.
HTML
<div>
<? php $pro_detail ->pic_continer_disp(); ?>
var zoomConfig = {cursor: 'crosshair', zoomType: "inner",zoomWindowFadeIn: 500,zoomWindowFadeOut: 750 };
var zoomImage = $('#zoom');
var image = $('#zoom1');
zoomImage.elevateZoom(zoomConfig);//initialise zoom
image.on('click', function(){
// Remove old instance od EZ
$('.zoomContainer').remove();
zoomImage.removeData('elevateZoom');
// Update source for images
zoomImage.attr('src', $(this).data('image'));
zoomImage.data('zoom-image', $(this).data('zoom-image'));
// Reinitialize EZ
zoomImage.elevateZoom(zoomConfig);
});
</script>
</div>
PHP
pic_continer_disp() {
if($product_image1 != ''){
echo "<a href='' target='_blank'><img src='admin_area/product_images/product_pics/$product_image1' class='enlarge' width='400' height='265' alt=' ' id='zoom' data-image='admin_area/product_images/product_pics/$product_image1' data-zoom-image='admin_area/product_images/product_pics/$product_image1' /></a>";
}
if($product_image2 != ''){
echo "<div id='gallery'><a href='' id='zoom1' target='_blank'><img src='admin_area/product_images/product_pics/$product_image2' class='enlarge' width='400' height='265' alt=' ' data-image='admin_area/product_images/product_pics/$product_image2' data-zoom-image='admin_area/product_images/product_pics/$product_image2' /></a></div>";
}
}
if ($product_image2 != '') {
echo "<a href='' target='_blank'>
<img src='admin_area/product_images/product_pics/$product_image2' class='enlarge' width='400' height='265' alt=' ' id='zoom1' data-zoom-image='admin_area/product_images/product_pics/$product_image2' />
</a>";
}
}
Related
I have a website backend that lets you upload images to my site, like an alternative to FTP, I want to use this as a backend to my image portfolio, what I want, is once these images upload, it adds this image to my HTML, by adding new DOM elements being new to PHP though, I currently do not know how to do this.
here is my php (modified from W3Schools)
[upload.php]
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo " " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 9000000) {
echo "Sorry, your file is too large. (10mb limit)";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
and the HTML I want to append to:
[index.html]
<body>
<div class="parent">
<!-- image preview, onlick go to lightbox -->
<a href="#img1" class="">
<img src="image1.png" class="">
</a>
<!-- image lightbox -->
<a href="#" class="lightbox" id="img1">
<span style="background-image: url('1.png')"></span>
</a>
</div>
</body>
I want the PHP to add to my container, with the same exact structure as both the #img1 DOM elements, so that it creates a new lightbox, also meanting that it should have a new #img tag, that will add from the last, for example, say the newest is #img6, when uploading to my PHP, the PHP will add a #img7 element etc etc. and the new elements should be in my parent div.
It should also replace the src and background-image from 1.png to whatever the image I have just uploading is.
The result I want from from uploading an image with this new code should look like this
<body>
<div class="parent">
<!-- image preview, onlick go to lightbox -->
<a href="#img1" class="">
<img src="image1.png" class="">
</a>
<!-- image lightbox -->
<a href="#" class="lightbox" id="img1">
<span style="background-image: url('1.png')"></span>
</a>
<!-- image preview, onlick go to lightbox -->
<a href="#img2" class="">
<img src="uploadedthruphp.png" class="">
</a>
<!-- image lightbox -->
<a href="#" class="lightbox" id="img2">
<span style="background-image: url('uploadedthruphp.png')"></span>
</a>
You should use ul instead of div and append li elements with every uploaded image in your HTML code. Insert javascript snippets in the PHP part where the image upload is successful. You can echo the PHP variable $target_file there:
index.html
<body>
<ul id="parent">
<!-- image preview, onlick go to lightbox -->
<li>
<a href="#img1" class="">
<img src="image1.png" class="">
</a>
<!-- image lightbox -->
<a href="#" class="lightbox" id="img1">
<span style="background-image: url('1.png')"></span>
</a>
</li>
</ul>
</body>
upload.php:
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
...
.....
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var links=document.getElementsByTagName('a');
var hrefs = [];
var target_file = '<?php echo $target_file; ?>';
for (var i = 0; i<links.length; i++)
{
const myArray = links[i].href.split("#");
str = myArray[1].replace("img", "");
hrefs.push(str);
}
hrefs.sort();
var last = parseInt(hrefs[hrefs.length - 1]);
var next = last + 1;
var nextLink = "#img"+next;
var nextID = "img"+next;
var html = '';
html += '<li>';
html += '<img src="'+target_file+'" class="">';
html += '<span style="background-image: url('+target_file+')"></span>';
html += '</li>';
$("#parent").append(html);
</script>
<?php
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
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.
I am using Lightgallery and everything works, except when I echo an <h1> tag inside a foreach loop. When I remove it, the gallery works fine.
The only issue when I add the <h1> tag is that the images are not being loaded. I just see the preloader loading forever. What could be causing this?
My code:
<div id="lightgallery" style="border-top: 2px solid rgb(230, 230, 230);">
<?
$dir = $_SERVER['DOCUMENT_ROOT'].'/images/PROJECTEN/';
$folders = array_diff(scandir($dir), array('index.html', '.', '..'));
function scan_dir($dir) {
$ignored = array('.', '..', '.svn', '.htaccess','index.html');
$files = array();
foreach (scandir($dir) as $file) {
if (in_array($file, $ignored)) continue;
$files[$file] = filemtime($dir . '/' . $file);
}
arsort($files);
$files = array_keys($files);
return ($files) ? $files : false;
}
foreach($folders as $gallerypart){
$nounderscore = str_replace('_', ' ', $gallerypart);
$gallery .= '<h1>'.$nounderscore.'</h1>';
foreach(scan_dir($_SERVER['DOCUMENT_ROOT'].'/images/PROJECTEN/'.$gallerypart.'/') as $entry) {
$gallery .= '
<a href="http://www.website.nl/images/PROJECTEN/'.$gallerypart.'/'.$entry.'">
<img class="galleryimg" src="http://www.website.nl/images/PROJECTEN/'.$gallerypart.'/'.$entry.'" />
</a>';
}
}
echo $gallery;
?>
</div>
This is the part that breaks it:
$gallery .= '<h1>'.$nounderscore.'</h1>';
I fixed it by instead of using the standard markup, I used a selector.
Like this:
<script type="text/javascript">
$(document).ready(function() {
$('#selector1').lightGallery({
selector: '.item'
});
});
</script>
And then inside the loop I added the following code:
$gallery .= '
<div class="item" data-src="http://www.website.nl/images/PROJECTEN/'.$gallerypart.'/'.$entry.'">
<img class="galleryimg" src="http://www.website.nl/images/PROJECTEN/'.$gallerypart.'/'.$entry.'" />
</div>';
I am here to ask You the best way of creating a 'generator'.
What have i done so far:
Php file with retrieving posted data,
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->
<!-- fotorama.css & fotorama.js. -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.2/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script>
fotoramaDefaults = {
width: 700,
maxwidth: '100%',
ratio: 16/9,
allowfullscreen: true,
nav: 'thumbs'
}
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.2/fotorama.js"></script> <!-- 16 KB -->
</head>
<body>
<?php
switch($_POST['amountofimages']){
case '1':
echo '<div class="fotorama" data-nav="thumbs" data-autoplay="1700">';
echo '<img src="' . $_POST['hrefimg1'] . '">';
echo '</div>';
break;
case '2':
echo '<div class="fotorama" data-nav="thumbs" data-autoplay="1700">';
echo '<img src="' . $_POST['hrefimg1'] . '">';
echo '<img src="' . $_POST['hrefimg2'] . '">';
echo '</div>';
break;
case '3':
echo '<div class="fotorama" data-nav="thumbs" data-autoplay="1700">';
echo '<img src="' . $_POST['hrefimg1'] . '">';
echo '<img src="' . $_POST['hrefimg2'] . '">';
echo '<img src="' . $_POST['hrefimg3'] . '">';
echo '</div>';
break;
default:
echo "Could not load images";
}
?>
</body>
</html>
After sumbiting post.html with field required to generate html from php above.
Everything goes fine but I need to be able view actual generated source after submition. Not real page view.
I have tried inserting this javascript code:
<a class="button" onClick='window.location="view-source:" + window.location.href'>View Source</a>
But it shows me complete source of page including viewsource code.
How can i hide the last part of it?
Or even better do it on one page as http://jsfiddle.net/ do.
But only with
Fields to fill, checkboxes i can do it and post to same page so it will show it fine but i have problem with showing actual source of generated page into same page into another DIV.
Any suggestions?
Thanks a lot.
Since your using jQuery you can take advantage of .text() to escape html for you.
var $pre = $('<pre/>');
var bodyHTML = $('body').html();
$pre.text(bodyHTML);
$('body').append($pre);
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