javascript - How to create page section based on JSON -

-

i have jquery slider code want populate via json url. below sample json starting with:

{   "context": null,   "isgeneric": false,   "items": [     {       "description": "lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla tincidunt condimentum lacus. pellentesque ut diam....<a href="#" >read more</a>",       "mediaurl": "\/images\/image1.jpg",       "alternativetext": "15+ excellent high speed photographs",       "height": 1050,       "thumbnailurl": "\/images\/image1-thb.jpg",       "width": 1680     },     {       "description": "vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a>",       "mediaurl": "\/images\/image2.jpg",       "alternativetext": "20 beautiful long exposure photographs",       "height": 1050,       "thumbnailurl": "\/images\/image2-thb.jpg",       "width": 1680     },     {       "description": "liquam erat volutpat. proin id volutpat nisi. nulla facilisi. curabitur facilisis sollicitudin ornare....<a href="#" >read more</a>",       "mediaurl": "\/images\/image3.jpg",       "alternativetext": "35 amazing logo designs",       "height": 1050,       "thumbnailurl": "\/images\/image3-thb.jpg",       "width": 1680     },     {       "description": "quisque sed orci ut lacus viverra interdum ornare sed est. donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a>",       "mediaurl": "\/images\/image4.jpg",       "alternativetext": "create vintage photograph in photoshop",       "height": 1050,       "thumbnailurl": "\/images\/image4-thb.jpg",       "width": 1680     }   ] }

how transform this?:

    <div id="featured" >       <ul class="ui-tabs-nav">         <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ excellent high speed photographs</span></a></li>         <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 beautiful long exposure photographs</span></a></li>         <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 amazing logo designs</span></a></li>         <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>create vintage photograph in photoshop</span></a></li>       </ul>      <!-- first content -->     <div id="fragment-1" class="ui-tabs-panel" style="">         <img src="images/image1.jpg" alt="" />          <div class="info" >             <h2><a href="#" >15+ excellent high speed photographs</a></h2>             <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. nulla tincidunt condimentum lacus. pellentesque ut diam....<a href="#" >read more</a></p>          </div>     </div>      <!-- second content -->     <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">         <img src="images/image2.jpg" alt="" />          <div class="info" >             <h2><a href="#" >20 beautiful long exposure photographs</a></h2>             <p>vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>          </div>     </div>      <!-- third content -->     <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">         <img src="images/image3.jpg" alt="" />          <div class="info" >             <h2><a href="#" >35 amazing logo designs</a></h2>             <p>liquam erat volutpat. proin id volutpat nisi. nulla facilisi. curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>          </div>     </div>      <!-- fourth content -->     <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">         <img src="images/image4.jpg" alt="" />          <div class="info" >             <h2><a href="#" >create vintage photograph in photoshop</a></h2>             <p>quisque sed orci ut lacus viverra interdum ornare sed est. donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>          </div>     </div>  </div>

i gave shot divs part. wrote on top of head may contain typos etc., can give idea

for (var i=0; i< jsondesc.length; i++) {   $("<div>").attr("id", "fragment-"+(i+1))       .addclass("ui-tabs-panel")       .append$("<img>").attr("src", jsondesc[i].items.mediaurl)       .append(           $("<div>").addclass("info").append(               $("<h2>")                   .append("<a>").attr("href", "#").html(jsondesc[i].items.alternativetext)             )         );   if (i>0) {     $("#fragment-"+(i+1)).addclass ("ui-tabs-hide"); }

Comments

Post a Comment

Popular posts from this blog

php - What is the difference between $_SERVER['PATH_INFO'] and $_SERVER['ORIG_PATH_INFO']? -

-
what’s difference between $_server['path_info'] , $_server['orig_path_info'] ? how use them? when run print_r($_server) , path_info , orig_path_info not present in array. why not? how can enable them? i have read php manual on them, still don’t understand them. the path_info variable present if invoke php script this: http://www.example.com/phpinfo.php/hello_there it's /hello_there part after .php script. if don't invoke url that, there won't $_server["path_info"] environment variable. the porig_ prefix uncommon. path_info standard cgi-environment variable, , should never prefixed. did read that? (there issues around php3/php4 if invoked php interpreter via cgi-bin/ - hardly has such setups today.) for reference: http://www.ietf.org/rfc/rfc3875
Read more

fortran - Function return type mismatch -

-
i'm attempting recode old c++ program in fortran make use of lapack (i'm aware c++ have lapack++, i'm having lot of trouble installing it, gave up). i didn't have problems compilation, when had variables declared real . when started coding section of program required lapack, found parameters passed dsyev need double precision . tried change double precision (including changing hard coded numbers double precision counterparts, i.e. 0.0 -> 0.0d0) when try compile, following error of functions , subroutines i've written: error: return type mismatch of function <function> @ (1) (real(4)/real(8)) i'm not sure coming from, in program has been changed double precision. for example, i've declared following: double precision :: alpha(3),d(3),zeta1,zeta2 double precision :: a1(3),a2(3),d1(3),d2(3) double precision :: pi pi = 3.14159265359d0 alpha = (/0.109818d0, 0.405771d0, 2.22766d0/) d = (/0.444635d0, 0.535328d0, 0.154329d0 /) 10 i=1,3 ...
Read more

queue - mq_receive: message too long -

-
i implementing communication between 2 processes using queue. problem when call function mq_receive, error: message long. i have done following: struct mq_attr attr; long size = attr.mq_msgsize; .... // initializing queue "/gateway" int rc = mq_receive(gateway, buffer, size, &prio); if print size value, size=1, while when print same size program (got same mechanism), not long integer ( -1217186280 )... how can solve error?....so while size = 1, believe it's right "message long" why 1? p.s. have tried put : int rc = mq_receive(gateway, buffer, sizeof(buffer), &prio); but no result. it seems need read docs more carefully. when call mq_receive should pass size of destination buffer. this size must greater mq_msgsize attribute of queue . in addition, seems have error in queue attributes initialisation makes proper mq_receive call impossible. here standard message queue session: fill mq_attr struct ( doc ): struct mq_a...
Read more