I have a page where in the top middle there is a large youtube player. Below it there are a bunch of youtube thumbnails which are clickable. Clicking them changes the player video to the thumbnail that was clicked. The youtube ID is passed thru the URL.
I wanted to change the shade of the thumbnail background so that the active ("clicked") thumbnail was shaded.
The following code generates the linked thumbnails:
while ($row = mysql_fetch_array($result)) {
$tubeID = $row['videoinfo'];
echo
'<div class="vid"><img src="http://img.youtube.com/vi/' . $tubeID . '/0.jpg" width="225" height="175"/></div>';
}
And the following code uses the clicked thumbnail to display the video:
<iframe id="player" width="640" height="385" src="http://www.youtube.com/embed/<?php echo $_GET['id'] ?>" frameborder="0"></iframe>
I know I need to compare the thumbnail URL to the current URL and if they match and set an ID to that thumbnail which can be assigned properties in CSS... though I'm not sure how to do so. Can someone help?
edit : this sorta explain what BZ suggested.
I kicked out some php to make the answer more concise. Don't forget to add it back.
<div class="vid">
<a href="videos.php?id=$tubeID" id="m+$tubeID" onclick="changeVid(this);return false;">
<img src="http://img.youtube.com/vi/01/0.jpg" width="225" height="175"/>
</a>
</div>
<script type="text/javascript>
function changeVid(obj) {
document.getElementById('player').src = "videos.php?id="+ substr(obj.id,1)
document.getElementById(obj.id).style.visibility='visible'; //or other style
document.getElementById(obj.id).setAttribute("class", newClass); //For Most Browsers
document.getElementById(obj.id).setAttribute("className", newClass); //For IE; harmless to other browsers.
}
</script>
of course, I'd be a lot easier with a JS framework... (ie jquery)
Basically, when you click a link, the function is called, when it's done, return false; disable the page loading (ignoring the href).
The function will change the iframe source and then will add some custom styling to the link you clicked to load the new video.
I've thrown a "m" in the link ID, because id can't start with numbers...
edit : my function changeVid lack some reset function to remove the old thumbnail active state (easy way to solve it : remove the active state from all thumbnail then put the active state on the clicked thumbnail.)
In each link you could put an onclick attribute to do some javascript that would do the highlighting.
Related
I have a image gallery with 15 pics, it shows the first image in normal size and the rest are thumbs on the bottom, when you click the thumbs it replaces the normal size image with that one, and if you click the normal sized image it shows on a lightbox style popup with the image description.
This gallery layout is called Galleria and its part of the SIG Pro joomla plugin:
http://demo.joomlaworks.net/simple-image-gallery-pro
The image descriptions for each image are shown on the popup, but I would like to remove this behavior and show the description below the normal sized image.
My question is regarding PHP, I'm very noob at this.
For what I figured out I can print all the thumbs descriptions with this:
<?php foreach($gallery as $count=>$photo): ?>
<p class="sigProGalleriaTargetTxt"><?php echo $photo->captionDescription; ?></p>
<?php endforeach; ?>
But what I want to print is only the description of the image that is selected.
I tried this:
<p class="sigProGalleriaTargetTxt"><?php echo $gallery[0]->captionDescription; ?></p>
But this only prints the first image description, because it has the value 0 (first image).
I see that I need to increment the value of $gallery according to the selected image.
How can I achieve this?
Here is the complete php file:
http://codepad.org/MlPbgPzl
Thank you,
What about using som javascript/dom to set the captions? its a bit of a hacky but, i would try to have an onClick Event which calls a function to apply the description.
in the thumbs sections something like:
<span class="sigProLinkWrapper">
<a onClick="setDesc('<?php echo $photo->captionDescription; ?>');" href="...
and for the description:
// leaving the <?php tag like this, so you get always the first description
// but adding an id tag
<p id='photoDescription' class="sigProGalleriaTargetTxt">$gallery[0]->captionDescription; ?></p>
and finally replacing it with some javascript (or jquery if youre using that)
function setDesc(photoDesc)
{
var descContainer = document.getElementById("photoDescription").innerHTML= photoDesc;
}
maybe it helps :)
I am using the Gallery Snippet on MODx Revolution 2.1.5.
I am calling out the basic Gallery Snippet along with the specified Album.
I am trying to link Fancybox (jQuery Lightbox) up to the Thumbnails and images.
This is what MODx Outputs on the Resource:
<div class="gal-item">
<a href="path/to/page/test.html?galItem=1&galAlbum=1&galTag=">
<img class="" src="/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=C&q=90&src=%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F1%2F4.jpg" alt="lorem-ipsum-2.jpg" />
</a>
</div>
I have selected the content correctly, When I click on the image wrapped in the link tag I get this message:
The requested content cannot be loaded.
Please try again later.
How can it not be loaded? It's loading the Thumbnail and it needs the original image to create the Thumbnail. How can it not find the image?
Note: I am using the default setup for this Add-on.
Thank you!
As AlexC has mentioned I reckon it's to do with your big image path. Have you tried going to that URL direct and seeing if the image loads. You could trying removing the fancybox code and then click on the thumb and see if the link works as normal. The image should load on it's own in the browser window.
I can be am lots of causes why id does like that.
I think what it can be, you try to load content before you have this guy, I mean use some Ajax and it loads after you apply the "fancybox"
you can try this :
remove the "fancybox" classname
and use this code :
$(".gal-item").live("click", function(){
var $href = $(this).find("a").attr("href");
var $href = $(this).attr("href");
$.fancybox({
href:$href
});
});
I'm trying to construct a table on the right of the page where I pull out all the videos from the server. I want the users to click a row in the table and it starts to play a video in flowplayer on the left of the page. The video url is something I pull out of the DB.
<?php
for($i=0;$i<$num_videos;$i++)
{
?>
<tr onclick="DoNav('<?php echo $result_videos[$i]["video_url"]; ?>');">
<td>
...
Here's the javascript:
function DoNav(theUrl)
{
flowplayer("player", "flowplayer/flowplayer-3.2.7.swf", document.location.href = theUrl);
}
For whatever reason I can't seem to get flowplayer to work with this div:
<div id="player"><img src="recordings/landscape.jpg" width="320" height="240" /></div>
It will only prompt you to open or save the video instead of playing in the current window. If anyone knows this issue here that would be appreciated. At any rate, I know I can get flowplayer working with a href like so:
<a
href="url"
style="display:block;width:320px;height:240px;"
id="player"><img src="recordings/landscape.jpg" width="320" height="240" />
</a>
But I don't want to put the href in the table as I want that splash image included as well. Any ideas?
Edited to improve clarity.
When the function flowplayer("player", "flowplayer/flowplayer-3.2.7.swf", document.location.href = theUrl); Was called the document.location.href was being evluated and caused the browser to go to the theUrl which prompted for file to be downloaded.
Furthermore we found there is some sort of issue updating a with the as a child DOM object. This was solved by moving the image to the background of the using the inline CSS.
JS Code:
function DoNav(theUrl)
{
flowplayer("player", "flowplayer/flowplayer-3.2.7.swf", theUrl);
}
HTML table:
<div id="player" style="display:block;width:320px;height:240px;background-image:url(recordings/landscape.jpg)"></div>
PHP stayed the same.
I am trying to create a function where the user can click an image and a bigger one will load in a small popup window. I already have the bigger image in the system so it merely needs to load the image but in a window the right size!
Any ideas how I can achieve this?
Thanks.
You might want to look into using one of many js lightbox solutions
http://leandrovieira.com/projects/jquery/lightbox/ for example
Look into window.open. That will let you open a new window of a specified height and width, you just need to do something like:
window.open("<?php echo $url; ?>", "_blank",
"height=<?php echo $height;?> width=<?php echo $width; ?>")
You can get the image size in PHP with getimagesize
I created a responsive javascript only lightbox (no jquery needed) where you can pass links to the bigger image. So your thumbnail HTML should look like this, where your thumbnail-picture goes into the src attribute and the link to the bigger picture goes into the data-jslghtbx attribute:
<img class="jslghtbx-thmb" src="img/lightbox/thumbnail-picture.jpg" alt="" data-jslghtbx="img/big-picture.jpg">
You can also use the gallery function via the data-jslghtbx-group attribute to show multiple pictures, but be sure to hide all image elements (except the thumbnail which triggers the lightbox) via display: none;. Visit github for full documentation. Hope this helps!
Basically I have a slightly non-standard implementation of FancyBox. By default you have to include a link to the large version of the image so that the Lightbox can display it. However, in my implementation, the image link URLs point to a script rather than directly to the image file. So for example, instead of:
<a href="mysite/images/myimage.jpg" rel="gallery">
I have:
<a href="mysite/photos/view/abc123" rel="gallery">
The above URL points to a function:
public function actionPhotos($view)
{
$photo=Photo::model()->find('name=:name', array(':name'=>$view));
if(!empty($photo))
{
$this->renderPartial('_photo', array('photo'=>$photo, true));
}
}
The "$this->renderPartial()" bit simply calls a layout file which includes a standard HTML tag to output.
Now when the user clicks on a thumbnail, the above function is called and the large image is displayed in the Lightbox.
Now if the user right clicks on the thumbnail and selects "open in new tab/window" then the image is displayed in the browser as per normal, i.e. just the image. I want to change this so that it displays the image within a layout.
In the above code I can include the following and put it in an IF statement:
$this->render('photos', array('photo'=>$photo));
This will call the layout file "photos" which contains the layout to display the image in.
I have a specific limitation for this - the image URL must remain the same, i.e. no additional GET variables in the URL. However if we can pass in a GET variable in the background then that is OK.
I will most likely need to change my function above so that it calls a different file for this functionality.
EDIT: To demonstrate exactly what I am trying to do, check out the following:
http://www.starnow.co.uk/KimberleyMarren
Go to the photos tab and hover over a thumbnail - note the URL. Click the thumbnail and it will open up in the Lightbox. Next right click on that same thumbnail and select "open in new tab/new window". You will notice that the image is now displayed in a layout. So that same URL is used for displaying the image in the Lightbox and on its own page.
The way StarNow have done this is using some crazy long JavaScript functionality, which I'm not too keen on replicating.
The html link should point to the layout showing the image on a new page by default, e.g.:
<a href="mysite/images/show/123" rel="gallery">
Before the lightbox opens, append a query string to the url in order to distinguish it from the normal link and load the layout for the lightbox. As soon as the image is loaded in the lightbox, change the link back to its original state.
$("a[rel=gallery]").fancybox({
'onStart': function (selectedArray, selectedIndex, selectedOpts) {
var el = $(selectedArray[selectedIndex]);
el.attr('href', el.attr('href') + '?mode=lightbox');
},
'onComplete': function (currentArray, currentIndex, currentOpts) {
var el = $(currentArray[currentIndex]);
el.attr('href', el.attr('href').split("?")[0]);
}
});
You will then have to process the following link in order to return the lightbox layout:
<a href="mysite/images/show/123?mode=lightbox" rel="gallery">
You should be able to modify the JavaScript function that generates the HTML with the <img /> tag to link the image to such a page. Although, if you are trying to make it so that selecting "Open image in new tab" opens a page like this, then that might be impossible (unless there is some sort of crazy cookie/session implementation to alternate between the image script just passing an image and generating a page, which I think could be possible). To assign a new href for the link to have when you click "Open link in new tab" should be quite possible by just modifying the JavaScript function.
Could you clarify what exactly you are attempting to do? Open link in new tab or open image in new tab?
Edit: It appears that the FancyBox script is changing the href of your link to point directly to the image. You would need to find where in the script it is selecting each link tag with rel="gallery" and replacing the href to point to the images; you will want it to not change the href if you want it left as "mysite/photos/view/abc123", for example.
If you need the same functionality the demo site you posted is using, then this is easy to achieve, but keep in mind that the site is NOT using the same URL for both the pop-up and the standalone image page.
Click on any thumbnail with Firebug console is open, you'll notice that it's making an Ajax request to get the image from a different URL! which is an obvious behavior.
http://www.starnow.co.uk/profile/PhotosTrackView.aspx?photo_id=2129864
While the link is pointing to:
http://www.starnow.co.uk/KimberleyMarren/photos/2129864/
you see your links should point to the correct image page, in case of JS disabled browsing or right clicking (as you mentioned) AND using JS to override the link default behavior (which is redirecting you to the image page).
So for example you can have a method that will generate your image layout/page, and this should be used as href; and override the click event of the link to call a similar method (using ajax) but this time it'll retrieve the image itself to use it in your lightbox.