Jquery gallery - Page 2

Question

gentlemedia 803 Master Poster

9 Years Ago

If you want only 3 pictures in a row, then you should give a max-width to the #container div so that it can hold only a maximum of 3 pictures in a row. This is a very basic principle of CSS.

Container in this demo has a max-width of 600px.
http://cssdeck.com/labs/full/auaaljix

Edited 9 Years Ago by gentlemedia

diafol

9 Years Ago

I know how to integrate simple jQuery plugins and also already have the basic understand of HTML & CSS

C'mon davy - you do not have a basic understanding of HTML and CSS - that's the major issue. You've consistently ignored advice on these. Look at the mess you posted that's supposed to be markup:

<!DOCTYPE html> <html> <head> <title>Portfolio</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <style> body { padding: 100px; } .button-group { margin: 5px; } .item { width: 150px; height: 150px; margin: 5px 0 0 110px; padding: 10px; color: black; } .item > * { margin: 0; padding: 0; } #box { width: 800px; margin: 0 0 0 -100px; } </style> </head> <body> <?php include('nav.php'); ?> <br><br><br> <center><h2><b>Our Portfolio</b></h2></center> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim </p> <div id="sorts" class="button-group"> <button data-sort-by="original-order">Photography</button> <button data-sort-by="branding">Branding</button> <button data-sort-by="symbol">Web Design</button> <button data-sort-by="number">number</button> <button data-sort-by="weight">weight</button> <button data-sort-by="category">category</button> </div> <div id="box"> <div class="item transition metal" data-category="transition"> <p class="name"><img src="Images/Portfolio/portfolio1.jpg" width="270px"></p> </div> <div class="item metalloid" data-category="metalloid"> <p class="name"><img src="Images/Portfolio/portfolio2.jpg" width="270px"></p> </div> <div class="item transition metalloid2" data-category="metalloid2"> <p class="name"><img src="Images/Portfolio/portfolio3.jpg" width="270px"></p> </div> <div class="item transition metalloid3" data-category="metalloid3"> <p class="name"><img src="Images/Portfolio/portfolio4.jpg" width="270px"></p></div> <div class="item transition metalloid4" data-category="metalloid4"> <p class="name"><img src="Images/Portfolio/portfolio5.jpg" width="270px"></p> </div> <div class="item transition metalloid5" data-category="metalloid5"> <p class="name"><img src="Images/Portfolio/portfolio6.jpg" width="270px"></p></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

WTF? You're asking somebody to wade through that nonsense. You don't even have the good grace to format it properly by indenting.

<EDIT context="Elucidation" date-time="2015-06-09 10:17">

If you're wondering what all that drivel about indenting is all about - the blame for the perceived lack of formatting by davy_yg was with the site parser. davy actual did post formatted HTML, just that the parsing routine stripped newlines from certain tags with links in them. It now seems to be sorted and 'mangled' markup seems to be 'unmangled', leading some statements on this thread a little moot. Apologies to davy.

</EDIT>

In addition you insist on using deprecated tags like <center>, even though we've told you a million times about it. The term, 'Goldfish' springs to mind. Although it's no crime, you're mixing css files and style tags. I'm just really amazed you've got no inline style attributes for your tags.

It's been years since you started posting questions on web design and dev, but your threads still run into the 40+ posts. Usually because you don't listen to the advice given. This is very frustrating. You pepper the forum front page, usually with 3 threads at a time and we find many questions that are basically re-runs of previous ones.

Some advice:

Take the time to learn HTML5 properly
Take the time to learn CSS3 properly
DO NOT touch js, php, mysql etc until you've done 1 and 2, for the sanity of us all.

Edited 9 Years Ago by diafol

gentlemedia commented: amen to that :) +4

pixelsoul commented: I'll drink to that +9

diafol

9 Years Ago

