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.
Related
I'm just wondering how social media website adds a link into there popups on there first image to load the next new image into the the same popup div.
I have the first image in my pop up and as you can see I tried using a different page to load in where all the functionality works.
<? if($user2_id==$_SESSION['id']){
$cover="SELECT coverphoto_id,coverphoto from coverphotos WHERE coverphoto_userid='$user1_id'";
$rescover=mysqli_query($mysqli,$cover) or die(mysqli_error($mysqli));
$rowcover=mysqli_fetch_assoc($rescover);
?>
<script>
function popup(){
$("#popUpDiv").load('include/covermedia.userimage.php?pid=<? echo $rowcover['coverphoto_id'] ?>');
$("#blanket").show();
$("#popUpDiv").show();
}
</script>
<div id="blanket" style="display:none"></div>
<div id="popUpDiv" style="display:none">
<a href="#" onClick="popup('popUpDiv')" >X</a>
</div>
<a href="#" onClick="popup('popUpDiv')" ><div id="usercover" >
<? echo "<img id=\"coverimage\" border=\"0\" src='coverimages/".$rowcover['coverphoto']."?".time()."' width=\"600px\" onerror='this.src=\"coverimages/nocover.png\"' alt='onerror='this.style.height='300px'>";
?>
Problem I'm facing is that the previous and next links in the loaded page don't load the next new data inside the popup div, they navigate to the page.
`include/covermedia.userimage.php?pid=".$photo_prev['coverphoto_id']."'`
Is there any simple way I could achieve this.. even by not having to load a page into the popup?
if you're changing page locations, which it sounds like you are, put an iframe where you have the div (or inside your div) and change the iframe src to your new URL:
$("#popUpIFrame").attr('src','include/covermedia.userimage.php?pid=<? echo $rowcover['coverphoto_id'] ?>');
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>
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>
I'm using custom meta data to display images as a post in wordpress. When I click the image on my main page it opens in colorbox and this is perfect.
WHAT IS HAPPENING : now, with the image loaded into the colorbox, when I click on the image it cycles through the images on my home page ( NOT what I would like ).
WHAT I WOULD LIKE TO HAPPEN : with the image loaded into the colorbox, when I click on it, it will act as a link and load the post ( associated with that image ) into the colorbox.
I'm not clear on how to do this. The code I'm using to display the image meta data for the posts is:
<?php
// check for spine image
$spine = get_post_meta($post->ID, 'spine image', $single = true);
// check for spine class
$spine_class = get_post_meta($post->ID, 'spine class', $single = true);
?>
<div style=" #position: center; #left: 50%; height: 650px; display: table-cell; vertical-align: middle;">
<div class="post" id="post-<?php the_ID(); ?>">
<div class="entry">
<?php
// If there is a spine image, display it as the post
if($spine !== '') { ?>
<p>
<a rel="bookmark" href="<?php echo $spine; ?>" title="<?php the_title_attribute(); ?>">
<img src="<?php echo $spine; ?>" class="<?php if($spine_class !== '') { echo $spine_class; } else { echo "left"; } ?>"
height="400" onMouseOver='resizeImg(this, 150)' onMouseOut='resizeImg(this)'
/>
</a>
</p>
<?php } // end if statement
// if there's not a spine image
else { echo ''; }
?>
</div>
</div>
</div>
And the function I'm using for colorbox is:
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='bookmark']").colorbox({transition:"fade"});
});
</script>
So that the links with the attributes of 'bookmark' will open in the color box. How now can I make it so that the image in the colorbox links to the associated web page ( or act as a link to any web page... one step at a time )?
I hope this makes sense and thank you for any help,
mlord
My question seems overly complicated once I realized how to do this.
The end result is that I used the ".inline" HTML structured example from the website ( http://colorpowered.com/colorbox/core/example4/index.html ). I can put the image from the wordpress loop href'd to the permalink and call it inline for each image / post to be displayed in the colorbox. Then I included the general colorbox class on that link which opens the post inside of the colorbox as well. Awesome!
Keep care,
Matthew