How do I get justifiedGallery plugin to work with multiple galleries? - javascript

I am using this wonderful jquery plugin called justified gallery. Below is a simplified html syntax to use this plugin, followed by javascript syntax.
HTML
<div id="my-gallery">
<a href="path/to...............">
<img src="path/to/............1.jpg" />
</a>
<a href="path/to...............">
<img src="path/to/............2.jpg" />
</a>
.......
</div>
JAVASCRIPT
<script>jQuery("#my-gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});</script>
ISSUE - With the above code the plugin is working just fine BUT only for the first instance of the html syntax. Meaning, if I try <div id="my-gallery">......</div> twice or more on the same page, it only works on the first instance. Since there is going to be multiple galleries on a same page I need this to loop.
I can handle php well but yet to start learning javascript so unable to hack the javascript. If it was only php I would have generated different ids for each gallery with something like the code below.
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
$i = 0;
foreach($arr as $a){
echo '<div id="my-gallery-'.$i.'">'.$a. '</div><br>';
$i++;
}
The code above would have resulted to this in the view-source.
<div id="my-gallery-0">first_gallery</div><br>
<div id="my-gallery-1">second_gallery</div><br>
<div id="my-gallery-2">third_gallery</div><br>
So the question is, is my logic correct to solve this, if yes then (since my javascript is nill) how do I solve this in context of my javascript. Any response if appreciated. TIA.

You are not allowed to have multiple element with identical id's... so having two or more <div id="my-gallery"> is invalid HTML.
Instead give each one a class, and use that class name as the selector in your jQuery.
<div id="my-gallery1" class="my-gallery-class">
...
</div>
<div id="my-gallery2" class="my-gallery-class">
...
</div>
$(function(){
$(".my-gallery-class").each(function(){
$(this).justifiedGallery({
rowHeight : 120,
margins : 0
});
});
});

Use a class instead. An ID must be unique. Having multiple identical IDs is invalid HTML. Output as follows:
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
foreach($arr as $a){
echo '<div class="my-gallery">'.$a. '</div><br>';
}
And use Javascript then like this. (Note that a document ready event might be required!)
<script>
$(document).ready(function() {
$(".my-gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});
</script>
Using br in HTML for this purpose is discouraged. If your elements are block elements and are not floated or absolutely positioned, you won't need br. If you want some space between them you can set a margin is CSS (and remove br):
.my-gallery {margin: 24px auto;}
If you want to keep the unique ID on the gallery items (I don't know why, it seems pointless and needless markup to me, but anyway) you can do it like this:
$arr = array('first_gallery', 'second_gallery', 'third_gallery');
$i = 0;
foreach($arr as $a){
echo '<div class="my-gallery" id="my-gallery-'.$i.'">'.$a. '</div><br>';
$i++;
}

As others have suggested you can give each gallery a common class and use that in your JavaScript
eg:
<div class="gallery" id="my-gallery-0">first_gallery</div><br>
<div class="gallery" id="my-gallery-1">second_gallery</div><br>
<div class="gallery" id="my-gallery-2">third_gallery</div><br>
<script>
jQuery(".gallery").justifiedGallery({
rowHeight : 120,
margins : 0
});
</script>

Related

Reaload multiple DIVs in various times

I have a PHP+HTML+CSS app, this app has the main dashboard with multiple rows and columns in it (called widgets).
Widget is DIV and have set unique ID and some CSS classes. Like:
<div class="col-2 colstav" id="5">Test 5 velikost 2</div>
<div class="col-6 colstav" id="32">Test 32 velikost 6</div>
<div class="col-4 colstav" id="7">Test 7 velikost 4</div>
In PHP variable i have stored time (in miliseconds) for every ID after i need to reload file (content) of the DIV.
In PHP i have:
$column[5]["file"] = widget5.php;
$column[5]["refresh"] = 4000;
$column[32]["file"] = widget32.php;
$column[32]["refresh"] = 2000;
$column[7]["file"] = widget7.php;
$column[7]["refresh"] = 1000;
I cant find Javascript function for reloading DIVs content in time by PHP variables.
I found this ( http://jsfiddle.net/YVB9F/ ), but I'm failing to update this JS code :(.
Specification / Edit:
I need JS code like this:
<script>
var time_div_5 = 4000;
var time_div_32 = 2000;
var time_div_7 = 1000;
function content(content_file,div_id){
load(content_file) to target(div_id)
}
every(time_div_5){do: content("wg/widget5.php","5")}
every(time_div_32){do: content("wg/widget32.php","32")}
every(time_div_7){do: content("wg/widget7.php","7")}
</script>
I know how to add variables from PHP to script.
After some research ai have this script, but is not working:
<script>
function reload_div(file,iddiv){
$(iddiv).load(file);
}
setInterval(reload_div("widgets/widget1.php",1), 1000);
setInterval(reload_div("widgets/widget2.php",2), 4000);
</script>
<div id="1"></div>
<div id="2"></div>
Many thanks for any help.
As denmch mentioned in the comments you should make asynchronous request using AJAX. The way you are trying to achieve is not a good practice.
Also, I can see you are trying to load content from a file by jQuery.load() but your id selector seems wrong, reload_div("widgets/widget1.php",1) will try to find the elements matching selector $(1) and probably fail. Append # character to your iddiv parameter inside your reload_div function.
I will solve this by generating this code for every widget:
<script>setInterval(function() {$('#1').load('widgets/_blank.php');},5000)</script>
In PHP:
echo "<script>";
echo 'setInterval(function() {'."$('#".$tmp_idwidget."').load('".$temp_path."');},".$tmp_refresh.")";
echo "</script>";
And its works, but i think, not most effective and clean way :D.

Creating a dynamic variable in jQuery or PHP

I know there are already a few questions like mine but I wasn't able to fix my problem with their solutions.
I got this code in an external html file to include it in others files:
<div class="header">
<h1 class="replace-me">I'am a placeholder</h1>
</div>
The "file" above gets included into this "file":
<h2 style="display: none" class="variable">Hey, I'm a variable</h2>
The Variable from the second code should replace the content of the h1 tag in the first code. I know this isn't a forum to get free codes, I just want some inspirations or suggestions. Thanks Guys!
You can replace the html of one element with the html of another element, like so:
$(".replace-me").html($(".variable").html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<h1 class="replace-me">I'am a placeholder</h1>
</div>
<h2 style="display: none" class="variable">Hey, I'm a variable</h2>
However, as Rama Schneider pointed out, you might want to get your content in a different way than html.
Also note that this jQuery-solution is done client-side. If you already know the content when serving the initial HTML, you want to do this server-side.
If you have control over the external file, I'd suggest rewriting things so the external file serves a json object of some sort and work with your data from there.
Otherwise it's a simple matter of using JQuery to get the html contents from the variable and use that value to replace the html contents of the 'replace-me'.
You should solve this on server-side if you can. Make the common template a function, like this:
function getHeader($content) { ?>
<div class="header">
<h1 class="replace-me"><?php echo $content; ?></h1>
</div> <?php
}
calculate $content before you call the function and pass it to the function. If you cannot make this a function and you get this as it is from a third-party source, then you can do it via Javascript, like this:
<script type="text/javascript">
document.getElementsByClassName("header")[0].getElementsByClassName("replace-me")[0].innerHTML = "<?php echo $content; ?>";
</script>
Make sure you add this script after the header tag was loaded.

Image url in css based on html title value

I'm trying to generate multiple hexagons with background images, using a php for loop:
<?php
$dir = 'resources/images/logos';
$images = scandir($dir);
for($i = 2; $i < count($images); $i++) {
$title = explode('.', $images[$i])[0];
?>
<div class="hexagon_loc<?= $i ?>">
<div class="hexagon image" title="<?= $title ?>"></div>
</div>
<?php } ?>
This works fine, I make a div, with a different class name every time and with the correct title (based of on the filename of the image). Now I want to have a for loop in scss which draws the hexagons, I also want to define the background-images there. But since I can't pass any kind of variables from html/php to css/sass and the fact that the attr() function is widely unsupported I have no way of dynamically doing this, which would result in the titles possibly being mismatched with the images. Is there anyway to do this anyways? Or do I have to use a different approach entirely?
Example sass where I want to define the image:
.hexagon_loc {
$image: '../../resources/images/bill.jpeg';
#include hexagon($image);
margin-left: 100px;
}
Using vanilla JavaScript to solve this would also be a possibility
Thanks
In this situation, I would use <img> HTML element.
There is a CSS solution but it is not supported in many browsers.
div { background-image : attr(data-image); }

If div is empty, set the container div to "display:none"

I've been trying to get this code to work for the past day whilst searching through these forums but without any success.
I'm looking to hide a container div if one of the div's inside has no content.
The script I've got is below:
$('.video-centre').each(function(){
if ($(this).find('.video-thumb p').text().length == "")
$(this).find('.video-centre').css("display", "none");
});
The HTML that I'm trying to apply this to is below:
<div class="video-centre">
<div class="video-point">
<img src="<?php echo get_bloginfo('template_url') ?>/images/video-point.jpg" alt="video pointer" />
</div>
<div class="video-thumb">
<?php the_field('testimonials'); ?>
</div>
<p class="video-more">
View More
</p>
<div id="expandable-1">
<div class="video-thumb">
<?php the_field('testimonials_hidden'); ?>
</div>
<p class="video-close">
Close
</p>
</div>
</div>
Basically, within wordpress, the client will have the opportunity to add videos, it's a bit long winded but they get wrapped in p tags. However if they don't upload anything to a specific area, I would like the container div to have display:none, resulting in only containers being shown if videos have been uploaded.
If there's an easier way to look at the div and say if it's empty then get container div to display none I'd be happy to try that.
Use :empty pseudoclass
if ($(this).find('.video-thumb p').is(':empty'))
this checks if you have an empty paragraph (<p></p>), while
if ($(this).find('.video-thumb').is(':empty'))
checks an empty .video-thumb element
After your edit: if you have spaces inside div the condition return false so it's better to simple check
if ($(this).find('.video-thumb p').length === 0)
Example Fiddle : http://jsfiddle.net/6nyF8/6/
You could do it in several ways.
$('.video-centre').each(function(){
if($(this).find('div.video-thumb').html('') == '')
$(this).hide();
});
OR
$('.video-centre').each(function(){
if($(this).find('div.video-thumb').children().length == 0)
$(this).hide();
});
if ($(this).find('.video-thumb p').text() == "")
or
if ($(this).find('.video-thumb p').is(':empty'))
Hope I understand the Q, here's the fiddle I came up with. Nice and simple.
if ($('.video-centre').find('div:hidden').size() > 0) {
$('.video-centre').children().hide();
}
i would try remowing line feeds between html tags and
<div class="video-thumb">
<?php the_field('testimonials'); ?>
</div>
should be
<div class="video-thumb"><?php the_field('testimonials'); ?></div>
but you could also do the trick in PHP:
<?php if (the_field('testimonials')=="") $style=" style='display:none'";?>
<div class="video-thumb" <?php print $style;?>>
<?php the_field('testimonials'); ?>
</div>
You can also check string with striptags function so from your "testimonials" value remove tags using php in built function "striptags" so now only text will remain which can be compare easily.

Javascript & JQuery Troubles - Grabbing & Writing YouTube Data to Page

I would say I have a little experience with Javascript and JQuery, but in the time spent working on one of my newer sites, nothing is going my way. Basically, I use PHP to write a video ID to javascript code, which then executes to get a YouTube video's title, uploader, views, and length. Everything is working fine on my other site ('Latest Videos' sidebar on Mechabyte.com) but on my newer one, FirstPersonTheater.net, nothing works. I've included the JQuery library, but my scripts aren't writing the information to each post's div fields. I've rationalized that this could simply be an effect of using a barebones theme (I'm building my own, but want to get the kinks worked out as I build it), but since I have all the requirements (JQuery library in header + scripts) I think it should still work. Here's a peek at my source code, you can also visit the site and inspect some of the elements to see if I'm missing anything.
Basic layout (Assume video ID is 0000000000000:
<div class="index_post">
<a href="<?php the_permalink() ?>">
<div class="image">
<div class="container" style="background:url('http://img.youtube.com/vi/0000000000000/0.jpg');">
</div>
<div id="data_time<?php the_ID(); ?>" style="position:absolute;z-index:9;text-decoration:none;bottom:2px;right:2px;font-size:10px;color:#fff;background:#000;padding:0px 2px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;opacity:0.75;">
3RR:0R!
</div>
</div>
<div class="postinfo">
<div class="data_uploadedby<?php the_ID() ?>"></div>
<div class="data_views<?php the_ID() ?>"></div>
</div>
<div class="extras">
<script type="text/javascript">
function ytindex<?php the_ID(); echo time() ?>( data )
{
$('#data_time <?php the_ID() ?>').html( secondsToHms( data.entry[ "media$group" ][ "yt$duration" ].seconds ) );
$('.data_postedby<?php the_ID() ?>').html( 'by ' + data.entry[ "author" ][ 0 ].name.$t );
$('.data_uploadedby<?php the_ID() ?>').html( data.entry[ "title" ].$t );
$('.data_views<?php the_ID() ?>').html( data.entry[ "yt$statistics" ].viewCount + ' views</h3>' );
}
</script>
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/0000000000000?v=2&callback=ytindex<?php the_ID(); echo time() ?>"></script>
</div>
</a>
</div>
Here's the result (CSS elements like thumbnail display fine, because they're handled w/ PHP, none of the other elements load): http://i.stack.imgur.com/0HYKQ.png (link b/c of SO rep)
Thanks in advance! From experience I can say most of the people on this site are awesome helpers! -Matt
the jquery library is already included in the current versions of wordpress. Use wp_enqueue_script to add the jquery library.
Don't just add the script to your header.php file...
Then you'll also need to use this ready function for compatibility with wordpress.
jQuery(document).ready(function($){
// now you can use jQuery code here with normal $ shortcut formatting
});

Categories