This is what I meant by indenting:

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
        <script>
            $(function(){
                var $container = $('#box').isotope({
                    getSortData: {
                        name: '.name',
                        symbol: '.symbol',
                        number: '.number parseInt',
                        category: '[data-category]',
                        weight: function( itemElem ) {
                            var weight = $( itemElem ).find('.weight').text();
                            return parseFloat( weight.replace( /[\(\)]/g, '') );
                        }
                    }
                });
                // sort items on button click
                $('#sorts').on( 'click', 'button', function() {
                    var sortByValue = $(this).attr('data-sort-by');
                    $container.isotope({ sortBy: sortByValue });
                });
            });
        </script>
        <br><br><br>
        <img src="Images/Portfolio/button1.jpg">
        <img src="Images/Portfolio/button2.jpg">
        <img src="Images/Portfolio/button3.jpg">
        <br><br><br>
        <img src="Images/Portfolio/portfolio1.jpg">
        <img src="Images/Portfolio/portfolio2.jpg">
        <img src="Images/Portfolio/portfolio3.jpg">
        <img src="Images/Portfolio/portfolio4.jpg">
        <img src="Images/Portfolio/portfolio5.jpg">
        <img src="Images/Portfolio/portfolio6.jpg">
        <br><br><br><br>
        <img src="Images/Portfolio/clients.jpg">
        <br><br><br><br>
        <center>
            Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet
            dolore magna aliquam<br> erat volutpat.<br>
            <b>dolore magna aliquam</b><br><br>
        </center>
    <?php include('footer.php'); ?>
    </body>
    </html>

How difficult was that to do?

I do not know how to replace <center> that have the same meaning.

You have been shown several times in different threads. This is my point about you not paying any attention.

Multiple <br> too. Also discussed that.

Any reason why scripts in middle of page instead of in head or at bottom before </body>?

Edited 9 Years Ago by diafol

diafol

9 Years Ago

If you want this for your articles, then I can't see why you don't just have an article class and provide the margin for that:

<div class="article">...content...</div>
<div class="article">...content...</div>
<div class="article">...content...</div>
<div class="article">...content...</div>

DO NOT use empty <div class="step-down"></div>. That's really not the point. If you do that, then you may as well use <br />. If you want to apply a big margin below an article you could do something like:

<div class="article gap-below">...content...</div>
<div class="article">...content...</div>

for...

.gap-below
{
    margin-bottom: 3rem;
}

That way you separate the occasional styling (big gap below) from the normal styling (article).

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

davy_yg 2 Posting Whiz · Answer 1 · 2015-05-21T01:06:44+00:00

I place this:

Since I want to place the next picture under the first row. How to do that? Otherwise it will be all one row.

davy_yg 2 Posting Whiz · Answer 2 · 2015-05-25T04:06:30+00:00

portfolio.php

<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

 <style>
body {
  padding: 100px;
}
.button-group {
  margin: 5px;
}
.item {
  width: 150px;
  height: 150px;
  margin: 5px;
  padding: 10px;
  color: black;  
}
.item > * {
  margin: 0;
  padding: 0;
}
#container {
    width: 400px;
} 
</style>

</head>


<body>

<?php include('nav.php'); ?>


<center><h2>Our Portfolio</h2></center>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
</p>


<div id="sorts" class="button-group">
  <button data-sort-by="original-order">original order</button>
  <button data-sort-by="name">name</button>
  <button data-sort-by="symbol">symbol</button>
  <button data-sort-by="number">number</button>
  <button data-sort-by="weight">weight</button>
  <button data-sort-by="category">category</button>
</div>
<div id="container">
  <div class="item transition metal" data-category="transition">
    <p class="name"><img src="Images/Portfolio/portfolio1.jpg" width="170px"></p>    
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="name"><img src="Images/Portfolio/portfolio2.jpg" width="170px"></p>   
  </div>
  <div class="item transition metalloid2" data-category="metalloid2">
    <p class="name"><img src="Images/Portfolio/portfolio3.jpg" width="170px"></p>   
  </div>
  <div class="item transition metalloid3" data-category="metalloid3">    
    <p class="name"><img src="Images/Portfolio/portfolio4.jpg" width="170px"></p></div>   
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
  var $container = $('#container').isotope({
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});
</script>



<img src="Images/Portfolio/button1.jpg">
<img src="Images/Portfolio/button2.jpg">
<img src="Images/Portfolio/button3.jpg">

<br><br><br>
<img src="Images/Portfolio/portfolio1.jpg">
<img src="Images/Portfolio/portfolio2.jpg">
<img src="Images/Portfolio/portfolio3.jpg">
<img src="Images/Portfolio/portfolio4.jpg">
<img src="Images/Portfolio/portfolio5.jpg">
<img src="Images/Portfolio/portfolio6.jpg">

<br><br><br><br>
<img src="Images/Portfolio/clients.jpg">
<br><br><br><br>

<center>
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</center>



<?php include('footer.php'); ?>



</body>
</html>

davy_yg 2 Posting Whiz · Answer 3 · 2015-05-25T06:48:35+00:00

Hello, this is my code. I wonder why my portfolio container does not able to make the the picture gallery shift to the next row?

