I'm using FancyBox to contain my iframes, but it only works for the first array. Here's what the array looks like:
$gallery_items = array(
array("img_src" => "gallery/thumb_1.jpg", "link" => "gallery/profile1.txt"),
array("img_src" => "gallery/thumb_2.jpg", "link" => "gallery/profile2.txt"),
and so on, and then here is how it is produced:
echo '<li><a id="various3" href ="' . $current_gallery_item["link"] . '"><img src="' . $current_gallery_item["img_src"] . '" /></a></li>';
the id="various3" is how FancyBox tells its an iframe. But, it only works for the first array.
Revised answer:
It seems you don't want iFrames but just load the content via Ajax. Your problem is that every element has the same ID. If you attach Fancybox via
$('#various3').fancybox();
then it will only be applied to the first element, because IDs have to be unique.
Use classes instead:
<ul>
<?php foreach($gallery_items as $item): ?>
<li>
<a class="various3" href ="<?php echo $item['link']; ?>">
<img src="<?php echo $item["img_src"]; ?>" />
</a>
</li>
<?php endforeach;?>
</ul>
And jQuery:
$('a.various3').fancybox();
If you really want to have iFrames, you can just add the iframe class to the link elements:
<a class="various3 iframe" ...>
This will automatically tell Fancybox to use iFrames.
See also Fancybox - How to use.
foreach($gallery_items as $current_gallery_item){
echo '<li><a id="various3" href ="' . $current_gallery_item["link"] .
'"><img src="' . $current_gallery_item["img_src"] . '" /></a></li>';
}
Might work
You used the same id (namely, "various3") for several elements.
This will not work this way.
Every id should be unique.
assign some class to A-tags and use it:
$("#various3")
--->
$(".various3")
Related
I'm working on a new WordPress theme (haven't touched WP themes since like 2.8...) and I'm attempting to make an if/else statement that changes the behavior of my top navigation bar based on whether the page is a front_page or not.
Essentially what I'm after is if the page is a front_page, then display the logo image. If the page is any other kind of page, then display a simple H1 element with the company name:
<li class="name">
<?php
if (is_front_page()) {
echo '<a href="<?php bloginfo("url"); ?>';
echo '<img src="' .bloginfo( "template_directory" ). '/images/logo-dsi.png" alt="DSI" />';
echo '</a>';
} else {
echo '<a href="' .home_url(). '">';
echo '<h1 class="logo">DSI</h1>';
echo '</a>';
}
?>
</li>
The else statement is working fine. But my if statement is not producing the img tag correctly. It echoes the literal bloginfo('template_directory') url and not inserting that into the img src, which is what I want it to do. It's trying to find an image at this url: localhost/images/logo-dsi.png
Obviously my syntax on line 5 is wrong somewhere, but I'm also not sure if I'm going about this the right way. Is there a better solution to what I'm trying to accomplish here?
Thanks!
The later is correct however
echo '<a href="<?php bloginfo("url"); ?>';
Should be
echo '<a href="' . bloginfo("url") . '">';
I tried this out and it worked:
<li class="name">
<a href="<?php bloginfo('url'); ?>">
<?php
if (is_front_page()) { ?>
<img src="<?php bloginfo('template_directory'); ?>/images/logo-dsi.png" alt="DSI" />
<?php
} else { ?>
<h1 class="logo">DSI</h1>
<?php } ?>
</a>
</li>
Apologies, I should have hacked away at it a little longer. But maybe this will become helpful to someone else.
I knew echos in WordPress looked bad for a reason... ;-)
Also I'm sure there's a prettier way to write this out, but for now, that code does the trick.
Hey guys got a question on outputting a dynamic PHP block for a dynamically created PHP page. In my code I am looking for a string in an HTML page thats been uploaded. Once found I am replacing the string with a block of PHP code, the HTML page will be saved as a PHP page to be used on the project. So as I am looping through the HTML I am replacing the string with this ($i is replaced with the number in the loop so I can use them in my array.)
$phpCodeNoLink = '<span id="Title'.$i.'"><?php echo $sl_result['.$i.'][2]; ?></span>
<a href="editor.php?<?php echo "vfSID=" . $sl_result['.$i.'][0] . "&vfSection=2&vfSLink=" . $sl_result['.$i.'][4] . "&vfOrderID=" . $sl_result['.$i.'][5] . "&vfID=" . $vfID; ?>" target="_parent">
<img src="images/btn_edit.gif" border="0" id="SL_editButton'.$i.'" class="editButton" />
</a>';
The problem is it is not outputting what I need, example of what it should look like
<span id="Title1"><?php echo $sl_result[1][2]; ?></span>
<a href="editor.php?<?php echo "vfSID=" . $sl_result[1][0] . "&vfSection=2&vfSLink=" . $sl_result[1][4] . "&vfOrderID=" . $sl_result[1][5] . "&vfID=" . $vfID; ?>" target="_parent">
<img src="images/btn_edit.gif" border="0" id="SL_editButton1" class="editButton" />
</a>
This is what I get in the PHP page once it's generated
<span id="Title0"><?php echo $sl_result[0][2]; ?></span>
<a href="editor.php?<?php%20echo%20%20" vfsid=" . $sl_result[0][0] . " .>" target="_parent">
<img src="images/btn_edit.gif" border="0" class="editButton"></a>
The PHP tags are being replaced and I am missing a whole block of code. Am I missing something any help would be much appreciated.
Figured it out, the PHP code was being parsed and removed by my inline CSS converter moving it above all the other parsing resolved it issue...
Hi I'm using this plugin called Meta Slider light and what I am trying to accomplish is getting the <li> to call the class of the image id.
Each Image has an ID and It calls the ID in the Img class but I want it to call it in the <li> class.
Below is the source code.
https://github.com/mihadaiko/ml-slider/blob/master/inc/slide/metaslide.image.class.php
on line 215 this code
'class' => "slider-{$this->slider->ID} slide-{$this->slide->ID}",
that code gives me this --> <img src="img url" class="slider-ID slide-ID">
The class calls for the Slider ID and The slide id.
and on line 347 it calls the <li> element.
$html = '<li style="display: none;"' . $thumb . '>' . $html . '</li>';
Each image is wrappen in an <li> element.
which gives me this
<li style="display:none;"><img src="img url"> class="slider-ID slide-ID"></li>
What I want to do is add the class line to the <li> element.
So far I have tried this
$html = '<li style="display: none;" class="slide-{$this->slide->ID}" ' . $thumb . '>' . $html . '</li>';
and it is still not working, it's calling the actual code instead of the image id. What am I doing wrong.
The value in there is most likely escaped before being printed. This means that your PHP is never given the chance to evaluate before being output on the page. I could be wrong, but it looks that way.
Try this instead
'class' => "slider-" . $this->slider->ID . " slide-" . $this->slide->ID,
edit, this
$html = '<li style="display: none;" class="slide-'. $this->slide->ID .'" ' . $thumb . '>' . $html . '</li>';
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/
Insead of having to alter values for every item in the list as so
<li class="item drawing">
<a class="fancybox" rel="group" href="images/portfolio/skateboard_l.jpg">
<img src="images/portfolio/skateboard.jpg" alt="skateboard"/>
<h3>Skateboard</h3>
</a>
</li>
Is it possible to have something like
item="Skateboard
<li class="item drawing">
<a class="fancybox" rel="group" href="images/portfolio/[item-lowercase][if "item"_l.jpg exists, echo"_l"].jpg">
<img src="images/portfolio/[item-lowercase].jpg" alt="[item-lowercase]"/>
<h3>[item]</h3>
</a>
</li>
So I can just change the item variable for each item in the list rather than all the seperate entries. I assume this would be done using PHP or JS?
Thanks.
You want to use templates I guess.
If you want to do it client side in JS:
underscore
Mustache.js
Handlebars.js
The best solution that I can think of is to build an array (I would use PHP)... then use a while loop to build your list... put it all in a function and call it wherever you need it...
For example:
<?php
function itemList(){
$items=array ("skateboard","rollerskates","scooter","rollerblades");
reset($items);
while (list(, $value) = each($items)) {
echo '<li class="item drawing">';
echo '<a class="fancybox" rel="group" href="images/portfolio/' . $value . '_l.jpg">';
echo '<img src="images/portfolio/' . $value . '.jpg" alt="' . $value . '"/>';
echo '<h3>' . $value . '</h3>'; echo '</a>';
echo '</li>';
}
}
?>
Then in your HTML file (where you want the list to be displayed):
<ul><?php itemList(); ?></ul>
If you put the function in a separate .php file, you have to include it in the HTML document:
<?php include ('/url/of/list.php'); ?>
You can do this in PHP using echo.
For instance, if the image name was stored in $images["myImage"] and the alt was $imageAlts["myImage"
<img src="images/portfolio/<?php echo $images["myImage"]; ?>.jpg" alt="<?php echo $imageAlts["myImage"]; ?>"/>
Looks like AngularJS would help as well. It lets you do stuff like this:
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Smarty is a good template system for PHP. If you'd like to use PHP for templating over JavaScript, just start with one of the tutorials there (or look into other PHP template systems).
A classic way to do this in PHP would be to create an array of items in PHP and then iterate over the array, creating the HTML list items with the appropriate [item-lowercase] entries.
I would consider doing the [if item exists] as part of the process that builds your data array so you don't have to do anything complicated when you build your html. Then, just loop through your array and display whatever is in $theItem.
This is, of course, a simplification.
foreach($itemList as $key=>$theItem){
?>
<li class="item drawing">
<a class="fancybox" rel="group" href="images/portfolio/<?php echo $theItem ?>
<img src="images/portfolio/[item-lowercase].jpg" alt="[item-lowercase]"/>
<h3>[item]</h3>
</a>
</li>
<?php
}