Sorry in advance if it's a stupid question, but I'm a complete newbie and this is the first bit of PHP I've ever looked at in my life.
I've taken the code from this web post about Creating an image gallery from a folder of images automatically and it creates a gallery of thumbnails which, when clicked, open a larger image as a separate page.
What I would like is for the thumbnails to open the larger image inside a 'div' on the same page.
I've managed to achieve this by using 'iframe', but I'm aware that's a solution which is frowned upon:
<iframe id="r5-6c2-4" name="bigimg" src="" width="625px" height="410px" frameBorder="0">
</iframe>
<div id="r5-6c1">
<div id="thumbscontainer">
<ul>
<?php
$images = glob('g-images/*.jpg');
$ignore = array('cgi-bin', '.', '..','._');
foreach($images as $curimg){
if(!in_array($curimg, $ignore)) {
echo "<li><a href='".$dirname.$curimg."' target='bigimg'><img src='thumby.php?src=".$dirname.$curimg."&h=193&zc=0' alt='' /></a></li>\n ";
}
}
?>
</ul>
</div>
</div>
Help please! :-)
I'm a newbie too but I'd try this,
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$('body').append('<div><img id="moo" src=""></div>');
$("a[target='bigimg']").on('click',function(a){
a.preventDefault();
$('img#moo').attr('src',$(this).attr('href'));
});
});
</script>
Related
I have a WP site and I am trying to achieve the following. I need on 3 different pages a separate image in the footer.
I did find an answer how to do it the following way placing this code in the footer:
<?php
if(is_page(4)):
?>
<div class="images"><img src="url-image-location" alt="alt info" class="img-responsive"></div>
<?php endif; ?>
The above way works great but i'm lost on how to add it for the another page. I tried just repeating the above code again and changing the page and image url but then I lose styling from the rest of footer.
So question is, how do I add it a second time?
Thanks
What about using elseif and just change the image path variable so you won't loose styling? i assume your css is written for class.
<?php
$image_path = "imagepath";
if (is_page(4)) {
$image_path = "imagepath-4";
}
else if (is_page(5)) {
$image_path = "imagepath-5";
}
else if (is_page(6)) {
$image_path = "imagepath-6";
}
?>
<div class="images"><img src="<?php echo $image_path?>" alt="alt info" class="img-responsive"></div>
I use fancybox in combination with a small self made cms.
The users can upload a movie onto the server with a titel and some info and a thumb. and the script below prints all the thumbs on a page. and all the video's in display none divs which get showed whenever the right thumb is clicked like this:
<?php
$query = "SELECT * FROM movies";
if ($result = $mysqli->query($query)) {
/* fetch associative array */
while ($row = $result->fetch_assoc()) {
//prints out all the thumbs on the main page:
echo ' <a class="various" href="#inline'.$row['id'].'" title="'.$row['info'].'">
<div data-content="'.$row['titel'].'" data-html="true" class="image">
<img src="thumbs/'.$row['thumb'].'" alt="" />
</div>
</a>';
//generates all the video's. whenver the link with inline 1 is clicked above. the video with inline 1 will show up
echo '<div style="display: none;">
<div id="inline'.$row['id'].'">
<video width="720" height="480" controls>
<source src="movies/'.$row['movie'].'" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>';
}}
?>
This all works fine when I have 4 video's a page. But as soon as I display 12 video's on each page the buffering is going really slow. so the first few video will load fine. but when you try to watch the lets say 8th video you have to wait a long time because it is buffering the seven before the 8th first.
So my question is. is there anyway to only start loading the video that gets clicked?
my fancybox js:
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
hope anyone can help me out!
NOTE: A way to prevent the video's fromn loading directly would be to give the video element:
preload="none"
But I prefer the video's to be auto played whenver they opened so that is not really an option.
I have a application here: application
In the demo I am using a basic jquery slider which page is here: page info
Now the issue I am having is that it displays the images in question 1, but not in question 2. Now before I included the slider, it displayed the images in all questions. But since I included the slider, then it only displays images in first question only. How can I get images to be displayed in all questions?
CODE:
<form action='results.php' method='post' id='exam'>
<?php
foreach ($arrQuestionId as $key=>$question) {
?>
<div class='lt-container'>
<p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " . htmlspecialchars($arrQuestionContent[$key]); ?></p>
<?php
//start:procedure image
$img_result = '';
if(empty($arrImageFile[$key])){
$img_result = ' ';
}else{
?>
<div id="banner-slide">
<ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
animtype : 'slide',
height : 200,
width : 200,
responsive : true,
randomstart : true
});
});
</script>
<?php
}
//end:procedure image
?>
</div>
<?php
}
?>
</form>
You have two divs on the page with the same ID. #1 that is a no no and bad HTML. You will need to initiate your slider on each div independently.
$('#banner-slide1').bjqs({ //ETC
$('#banner-slide2').bjqs({ //ETC
Is that enough to understand where you went wrong and why it's not working. JQuery doesn't know which banner-slide to use, or it's actually only using the first one, because it knows there should only be one ID per page.
I don't know how your slider plugin works, but you may be able to change the ids to classes in the divs, and then start the slider with:
$('.banner-slide').bjqs({ //ETC
OR
$('.banner-slide').each(function(){
$(this).bjqs({ //ETC
It depends on how the plugin works.
Element ID should be unique to a single element. You are not allowed to give two elements the same ID. Try changing the IDs to banner-slide1 and banner-slide2.
I am creating a website that has an image gallery.
You have a side menu with the different categories, a hidden div that appears when you click on a category, filled with thumbnails, and when you click on any of the thumbnails it hides the thumbnails div and shows the image gallery in its place.
An example of what I am trying to do is here : http://www.matitacorp.com/web/portfolio.php
What I would like to do is when the thumbnail div hides and the image gallery appears I would also like the image that corresponds to the thumbnail clicked to appear, even if it is 3 or 4 pictures lower in the scrollable thumbnail gallery.
I've tried using .scrolltop() and setting the value but I think that I am missing something. My div's appear properly but I am not getting the scrolltop value to work or I am using the complete wrong function. Hopefully someone can help out.
Here is a piece of the code that I am trying to use:
//thumbnail section
<div id="booth">
<img src="thumb1" alt="" />
<img src="thumb2" alt="" />
<img src="thumb3" alt="" />
</div>
//main image section
<div id="identityOverlay" style="background-image:url(images/bkgrnd_700.gif); height:720px; display:none;">
<div id="imageGallery style="padding-left:95px; padding-top:10px; padding-bottom:15px; overflow:auto; height:610px;">
<img src="mainImg1" /><br />
<img src="mainImg2" /><br />
<img src="mainImg3" /><br />
</div>
</div>
<script>
$("#identityoverlay").click(function () {
$("#identityOverlay").show();
$("#booth").hide();
});
$("#identityoverlayA").click(function () {
var myCont = document.getElementById ("imageGallery");
myCont.scrollTop(100);
$("#identityOverlay").show();
$("#booth").hide();
});
</script>
Thanks!
Well you have couple problems with your code.
First of all you should prevent default action on click and secondly you should hide/show divs first and then scroll to wanted position.
Here is the modified code:
$("#identityoverlayA").click(function (e) {
e.preventDefault;
$("#booth").hide();
$("#identityOverlay").show();
var myCont = document.getElementById ("imageGallery");
myCont.scrollTop(100);
});
I had a PHP file that properly generates an image that I need. In my main page, there is a link named "View Image". So I put an < a href > tag in the "View Image" so that when it is clicked the image will load. However, when "View Image" was clicked, the whole page will load the image, which is not what I wanted. How will I code it in such a way that it will be just a part my page (e.g. just a small image within the site, not the whole webpage)?
Thanks!
Use an <img> tag to embed the image inside of the page.
<img src="path/to/img.png">
Instead of linking to it.
Try this
//HTML
Show Image
<div id="pre" >
<img src="img.jpg" />
</div>
//Javascript
<script type="text/javascript" >
document.getElementById("pre").style.display="none";
function disp()
{
if(document.getElementById("pre").style.display="none")
{
document.getElementById("pre").style.display="";
}
else
{
document.getElementById("pre").style.display="none";
}
return false;
}
</script>