portfolio.php

<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

 <style>
body {
  padding: 100px;
}
.button-group {
  margin: 5px;
}
.item {
  width: 150px;
  height: 150px;
  margin: 5px;
  padding: 10px;
  color: black;  
}
.item > * {
  margin: 0;
  padding: 0;
}
#container {
    width: 400px;
} 
</style>

</head>


<body>

<?php include('nav.php'); ?>


<center><h2>Our Portfolio</h2></center>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
</p>


<div id="sorts" class="button-group">
  <button data-sort-by="original-order">original order</button>
  <button data-sort-by="name">name</button>
  <button data-sort-by="symbol">symbol</button>
  <button data-sort-by="number">number</button>
  <button data-sort-by="weight">weight</button>
  <button data-sort-by="category">category</button>
</div>
<div id="container">
  <div class="item transition metal" data-category="transition">
    <p class="name"><img src="Images/Portfolio/portfolio1.jpg" width="170px"></p>    
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="name"><img src="Images/Portfolio/portfolio2.jpg" width="170px"></p>   
  </div>
  <div class="item transition metalloid2" data-category="metalloid2">
    <p class="name"><img src="Images/Portfolio/portfolio3.jpg" width="170px"></p>   
  </div>
  <div class="item transition metalloid3" data-category="metalloid3">    
    <p class="name"><img src="Images/Portfolio/portfolio4.jpg" width="170px"></p></div>   
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
  var $container = $('#container').isotope({
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});
</script>



<img src="Images/Portfolio/button1.jpg">
<img src="Images/Portfolio/button2.jpg">
<img src="Images/Portfolio/button3.jpg">

<br><br><br>
<img src="Images/Portfolio/portfolio1.jpg">
<img src="Images/Portfolio/portfolio2.jpg">
<img src="Images/Portfolio/portfolio3.jpg">
<img src="Images/Portfolio/portfolio4.jpg">
<img src="Images/Portfolio/portfolio5.jpg">
<img src="Images/Portfolio/portfolio6.jpg">

<br><br><br><br>
<img src="Images/Portfolio/clients.jpg">
<br><br><br><br>

<center>
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</center>



<?php include('footer.php'); ?>



</body>
</html>

gentlemedia 803 Master Poster · Answer 4 · 2015-05-25T09:24:42+00:00

gentlemedia 803 Master Poster

9 Years Ago

I explained and showed you already how.

Edited 9 Years Ago by gentlemedia

davy_yg 2 Posting Whiz · Answer 5 · 2015-05-26T09:41:28+00:00

Hello,

I am trying to make these buttons work well.

<button data-sort-by="original-order">Photography</button>
<button data-sort-by="branding">Branding</button>
<button data-sort-by="symbol">Web Design</button>
<button data-sort-by="number">number</button>
<button data-sort-by="weight">weight</button>
<button data-sort-by="category">category</button>

I wonder why only original-order and category that works well? The rest cannot do anything.

portfolio.php

<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<style>
body {
  padding: 100px;
}
.button-group {
  margin: 5px;
}
.item {
  width: 150px;
  height: 150px;
  margin: 5px 0 0 110px;
  padding: 10px;
  color: black;  
}
.item > * {
  margin: 0;
  padding: 0;
}
#box {
    width: 800px; 
    margin: 0 0 0 -100px;
}
</style>

</head>


<body>

<?php include('nav.php'); ?>

<br><br><br>

<center><h2><b>Our Portfolio</b></h2></center>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
</p>

<div id="sorts" class="button-group">
  <button data-sort-by="original-order">Photography</button>
  <button data-sort-by="branding">Branding</button>
  <button data-sort-by="symbol">Web Design</button>
  <button data-sort-by="number">number</button>
  <button data-sort-by="weight">weight</button>
  <button data-sort-by="category">category</button>
</div>
<div id="box">
  <div class="item transition metal" data-category="transition">
    <p class="name"><img src="Images/Portfolio/portfolio1.jpg" width="270px"></p>    
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="name"><img src="Images/Portfolio/portfolio2.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid2" data-category="metalloid2">
    <p class="name"><img src="Images/Portfolio/portfolio3.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid3" data-category="metalloid3">    
    <p class="name"><img src="Images/Portfolio/portfolio4.jpg" width="270px"></p></div>   

  <div class="item transition metalloid4" data-category="metalloid4">
    <p class="name"><img src="Images/Portfolio/portfolio5.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid5" data-category="metalloid5">    
    <p class="name"><img src="Images/Portfolio/portfolio6.jpg" width="270px"></p></div>   
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
  var $container = $('#box').isotope({
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});
</script>

