I am currently in the process of trying to build a screenshot gallery. I have complete the first step which is to make it possible for the user to upload the image to a mysql database.
That is how the images for the gallery are supplied to the gallery script. Unfortunately, I have spent months perfecting my ability to get various things into a database, but not so much time on how to take them from the database and display in a user friendly format.
Twitter Bootstrap Fluid Grid System
Twitter Bootstrap utilizes a fluid grid system to display data. You don't have to use it, but it makes for a much better looking layout. Now the screenshot gallery needs to display rows of images and each row is 4 columns wide. Now here is the kicker, This is the structure for each row.
http://pastebin.com/HvBK5rTC
I need to generate that row over and over. But I need the images that populate it to cease at 4, echo the appropriate closing divs, echo the opening divs for another row, and the echo four more images out, ect, ect.
I don't have any code for this because I do not know where to start. I can supply anything that you need if you can just help me get started.
Edit
This is what I have come up with so far, but I do not know how to close the <div class="row-fluid"> and open a new one.
http://pastebin.com/EADji2eh
You are pretty much there. mysql_* fn's are deprecated, you should use PDO etc.
You can do what you need by adding an outer loop for flow control, and using what you had already as an inner. The result array, it will automatically iterate through the result set for you without needing to keep track of offsets for limits etc.
build_gallery_fn.php:
function image_from_database() {
// use a running counter for flow control of the outer loop
$runningcount = 0;
$r = mysql_query("SELECT DISTINCT logo AS `img` FROM NewsArticles WHERE logo IS NOT NULL AND logo !='';");
//Get # of images in results to use as upper limit for outer loop
$img_ct = mysql_num_rows($r);
while ($runningcount <= $img_ct){
//rowcount reset to break content blocks
$rowcount = 0;
echo "<div class=\"row-fluid\">";
$runningcount++;
while(($rowcount <= 3) && $row = mysql_fetch_assoc($r))
{
$rowcount++;
$img = $row['img'];
echo '<div class="span2">';
echo "<span class='thumbnail'><img src='attachments/logos/$img'/> Photo # $runningcount of $img_ct</span>";
echo '</div>';
}
echo "</div>";
}
}
Output Holder:
<div class="container">
<h1 class="text-center">The American Pacific Group ScreenShot Gallery</h1>
<hr>
<?php
echo image_from_database();
?>
</div>
Related
I am trying to create a forums where my php file extracts the replies to the thread from my database and displays them in a foreach loop.
for example:
<?php
if(sizeof($arr_posts) > 0){
foreach ($arr_posts as $posts){
echo $posts;
}
}
?>
So $arr_posts holds the posts to this thread. So element of the array holds a html block that displays the post on the page.
However, the issue I have spent days on (not kiddig). When a user has submitted a reply with an image. I.e.
'Look at this dog <img src="dog.png">'
I want a lightbox theme to expand the image to make it bigger to zoom in. However, I have struggled to somehow get the lightbox by lokesh around the image tag in order for this to work. I needed to get this:
'Look at this dog '
is there some other way I can do this? Any suggestions are welcoming. :)
you can use
preg_match_all('/<img[^>]+>/i',$html, $result);
and replace anythings you want with $result in loops
Alright, so basically I aligned 9 boxes in three rows vertically and horizontally, and used css to position them. Everything went fine and worked, until I included a php command to access a mysql database and echo certain rows inside the divs. The first box maintained it's position, however the second was too far to the right and higher than I originally set it to be, the 3rd one was all the way off the screen, you had to scroll to see it. I've attempted to fix this through positioning in html (and deleting the css commands), however this only works for chrome. In firefox the boxes seem to ignore the command and start at the left top corner.
the codes with the php inside look like this:
<div id= "box1"> <div style="position: absolute;background-color:#fff;width:250px;height:120px;border:0px;">
<?php
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("testtest") or die(mysql_error());
$query = mysql_query("SELECT * FROM posts ORDER BY time ASC LIMIT 0, 1;");
while ($row = mysql_fetch_array($query)) {
echo '<div style="font-weight: bold;">';
echo $row["Title"];
echo '</div>';
echo '<div style="font-weight: normal;">';
echo $row["Offer"];
echo '</div>';
}
?>
</div>
and the css codes look like this (obviously different for each box, but you get the point)
# box1 {
margin-top: -140px;
margin-left: 830px;
}
Thanks in advance for any help, I'm really stuck there and I can't seem to figure out why php would affect the positioning of a div..
You may want to re-write your page markup. Using a negative margin is probably not the best idea, especially if the boxes are position:absolute; Instead you could set a parent container for your boxes, and position each box based on that.
Have you set the overflow of the boxes?
here is a simple template...
With a bit of luck this will help solve your bug.
Hum i don't know if your forgot to print here, but you have a div tag not closed.
I'm pretty new to programming, and i'm writing a pretty simple website for an outlet, with 4 pages: home, beauty, wellbeing, contacts.
This website will be a showroom for this outlet's articles, which will be shown in the two section of the website, depending on their area of interest.
The contractor wanted of course to be able to upload articles on his own when he wanted, so I build a simple application in php, with a login, an administration page, where he could just write Title, price, description and upload an image for the article.
All is all right, The php program is ok, uploads go smooth, the page with the articles are automatically generated by the php program, which takes the data from the mysql database, via a while cycle.
The last problem which I cannot solve, is a Slider in the homepage.
The same identical in the article's pages, have to be shown in a in home page, but not one under the other, instead they must scroll in a div, and of course the article's divs are generated by the php program.
Now, i'm not all that great in javascript, so I don't know if I'm doing it the right way, or if something's wrong with the jquery plugin I use.
The code is this:
In the header:
<script src="js/jquery.jshowoff.min.js" type="text/javascript"></script>
And in the Body:
<div id="vetrina">
<?php
include "database.php";
$connection = Database::getConnection();
$query = ("SELECT * FROM `articoli` WHERE (`importante_art` = 'si') ORDER BY `id_art` DESC");
$ris = $connection->query($query) or die (mysqli_error())
$row_cnt = $ris->num_rows;
if(($row_cnt) > 0){
$row = "";
while ($row = mysqli_fetch_array($ris)){
$id_post = $row['id_art'];
$titolo_post = stripslashes($row['titolo_art']);
$testo_post = stripslashes($row['descrizione_art']);
$immagine_post = $row['immagine_art'];
$prezzo_post = $row['prezzo_art'];
echo '<div class="evidenziato">';
echo '<h4 class="titolo_evidenziato">'.$titolo_post.'</h4>';
echo '<p class="prezzo">'.$prezzo_post.'</p>';
echo '<img class="img_evidenziato" src='.$immagine_post.'></img>';
echo '<p class="descrizione_articolo">' . $testo_post . '</p>';
echo '</div>';
}
}else{
echo "Right now there are no articles to display";
}
?>
</div>
<script type="text/javascript">
$(document).ready(function(){ $('#vetrina').jshowoff(); });
</script>
I used the showoff plugin, that should do what i want.
http://ekallevig.com/jshowoff/
I don't know what I'm doing wrong... :\
I even tried to do the slideshow without the php program, by simpli typing in the articles, but nothing.
I tried 5 different plugins.
Maybe it's just that i'm doing something wrong at the base.
Anyway, my divs come out all right, i see that they are all there, but they just wont slide...
as mentioned at http://ekallevig.com/jshowoff/ site
for jshowoff required two files.
1). the jQuery Core JavaScript Library (1.3+)
2). jquery.jshowoff.min.js
Did you used both files?.
Apologies, novice Drupal question warning:
Aim: to split my outputted list of custom field images up so I can use them differently.
ie. In my node.tpl.php use the first 3 (most recent node) images in a slider. Then list the rest (offsetting the first three) just as plain images.
But I can't find how to limit my results. In my node template I can style all my images up using something like this:
<a href="<?php $nodeurl = url('node/'. $node->nid); echo $nodeurl; ?>"
<img src="<?php print render (file_create_url($node->field_featured_image['und'][0]['uri'])); ?>" alt="<?php echo $title; ?>" />
</a>
But how do I limit the result? I guess this would work to ignore the first 3 results:
<?php foreach($node->field_featured_image as $k=>$v){
if ($k < 3) continue;
print render (file_create_url($node->field_featured_image['und'][0]['uri']));
}
?>
But not in node.tpl as node.tpl appears to be a loop so the above code gets looped and the array key never gets past 0.
I think :/
Am I way off here with a basic misunderstanding of the templates?
Any pointers appreciated. Desperately trying to stick with drupal but finding it tough.
I might be mislead by what you're trying to accomplish, but you probably don't need to be hacking into node.tpl.php just yet.
If you aren't using Views, start with that.
If you're trying to build a slider, use Views Rotator.
If you want something that's ready to be dropped in, use Enterprise Rotator. (basically Views Rotator and a Banner Slide content type built out already).
You can offset the images by using the pager options to either show a certain number, and offset the number of images queued up.
Or if you want to just use specific images, use Nodequeue. Make a simple queue, add the nodes that contain the images you want, then in your View create a relationship (marked as required) to the nodequeue.
I'll try to explain the situation as clearly as I can.
I've got a system in place that presents links to events, created with JEvents for those familiar(in Joomla)
When an event is created in the admin, the category view for it displays a little table, with the event`s date, name, and a link to the event page. All that works fine. Now the link is called on a separate php file than the one that renders the html view for it all.
The link is called with this:
<a class="ev_link_row" href="<?php echo $rowlink; ?>" <?php echo $args;?> style="font-weight:bold;color:<?php echo $fgcolor;?>;" title="<?php echo JEventsHTML::special($row->title()) ;?>"><?php echo $tmpTitle ;?></a>
On the html rendering script, I've got this:
$this->viewEventRowNew ( $row,'view_detail',JEV_COM_COMPONENT, $Itemid);
Which is comprised in a for loop above, populating the $row variable with all sorts of info.
for( $r = 0; $r < $num_events; $r++ ){
$row = $data['rows'][$r];
etc.
Now to the question. I've got a table that stores imagefile names. I have no trouble creating a forloop that goesthrough the rows and returns the path name to the images, like this:
$db = & JFactory::getDBO();
$query2 = "SELECT `c`.`filename` AS `iname` , `c`.`filetitle` AS `ititle` , `c`.`ev_id` AS `eventid` FROM `#__jev_files` AS `c` ";
$db->setQuery($query2);
$imagelist = $db->loadObjectList();
?>
<?php foreach($imagelist as $row) : ?>
<img src="/images/stories/jevents/<?php echo $row->iname; ?>" />
<?php endforeach; ?>
Now the obvious question, how do I assign this image to be comprised in the link. I tried wrapping the for loop around the linkitself, but it obviously breaks hell as it is reused in a loop(creating a loop within a loop and destroying my layout)
If I use the query in the html-rendering page, then my problem is essentially that I do not know how to append the above to the $row variable without breaking the rest of the functionality.
Thanks, a LOT to anyone who can guide me on this.
I think I could give just the answer you're looking for if I could understand the question better. Perhaps some of what you're saying is Joomla-specific so I don't quite get it.
But generally, object-oriented programming is a good way to keep information about one related thing together, such as all date, description, and collection of images associated with one event. If you can loop through a set of id's and each ID can be used to create an Event object, then each Event object can be made to retrieve it's own information and related images. It keeps code like this cleaner.