1

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.

4

6 に答える 6

2

You want to use templates I guess.

If you want to do it client side in JS:

于 2012-10-18T18:44:44.483 に答える
1

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"]; ?>"/>
于 2012-10-18T18:44:05.030 に答える
1

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>
于 2012-10-18T18:46:02.177 に答える
1

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).

于 2012-10-18T18:47:22.630 に答える
1

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

}
于 2012-10-18T19:10:06.387 に答える
1

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'); ?>
于 2012-10-18T19:16:04.637 に答える