<br><br><br>

<img src="Images/Portfolio/button1.jpg">
<img src="Images/Portfolio/button2.jpg">
<img src="Images/Portfolio/button3.jpg">

<br><br><br>
<img src="Images/Portfolio/portfolio1.jpg">
<img src="Images/Portfolio/portfolio2.jpg">
<img src="Images/Portfolio/portfolio3.jpg">
<img src="Images/Portfolio/portfolio4.jpg">
<img src="Images/Portfolio/portfolio5.jpg">
<img src="Images/Portfolio/portfolio6.jpg">

<br><br><br><br>
<img src="Images/Portfolio/clients.jpg">
<br><br><br><br>


<center>
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</center>



<?php include('footer.php'); ?>



</body>
</html>

davy_yg 2 Posting Whiz · Answer 6 · 2015-05-26T10:11:05+00:00

Hello,

Can you check these buttons? I wonder why none of these works well. Except for original-order and category.

<div id="sorts" class="button-group">
<button data-sort-by="original-order">Photography</button>
<button data-sort-by="branding">Branding</button>
<button data-sort-by="symbol">Web Design</button>
<button data-sort-by="number">number</button>
<button data-sort-by="weight">weight</button>
<button data-sort-by="category">category</button>
</div>

portfolio.php

<!DOCTYPE html>
<html>
<head>
<title>Portfolio</title>

<link rel="stylesheet" type="text/css" href="css/style.css">

<style>
body {
  padding: 100px;
}
.button-group {
  margin: 5px;
}
.item {
  width: 150px;
  height: 150px;
  margin: 5px 0 0 110px;
  padding: 10px;
  color: black;  
}
.item > * {
  margin: 0;
  padding: 0;
}
#box {
    width: 800px; 
    margin: 0 0 0 -100px;
}
</style>

</head>


<body>

<?php include('nav.php'); ?>

<br><br><br>

<center><h2><b>Our Portfolio</b></h2></center>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
</p>

<div id="sorts" class="button-group">
  <button data-sort-by="original-order">Photography</button>
  <button data-sort-by="branding">Branding</button>
  <button data-sort-by="symbol">Web Design</button>
  <button data-sort-by="number">number</button>
  <button data-sort-by="weight">weight</button>
  <button data-sort-by="category">category</button>
</div>
<div id="box">
  <div class="item transition metal" data-category="transition">
    <p class="name"><img src="Images/Portfolio/portfolio1.jpg" width="270px"></p>    
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="name"><img src="Images/Portfolio/portfolio2.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid2" data-category="metalloid2">
    <p class="name"><img src="Images/Portfolio/portfolio3.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid3" data-category="metalloid3">    
    <p class="name"><img src="Images/Portfolio/portfolio4.jpg" width="270px"></p></div>   

  <div class="item transition metalloid4" data-category="metalloid4">
    <p class="name"><img src="Images/Portfolio/portfolio5.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid5" data-category="metalloid5">    
    <p class="name"><img src="Images/Portfolio/portfolio6.jpg" width="270px"></p></div>   
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
  var $container = $('#box').isotope({
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});
</script>

<br><br><br>

<img src="Images/Portfolio/button1.jpg">
<img src="Images/Portfolio/button2.jpg">
<img src="Images/Portfolio/button3.jpg">

<br><br><br>
<img src="Images/Portfolio/portfolio1.jpg">
<img src="Images/Portfolio/portfolio2.jpg">
<img src="Images/Portfolio/portfolio3.jpg">
<img src="Images/Portfolio/portfolio4.jpg">
<img src="Images/Portfolio/portfolio5.jpg">
<img src="Images/Portfolio/portfolio6.jpg">

<br><br><br><br>
<img src="Images/Portfolio/clients.jpg">
<br><br><br><br>


<center>
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</center>



<?php include('footer.php'); ?>



</body>
</html>

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 7 · 2015-05-26T10:21:24+00:00

I wonder why none of these works well

Probably because you've only defined data-category and none of the others (e.g. data-branding).

gentlemedia 803 Master Poster · Answer 8 · 2015-05-26T16:10:30+00:00

And it's more likely you want to filter the portfolio items with Isotope instead of to sort them.

davy_yg 2 Posting Whiz · Answer 9 · 2015-05-27T07:10:28+00:00

