I have dynamic gallery generated from a php code, wich are represented by one picture only. When you select that picture, it should open a color box with multiples photos.
The problem is, my colorbox seem to not recognize my rel.
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a.gallery").click(function(){
var galleryRelative = $(this).attr("rel");
alert(galleryRelative);
$(this).colorbox({rel:galleryRelative});
});
});
</script>
And my HTML
foreach($kittens as $key => $kitten){
echo '<div class="block1 smallblock">';
echo '<a class="gallery" rel="gallery0" title="blablabla" href="../img/block-03.jpg">
<img src="../img/block-03.jpg" width="299" height="233" alt="kitten" />
</a>';
echo '<p></p>';
echo '<p></p>';
echo '</div>';
}
I will generate the gallery0 without problems (im reading with success the rel attribute from my a.gallery in my script, but colorbox won't match it.
Colorbox will use your rel attribute by default. Just use:
$("a.gallery").colorbox();
By setting your own click event you are reassigning colorbox to your elements each time an item is clicked, which would be inefficient.
You can better try with the Pretty Photo plugin for displaying the multiple photos in the light box by clicking the single image. I used the Pikachoose gallery when i click the image from PikaChoose I show the list of images inside the light box using the Pretty Photo Plugin demo for Pretty. Hope this may be useful for you
Related
I tried to make a function which would accept a number when called, and hide any loop generated elements on page with the ID of #sub + the number provided.
<script>
function toggleryhma($id) {
$("#sub"+$id).toggle();
$("#ryhmanum"+$id).toggle();
}
</script>
The element I'd need to click to call the function is...
<span class=ryhmaspan onclick="$(toggleryhma('<?php echo $ryhmanum;?>');">
For some reason this doesn't seem to do anything. I basically have lots of images with the ID's "#sub1", "#sub2", "#sub3", etc...
Same with the #ryhmanum. I want to use those ID's to only toggle the items under the span I'm clicking.
The problem is in your onclick. Your onclick should be like below.
onclick="toggleryhma('<?php echo $ryhmanum;?>')"
I have a list of data which is collected from the database.
I have added a Div with a "Read More" label and another div which holds the content and is hidden.
When the user clicks on the "read More" text the Content div with show up.
Here is my current code below:
<script>
$(document).ready(function(){
$(".readmore").click(function() {
$('.readmecontent').show();
});
});
</script>
//THE HTML .. Note: Content will be added via php but hardcoded now ...
echo '<div class="readmore">Read more...</div>';
echo '<div class="readmecontent" style="display:none;">Read Me Content Here</div>';
All the above works but the problem is that the "readmore" class currently opens all "readmecontent" classes.
I need it to just show the "readmecontent" DIV that applies to the "readmore" class that has been clicked.
I cannot use ID's because the listing is created dynamially.
How can I do this?
Use an instance of this to find the next element:
$(this).next('.readmecontent').show();
this solution doesn't need you to hold an instance
$(".readmore").click(function() {
$('.readmecontent:not(.readmecontent.visible)').eq(0).show().addClass('visible');
});
I am not ever sure this is possible but I know you guys will know the answer.
I wonder if it is possible to load the first div on a page into a different page.
Example:
This code is on "list.php"
<div class="message_details">
Some Content 1
</div>
<div class="message_details">
Some Content 2
</div>
I found this article and it works but it brings in all div's but I want to load only the first div.
Load content from external page into another page using Ajax/jQuery
Here is the code I have now that loads all divs
$(document).ready(function() {
$(".loader").load('list.php .message_details');
});
How can I load only the first div? Also is there any way to remove an img tag within the selected div?
Thanks everyone
Use the :first-child selector
$(".loader").load('list.php .message_details:first-child', function() {
$(this).find("img").remove();
});
Reference
simply echo the the div in the second page. Give each div an id, then echo that. (unless i am misunderstanding your goal)
On my site, I have an updates section, which groups updates (galleries) into their own div. Each div is loaded hidden. They choose a section, and it expands to show the new galleries.
That all works fine. However, it loads all the images on the page load, which causes the hour glass to linger longer than I like. Is there any way to make an image load after a div is made visible?
Edit:
Went with:
$(function() {
$('.collapse img').attr('src', function(index, src) {
return this.getAttribute('data-src');
});
});
collapse is the div name that has the images in it. How can this be changed to only change the images in that current div? All the collapsed divs have the same name. However, when expanded, I want it to load only the images in that one div. Right now it loads all the images in all the collapsed div once I expand one of them.
Your divs should not contain the images at startup. You can load the images via JavaScript if a user expands your div.
Example:
function expandDiv(idOfDivElement) {
divObj = document.getElementById(idOfDivElement);
var imageObj = document.createElement('img');
imageObj.setAttribute('src', 'path/example_image.jpg');
divObj.appendChild(imageObj);
// your expand div code here
}
You could advance this function and add a second parameter for the image url. Or a array / comma seperated string if you want to load multiple images.
The process of loading images is up to the browser. You should load that content with javascript, like ajax.
You can load the images( within expandable div ) from ajax...
Just make the div visible, and then call ajax to get the images. Then use .innerHtml() or if you use jQuery, use .html() to put the images in the expanded div.
In this case you have to build the html in ajax page. It will just add the html to the eexpanded div.
This way loads the page much faster.
Please give feedback.
I have an overlay popup box (DIV + JavaScript + some CSS) which is toggled by a link, like this:
<a href="#" onclick="popup('popUpDiv')">
The box that pops up contains an iframe. Now I want different links on my page to load different iframes when the box opens; so that link A would toggle the box to appear, and load iframe1.html inside the box, while link B would toggle the same box to appear, but load iframe2.html inside the box, and so forth.
I'm a beginning programmer, and I first figured maybe this could be done with PHP, by putting something like this inside the popUpDiv:
<iframe src="http://mysite.com/iframe<?php echo $_GET ["iframeid"] ?>.html">
... and then simply adding ?iframeid=x to each link's href, where x is the id of the iframe to be loaded.
This obviously won't work in practice though, because it requires a page reload, and when the link is clicked, the popUpDiv is toggled to open, but at the same instant, the page reloads, now with the ?iframeid=x query string in place, but too late, since the popUpDiv disappeared on reload.
Is there perhaps a JavaScript equivalent that could be used, or can anybody suggest another way to make this work?
FYI, this is the kind of popup box I'm working with:
http://www.pat-burt.com/csspopup.html
I finally found a really simple way of accomplishing this without additional JavaScripting, by simply using the target attribute:
<iframe name="myfavoriteiframe">
Then:
This is a link.
P.S. Just FYI for any of those out there who might want to use this feature with Vimeo's JavaScript API, as I'm doing: In order to make API buttons work with this target method, it seems like the iframe src-attribute cannot be left blank. You need to specify a link to any of your videos in the src, so that a video loads into the iframe on page load, like this:
<iframe name="myfavoriteiframe" id="player_1" src="http://player.vimeo.com/video/[the_number_of_your_video]?api=1&player_id=player_1">
I simply inserted the URL to the first video on my page, but you can use any of them, since they're hidden anyway.
Then link to any of your videos using the target method described above, and the pre-set iframe video will be replaced by a video of your choice.
Create two divs with the two variations of content (the two iframes with each specific URL). Then toggle by the name of the div.
<a href="#" onclick="popup('popUpDiv1')">
<a href="#" onclick="popup('popUpDiv2')">
Set the id attributes of the div elements appropriately.
Rather than adding something to the popup DIV element, I would add a required link to the href property of the link that you use to open the popup:
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
And then inside the popup function I would take the href parameter of the link that has triggered the event and use it in a popup:
function pre_popup(id) {
// Take the href parameter of the link
var href = this.href;
// And then use it in the iframe
window.frames["your_iframe"].src = href;
// And then pop it
popup(id);
}