Im currently busy with working on a website but I got stuck.
The site is running on Processwire and working with the FeatherLight lightbox.
Now the strange thing is, I am only able to see the images when I'm logged in as admin. When I'm just a guest (incognito) the site won't show these images but shows the other pages.
You can find the website over here
I've looked at the page settings in the CMS, and the guest is able to view the pages, as it also does with the text pages.
But I can't figure out how to get the images back.
Here is the code
<div id="container">
<div class="grid-sizer"></div>
<?php if ($page->numChildren(true)) {
echo "<ul class='project'>";
foreach ($page->children as $childIndex => $child) {
if ($child->head_image) {
$image = $child->head_image;
echo "<li class='item'><a href='#' data-featherlight='#mylightbox" . $childIndex . "'><img id='mylightbox" . $childIndex . "' src='{$image->url}' class='image'></a></li>";
}
}
echo "</ul>";
}
?>
<style>
.featherlight-content:after {
content: "<?php echo nl2br($child->title); ?> <?php echo nl2br($child->image_description); ?> <?php echo $child->formaat; ?>";
}
</style>
Thanks in advance!
Related
I have made an relative simple html/css/php website for a friend of my. But now he wants to have a page where I can show photos of events in a gallery (Arround 100 photos per event).
I have already searched for some code for this online, what I now have shows all the pictures in that directory but the page gets way to big if there are 100 photos per event.
So now I am wondering if these photos can be put in a slider or something like that.
<?php
$dirs = glob('images/*', GLOB_ONLYDIR);
foreach($dirs as $val) {
echo '<div class="gallery">';
echo "<a><h3><span>»</span> ".basename($val). "</h3></a>";
echo '<ul class="gallery-list">';
$files = glob($val.'/*.{jpg,png,gif}', GLOB_BRACE);
foreach($files as $file) {
echo "<li><a href='".$file."' ><img src='" . $file . "'></a></li> \r\n";
}
echo "</ul>";
echo "</div>";
}
?>
[-- EDIT --]
I managed to combine the code I already had with the slickslider
<?php
$dirs = glob('images/*', GLOB_ONLYDIR);
foreach($dirs as $val) {
echo "<div class='gallery-wrapper'";
echo "<a><h3>".basename($val). "</h3></a>";
echo '<div class="slider-photos">';
$files = glob($val.'/*.{jpg,png,gif}', GLOB_BRACE);
foreach($files as $file) {
echo "<div class='slide'><a href='".$file."' ><img src='" . $file . "'></a></div> \r\n";
}
echo "</div>";
echo "</div>";
}
?>
( Ofcourse with the aditional CSS and javascript for the slider, but that is not important for this I think )
But I have one more problem... They automaticaly sort on alphabet but I want them to sort on the date I made the folder where the images are stored.
Does anyone know how to do this?
And maybe its to much asked, but if it is possible can I also show per folder how many images there ar in that folder?
You just have to modify your code a little bit and perform a loop around the div with each slider's content. If you are using slick slider (http://kenwheeler.github.io/slick/) then it should be quite straightforward.
1st step is to ensure you have all the required libraries in place:
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
2nd Step is to ensure you initialise your slider:
$(document).ready(function(){
$('.gallery-list').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 4
});
});
3rd step is to structure your html correctly using this template:
<div class="gallery-list">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
In your case I think this is what you need:
<?php
$dirs = glob('images/*', GLOB_ONLYDIR);
foreach($dirs as $val) {
echo '<div class="gallery">';
echo "<a><h3><span>»</span> ".basename($val). "</h3></a>";
echo '<div class="gallery-list">';
$files = glob($val.'/*.{jpg,png,gif}', GLOB_BRACE);
foreach($files as $file) {
echo "<div><a href='".$file."' ><img src='" . $file . "'></a></div> \r\n";
}
echo "</div>";
echo "</div>";
}
?>
I'm using WP Mobile Detect to see if site visitors are on a mobile device. The Plugin is installed and I'm good on that front.
Now, I'm trying to setup an if / else php statement to display a tel: link to mobile browsers and a non link phone number to everyone else. The code below breaks my theme.
<?php
if (function_exists('wpmd_is_phone')) {
echo "<li><a class="phone' href="tel:<?php echo ot_get_option('phonenumbercontent') ?>"><span class="phone"><?php echo ot_get_option('phonenumbercontent') ?></span></a></li>";
} else {
echo "<li><span class="phone"><?php echo ot_get_option('phonenumbercontent') ?></span></li>";
}
?>
Your code is not correct, for example (not properly concatenated)
echo "<li><span class="phone"><?php echo ot_get_option('phonenumbercontent') ?></span></li>";
You may try this
<?php
if (function_exists('wpmd_is_phone') && wpmd_is_phone()) {
echo "<li><a class='phone' href='tel:" . ot_get_option('phonenumbercontent') . "'><span class='phone'>" . ot_get_option('phonenumbercontent') ."'</span></a></li>";
} else {
echo "<li><span class='phone'>" . ot_get_option('phonenumbercontent') . "</span></li>";
}
?>
Also, the plugin doc says, you can use
[phone]Put content here that you only want displayed on Phones NOT Tablets or Desktops[/phone]
[notphone]Put content here that you only want displayed on Tablets OR Desktops NOT Phones[/notphone]
I don't know exactly where to start to display files from the file set in order to show a fancybox gallery on click. I would like to have the gallery open from a link. On click show the gallery, aka images that have the same rel but are set to display:none (easily controlled by my css). I can do it from selecting one image but am not sure how to pass the images from the file set into the view (I'm assuming I need to create some kind of function in my controller to get the fsID, just not sure how). I just need the first image to display on the page (thumbnail image), then click the link and it shows more full size images.
Basically, if you know Concrete5, I would like it to be like the image block, except that the administrator can choose a fileset instead of one image.
here is my view.php
$picture = $this->controller->getPicture();
if ($picture) {
$bigPicture = $image->getThumbnail($picture,600,600)->src;
$smallPicture = $image->getThumbnail($picture,200,200)->src;
echo "<img src=" . $smallPicture . " alt=" . $imageTitle . " title=" . $imageTitle . "/>";//thumbnail picture
echo "<div id=\"image-modal\">";
echo "{$linkText}";//open fancybox from link
echo "<div class=\"hiddenGallery\" style=\"display:none;\">";//hidden images
echo "<a href=\"images/pattern/t-103-n.jpg\" class=\"fancybox-thumb\" rel=" . $title . " title=" . $imageTitle . ">";
echo "<img src=\"images/pattern/t-103-n.jpg\" class=\"fancybox-thumb\" />";
echo "</a>";
echo "</div>";
echo "</div>";
}
my controller.php
function getPicture() {
if ($this->fIDpicture > 0) {
return File::getByID($this->fIDpicture);
}
return null;
}
my add.php
$al = Loader::helper('concrete/asset_library');
echo $al->image('ccm-b-image', 'fIDpicture', t('Choose File'),
$this->controller->getPicture());
echo '</div>';
Any and all help is much appreciated.
Well, two things :
You have to set the class="fancybox-thumb" AND the rel attribute to the <a> tag!!, not to the <img /> tag.
If you are planing to hide the rest of the elements of the gallery, don't set a display: none; css property to each of them, but rather wrap them in a hidden <div> container like :
<div style="display: none;">
<a class="fancybox-thumb" rel="gallery" href="images/02.jpg"></a>
<a class="fancybox-thumb" rel="gallery" href="images/03.jpg"></a>
<a class="fancybox-thumb" rel="gallery" href="images/04.jpg"></a>
... etc
</div>
I am using the rendered html, which is what it matters.
I have some code which handles the entire back-end (add/edit/controller) part of this equation:
https://github.com/jordanlev/c5_designer_gallery
Here's a tutorial that explains how to use it (with the example of the FlexSlider, but if you know how Fancybox works then it shouldn't be hard to understand what's going on):
http://c5blog.jordanlev.com/blog/2011/12/build-a-slideshow-block/
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 have written a web application that involves having users upload pictures to the site. On the homepage, I dynamically show the newest pictures/items uploaded in PHP, limiting it to ten. However, the page looks so static and I have searched on Google, bing, ask, yahoo, etc for days now and haven't had any answers.
I have written the code to store store the images, and get them from the db.
The images are shown on the homepage, and the only thing i have left to do is load it in a slider.
$sql = mysql_query("SELECT * FROM items ORDER BY item_date_added DESC LIMIT 10")or die(mysql_error());
while($row = mysql_fetch_array($sql)) {
//$user_id = $row['user_id'];
$item_name = $row['item_name'];
$item_id = $row['item_id'];
$check_pic = "users/$item_name.jpg";
if (file_exists($check_pic)) {
$show_pic = "<img src=\"users/$item_name.jpg\" width=\"100px\" height=\"100px\" border=\"5\" id='img'/>";
//$user_pic3 = "<img src=\"users/$rid/image01.jpg\" width=\"50px\" height=\"50px\" border=\"1\" />";
//$MemberDisplayList .= '' . $user_pic3 . '';
$i++;
$show_new_items .= "<a href='item_view?item_id=$item_id&&session_item=$item_id'>$show_pic</a>";
}
$newly_listed_names .= " <a href='item_view?item_id=$item_id&&session_item=$item_id'> $item_name </a> | ";
}
///////// END SHOW NEWLY ADDED ITEMS ///////////////////////////////////////////////////
the newly added items in echoed in a div in the body.
Can anyone help me please! it's been bothering me for a while now. Thanks.
To use Nivo, you need to generate html that looks something like this... (Download the nivo demo and open up the demo.html for the full source).
So all you need to do is output your images in a loop inside the slider div.
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<?php
while($row = mysql_fetch_array($sql)){
$item_name = $row['item_name'];
$item_id = $row['item_id'];
$check_pic = "users/$item_name.jpg";
if (file_exists($check_pic)) {
print "<img src=\"users/$item_name.jpg\"/>";
$i++;
}
}
?>
<img src="images/2.jpg" data-thumb="images/2.jpg" alt=""/>
</div>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
You can use jquery plugins such as Nivo. Or you can try different jquery plugin from this link. And integrate it with your code.