How to do data-branding and filter the portfolio items instead of sorting them? I already read the manual and still does not understand how to code it.

http://isotope.metafizzy.co/filtering.html

gentlemedia 803 Master Poster · Answer 10 · 2015-05-27T11:22:15+00:00

It's pretty much copy/paste what you have to do and fill it with your content/items and try to understand what you copy/paste, so you learn from it.

It might be also a good idea to start with integrating simple jQuery plugins first before you dive into plugins such as Isotope. I get the idea it's way over your head all this. A good understanding of the basic principles of HTML & CSS is a must too.

davy_yg 2 Posting Whiz · Answer 11 · 2015-05-29T10:03:55+00:00

I know how to integrate simple jQuery plugins and also already have the basic understand of HTML & CSS. Can you not just give me the code so that I can study from it later on?

davy_yg 2 Posting Whiz · Answer 12 · 2015-06-02T15:08:41+00:00

I made a little revision in here. I do not know how to replace <center> that have the same meaning.

portfolio.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Portfolio</title>

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link rel="stylesheet" type="text/css" href="css/style.css">

<style>
body {
  padding: 100px;
}
.button-group {
  margin: 5px;
}
.item {
  width: 150px;
  height: 150px;
  margin: 5px 0 0 110px;
  padding: 10px;
  color: black;  
}
.item > * {
  margin: 0;
  padding: 0;
}
#box {
    width: 800px; 
    margin: 0 0 0 -100px;
}
</style>

</head>


<body>

<?php include('nav.php'); ?>

<br><br><br>

<center><h2><b>Our Portfolio</b></h2></center>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
</p>

<div id="sorts" class="button-group">
  <button data-sort-by="original-order">Photography</button>
  <button data-sort-by="branding">Branding</button>
  <button data-sort-by="symbol">Web Design</button>
  <button data-sort-by="number">number</button>
  <button data-sort-by="weight">weight</button>
  <button data-sort-by="category">category</button>
</div>
<div id="box">
  <div class="item transition metal" data-category="transition">
    <p class="name"><img src="Images/Portfolio/portfolio1.jpg" width="270px"></p>    
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="name"><img src="Images/Portfolio/portfolio2.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid2" data-category="metalloid2">
    <p class="name"><img src="Images/Portfolio/portfolio3.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid3" data-category="metalloid3">    
    <p class="name"><img src="Images/Portfolio/portfolio4.jpg" width="270px"></p></div>   

  <div class="item transition metalloid4" data-category="metalloid4">
    <p class="name"><img src="Images/Portfolio/portfolio5.jpg" width="270px"></p>   
  </div>
  <div class="item transition metalloid5" data-category="metalloid5">    
    <p class="name"><img src="Images/Portfolio/portfolio6.jpg" width="270px"></p></div>   
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
  var $container = $('#box').isotope({
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });
  // sort items on button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });
});
</script>

<br><br><br>

<img src="Images/Portfolio/button1.jpg">
<img src="Images/Portfolio/button2.jpg">
<img src="Images/Portfolio/button3.jpg">

<br><br><br>
<img src="Images/Portfolio/portfolio1.jpg">
<img src="Images/Portfolio/portfolio2.jpg">
<img src="Images/Portfolio/portfolio3.jpg">
<img src="Images/Portfolio/portfolio4.jpg">
<img src="Images/Portfolio/portfolio5.jpg">
<img src="Images/Portfolio/portfolio6.jpg">

<br><br><br><br>
<img src="Images/Portfolio/clients.jpg">
<br><br><br><br>


<center>
Lorem ipsum dolor sit amet, consectetuer adipiscing <br>elit, sed diam nonummy nibh euismod <br>tincidunt ut laoreet dolore magna aliquam<br> erat volutpat.<br>
<b>dolore magna aliquam</b><br><br>
</center>



<?php include('footer.php'); ?>



</body>
</html>

diafol · Answer 13 · 2015-06-02T20:27:47+00:00

THe indenting issue seems to be with the editor not davy. Apologies davy, my bad.

davy_yg 2 Posting Whiz · Answer 14 · 2015-06-03T10:56:58+00:00

ok, I revise the <center> with this:

but sorry I totally forget about the <br>
in HTML5 and how to replace that. I already try to google and still cannot find the answer.

diafol · Answer 15 · 2015-06-03T11:07:38+00:00

Use CSS to centre. This is layout/format, so you shouldn't 'hard-code' it into HTML.

One way would be to <div class="container">

.container{
    text-align: center;
}

If you want to centre text. This way, you do not limit your markup. You can change the look and feel with CSS and apply different layouts, e.g. responsive. You can't do that very well with html attributes and properties.

<br> should not be used for vertical spacing, although it can be a convenient quick fix. Again if you need layout/formatting, use margin/padding (usually) in CSS.

davy_yg 2 Posting Whiz · Answer 16 · 2015-06-04T06:19:24+00:00

Will <br> be absolute? if I am using css to replace <br> it will too many css to write just for different vertical spacing distant.

Is that the only option?

What about vertical spacing between paragraphy. Wouldn't it be funny if I have use css?

diafol · Answer 17 · 2015-06-04T09:24:53+00:00

If you have a natural division like a bank of buttons then enclose them in a div. if this div is unique you can give it an id, if not and you are going to have a number of divisions with the same or similar formats then give it a classname. Then apply padding and/or margin to the class or id in CSS.

Similarly with paragraphs. Give them all the same properties in css. Use classes to modify or extend the general p.

gentlemedia 803 Master Poster · Answer 18 · 2015-06-04T12:07:12+00:00

What about vertical spacing between paragraphy. Wouldn't it be funny if I have use css?

Pargraph tags and all the other HTML tags and elements as well has by default already some CSS applied (source: http://www.w3.org/TR/CSS2/sample.html). The paragraph tag has by default a top & bottom margins, but if yoou use quite an aggressive CSS reset like the one from Eric Meyer, and you do as I've seen in another thread of yours, then those margins are set to '0' in the CSS reset.

So if you want spacing between all your paragraphs, you will have to set some margins again in your own styles on the p tag.

But.. it's better to look into normalize.css instead of Eric Meyer's CSS reset. Some CSS defaults are usefull and some are just a pain in the arse or are inconsistent between the different browsers. Normalize.css takes care of only the latter.
http://necolas.github.io/normalize.css/

davy_yg 2 Posting Whiz · Answer 19 · 2015-06-05T10:29:32+00:00

Is this how it works:

replacing <br> with a define br.

<div id="br"></div>

style.css

br { margin-top: 10px;}

diafol · Answer 20 · 2015-06-05T11:36:09+00:00

No. An ID must be preceeded by a '#' in CSS. http://www.cssbasics.com/css-ids/

#br { margin-top: 10px;}

So that would work. But being picky, I wouldn't use 'br' as an id as it may be confusing. Maybe call it 'button-bank' or something.

I usually have general 'step-down' that gives me a 2rem margin.

.step-down{
    margin-top: 2rem;
}

I make this a 'class' not an 'id' so I can add it to any element I want. If it was an 'id', I wouldn't be able to re-use it.

davy_yg 2 Posting Whiz · Answer 21 · 2015-06-08T04:24:25+00:00

okay,

So I should replace "all" <br> with :

style.css

.step-down{
    margin-top: 2rem;
}


about.php

<p>Hallo</p>  
<div class="step-down">
<p>Hallo</p>
</div>


What should I do next in order to make the picture gallery works?

diafol · Answer 22 · 2015-06-08T06:20:33+00:00

No. No need for a separate element - that's the whole point. You can add this class to almost any block element:

<p>Hallo</p>  
<p class="step-down">Hallo</p>

Your gallery still doesn't work after another 2 days? Show you're latest version I guess, so that people who may want to help you have the vaguest idea of where you are.

davy_yg 2 Posting Whiz · Answer 23 · 2015-06-08T08:33:21+00:00

Scroll up cek portfolio.php. It still the same codes.

diafol · Answer 24 · 2015-06-08T15:37:32+00:00

So you've not attempted to get this to work yourself since? At all?

Ok, well here's the link everybody: https://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/495011/jquery-gallery/3#post2172315

davy_yg 2 Posting Whiz · Answer 25 · 2015-06-09T03:46:54+00:00

No, I've tried to fix it. but do not quite understand how to do it and how to code it even after reading the manual.

Like if I want to shift from one articles to another articles then I probably need several :

right?

(Supposing I want a big distant).

davy_yg 2 Posting Whiz · Answer 26 · 2015-06-15T04:10:29+00:00

Okay,

I still do not understand how to code the gallery so that it works fine.

http://www.innovation.web.id/One/portfolio.php

My gallery only have two buttons that works - on the most left and most right.

I already studied HTML5 & CSS3.

The code still remains the same:

https://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/495011/jquery-gallery/3#post2172315

Any advice or real code help?