i8igmac Posted May 20, 2015 Share Posted May 20, 2015 (edited) <img src="/images/beach1.jpg" alt='some text' /> <img src="/images/beach2.jpg" alt='some more text' /> <img src="/images/beach2.jpg" alt='and some more' /> Im trying to add a small image gallery, each image should fade/cycle into the next as this example shows, http://jquery.malsup.com/cycle/count.html Oh, i have a working example now LOL sorry, http://jsfiddle.net/fvAyS/63/ Edited May 20, 2015 by i8igmac Quote Link to comment Share on other sites More sharing options...
cooper Posted May 20, 2015 Share Posted May 20, 2015 Doesn't the img tag only have an 'alt' element rather than a 'description'? Quote Link to comment Share on other sites More sharing options...
i8igmac Posted May 20, 2015 Author Share Posted May 20, 2015 (edited) Doesn't the img tag only have an 'alt' element rather than a 'description'? http://jsfiddle.net/fvAyS/63/ I DID IT ,-) yes, as you say alt appears to be the only option lol... i dont know what im doing Edit... so, i have applied my new gallery to my site... there is a problem now with bootstrap responsive-img does not work, when you resize the screen the image gallery should get smaller http://jsfiddle.net/fvAyS/64/ Check out this example... try and resize the screen Edited May 20, 2015 by i8igmac Quote Link to comment Share on other sites More sharing options...
digip Posted May 20, 2015 Share Posted May 20, 2015 (edited) I can't get the jsfiddle page to load for me, so can't see exactly what you see, but if you want responsive, you need to make several adjustments for CSS. Easiest thing to do is add a known class to your images for what bootstrap already resizes(which looks like it might have bewlow so check the CSS file for the class), or, add in a new section for just your images. You can resize to browser screen sizes individually(reccomended for mobile users, google for normal screen queries) or, use a fluid style change which I like to use(but will break if you give an image a size that overrides the query or changes it's display element), that will only work on more modern browser. if trying to go for things like IE8 and older, this won't work properly.Can you paste what is in your CSS that has the ".img-responsive" class in it?it will look something like: .img-responsive { some code here to style the: images; } Or go it alone and make a universal sizer for images.(This would normally go in its own .css file and called with a link tag but just pasting an inline snippet for example) <style type="text/css"> img { min-width:50px; max-width:100%; width:auto; } </style> <div class="container"> <div class="jumbotron"> <div class="row"> <div class="col-sm-6 col-xs-4"> <div id="slide"> <img src="http://malsup.github.com/images/beach2.jpg" class="img-responsive" alt="some text" /> <img src="http://malsup.github.com/images/beach3.jpg" class="img-responsive" alt="some more" /> <img src="http://malsup.github.com/images/beach1.jpg" class="img-responsive" alt="and more" /> </div> <div id='output'></div> </div> </div> </div> </div> <div class="container"> <div class="jumbotron"> <div class="row"> <div class="col-sm-6 col-xs-4"> <h5>resize the screen</h5> <img src="http://malsup.github.com/images/beach1.jpg" class="img-responsive" alt="lazy"> </div> </div> </div> </div> The images you are using, are really small, so the sizes don't really work well to show how they resize, but if you resize your browser you will see you can shrink them down when the browser width is smaller than the image. just make sure your browser is one that can resize that small, or choose larger slider images.generally, you would want things changed per screen size though, since you can make things wrap to another line or make them the sizes of the screen in increments. You can do this with the @media query in CSS.Something like in your CSS file: @media screen and (max-width: 1600px) { body { background-color: red; } } @media screen and (max-width: 1280px) { body { background-color: white; } } @media screen and (max-width: 960px) { body { background-color: blue; } } @media screen and (max-width: 480px) { body { background-color: green; } } @media screen and (max-width: 320px) { body { background-color: orange; } } but add your html tags, classes and ID tags above according to your needs for the individual elements. in this manner, you can make things like a normal nav menu, a tiny icon and instead of hidden drop down menus, make them all vertically stacked links instead or move items normally along side one another, to "display:block;" which will cause them to be on their own line, switching back and forth between their normal screen options, to ones you only show at different screen sizes. Edited May 20, 2015 by digip Quote Link to comment Share on other sites More sharing options...
i8igmac Posted May 22, 2015 Author Share Posted May 22, 2015 (edited) digip i do appropriate your directions, you have given me the proper direction to complete a basic gallery... I now have a tricky php algorithm running threw my mind that has me puzzled this will be a automated way of pulling data from my sql database, and placing each persons image into the gallery... This list could include any ware from 5 people to 25 people... starting from the top, how could you place each one into 4 caruosel div's in the format as displayed below... php? i8igmac @ freenode 'justin' => '/img/justin.jpg', 'bob' => '/img/justin.jpg', 'tim' => '/img/justin.jpg', 'mike' => '/img/justin.jpg', 'josh' => '/img/justin.jpg', 'joe' => '/img/justin.jpg', 'jim' => '/img/justin.jpg', 'jiji' => '/img/justin.jpg', 'steve' => '/img/justin.jpg', 'stove' => '/img/justin.jpg', 'stitch' => '/img/justin.jpg', 'rierie' => '/img/justin.jpg', 'alvin' => '/img/justin.jpg', 'sara' => '/img/justin.jpg', 'kate' => '/img/justin.jpg', 'erica' => '/img/justin.jpg', <div class="col-xs-3 col-xs-B-2"> <div id="homeCarousel1" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="img/justin.jpg" /> <h6>justin</h6> </div> <div class="item"> <img src="img/bob.jpg" /> <h6>bob</h6> </div> <div class="item"> <img src="img/tim.jpg" /> <h6>tim</h6> </div> <div class="item"> <img src="img/mike.jpg" /> <h6>mike</h6> </div> </div> </div> </div> <div class="col-xs-3 col-xs-B-2"> <div id="homeCarousel2" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="img/josh.jpg" /> <h6>josh</h6> </div> <div class="item"> <img src="img/joe.jpg" /> <h6>joe</h6> </div> <div class="item"> <img src="img/jim.jpg" /> <h6>jim</h6> </div> <div class="item"> <img src="img/jiji.jpg" /> <h6>jiji</h6> </div> </div> </div> </div> <div class="col-xs-3 col-xs-B-2"> <div id="homeCarousel3" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="img/steve.jpg" /> <h6>steve</h6> </div> <div class="item"> <img src="img/stove.jpg" /> <h6>stove</h6> </div> <div class="item"> <img src="img/stitch.jpg" /> <h6>stitch</h6> </div> <div class="item"> <img src="img/rierie.jpg" /> <h6>rierie</h6> </div> </div> </div> </div> <div class="col-xs-3 col-xs-B-2"> <div id="homeCarousel4" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="img/alvin.jpg" /> <h6>alvin</h6> </div> <div class="item"> <img src="img/sara.jpg" /> <h6>sara</h6> </div> <div class="item"> <img src="img/kate.jpg" /> <h6>kate</h6> </div> <div class="item"> <img src="img/erica.jpg" /> <h6>erica</h6> </div> </div> </div> </div> Edited May 22, 2015 by i8igmac Quote Link to comment Share on other sites More sharing options...
digip Posted May 22, 2015 Share Posted May 22, 2015 I'm not much of a programmer with respect to writing database info but is there a reason you'd want to have this in a database? For any record in the database though, you're going to need to have all of yur php stuff coded up to authenticate to the database, read from the proper databse, table name, row with the records, and column for the images you want. Depending on how you store them, either with an index marker in one column in incrementing fashion and each file name on the corresponding row, or just a dump of data in a single column(you'd have to figure out how you want to sort it all afterwards when reading through and parsing it, but it all depends on how you store it), you just have it iterate through the images table or whatever you call it and then grab all of the data into an array and return reach item counted with the code you want wrapped around it. Get it all put together first, then show you code (omit real login creds obviously) and sure someone will help in making sure it's sanitized and looking proper. I'm not about to write something from scratch though and work it all out on my end, but I may be able to help if I see what you have to work with. Quote Link to comment Share on other sites More sharing options...
i8igmac Posted May 22, 2015 Author Share Posted May 22, 2015 (edited) I'm not much of a programmer with respect to writing database info but is there a reason you'd want to have this in a database? For any record in the database though, you're going to need to have all of yur php stuff coded up to authenticate to the database, read from the proper databse, table name, row with the records, and column for the images you want. Depending on how you store them, either with an index marker in one column in incrementing fashion and each file name on the corresponding row, or just a dump of data in a single column(you'd have to figure out how you want to sort it all afterwards when reading through and parsing it, but it all depends on how you store it), you just have it iterate through the images table or whatever you call it and then grab all of the data into an array and return reach item counted with the code you want wrapped around it. Get it all put together first, then show you code (omit real login creds obviously) and sure someone will help in making sure it's sanitized and looking proper. I'm not about to write something from scratch though and work it all out on my end, but I may be able to help if I see what you have to work with. Ok, so i have loads of working examples, as my approach for anything is to take it one example at a time... the database stuff is already covered, this array is a sql query from the database, my attempt to organize and display it... I am close to having a little working php example, the output is not as expected but the little bit of code is close to what im looking for so, there is a reoccurring output problem i consistently run into with php during loops... <?php $data=array('justin' => '/img/justin.jpg', 'bob' => '/img/justin.jpg', 'tim' => '/img/justin.jpg', 'mike' => '/img/justin.jpg', 'josh' => '/img/justin.jpg', 'joe' => '/img/justin.jpg', 'jim' => '/img/justin.jpg', 'jiji' => '/img/justin.jpg', 'steve' => '/img/justin.jpg', 'stove' => '/img/justin.jpg', 'stitch' => '/img/justin.jpg', 'rierie' => '/img/justin.jpg', 'alvin' => '/img/justin.jpg', 'sara' => '/img/justin.jpg', 'kate' => '/img/justin.jpg', 'erica' => '/img/justin.jpg', ); print_r(count($data)."<br>"); $size=(count($data)); foreach ((array_chunk($data, $size/4)) as $block){ foreach ($block as $name => $loc) { print_r("$name::$loc"); print_r("<br>"); } print_r("<br><br>"); } ?> and here is the output 16 0::/img/justin.jpg 1::/img/justin.jpg 2::/img/justin.jpg 3::/img/justin.jpg 0::/img/justin.jpg 1::/img/justin.jpg 2::/img/justin.jpg 3::/img/justin.jpg 0::/img/justin.jpg 1::/img/justin.jpg 2::/img/justin.jpg 3::/img/justin.jpg 0::/img/justin.jpg 1::/img/justin.jpg 2::/img/justin.jpg 3::/img/justin.jpg i have now the sublist i need to build my gallery... the problem i constantly run into is the first variable output as 0,1,2,3 and should be the string/name... im missing something simple here, always frustrated when i see this output from php Edited May 22, 2015 by i8igmac Quote Link to comment Share on other sites More sharing options...
digip Posted May 22, 2015 Share Posted May 22, 2015 (edited) Your code is working as written, not sure where you find issue. Depending on how you want this output displayed though, you're going to have to parse it out to just display the actual record output(ie: somethin gyou can wrap an <img> rtag around vs the dumped output), but you are calling the whole array of data both the index value and the record on either side of ::Changing the image names, you can visually see where each record is in chunks / 4 blocks below similar to what you have above, but you can see it's returning each record properly. <?php $data=array("justin" => "/img/1.jpg", "bob" => "/img/2.jpg", "tim" => "/img/3.jpg", "mike" => "/img/4.jpg", "josh" => "/img/5.jpg", "joe" => "/img/6.jpg", "jim" => "/img/7.jpg", "jiji" => "/img/8.jpg", "steve" => "/img/9.jpg", "stove" => "/img/10.jpg", "stitch" => "/img/11.jpg", "rierie" => "/img/12.jpg", "alvin" => "/img/13.jpg", "sara" => "/img/14.jpg", "kate" => "/img/15.jpg", "erica" => "/img/16.jpg"); print_r(count($data)."<br />"); $size=(count($data)); foreach ((array_chunk($data, $size/4)) as $block){ foreach ($block as $name => $loc) { print_r("<div><h2>Begin wrapping code here</h2><br />"); print_r("$name::$loc"); print_r("</div>Closing Wrapper<br />"); } print_r("<h3>After each block of record</h3><br /><br />"); } echo "<br /><br />Default Dump:<br /><br />"; var_dump($data); echo "<br /><br />Default Export:<br /><br />"; var_export($data); ?> I would probably do something like below though:edit: by the way, this is not sanitized, so make sure you wrap your output in the event someone stored XSS or other code, ie: htmlentities or better yet htmlspecialchars output only!<?php $data=array("justin" => "/img/1.jpg", "bob" => "/img/2.jpg", "tim" => "/img/3.jpg", "mike" => "/img/4.jpg", "josh" => "/img/5.jpg", "joe" => "/img/6.jpg", "jim" => "/img/7.jpg", "jiji" => "/img/8.jpg", "steve" => "/img/9.jpg", "stove" => "/img/10.jpg", "stitch" => "/img/11.jpg", "rierie" => "/img/12.jpg", "alvin" => "/img/13.jpg", "sara" => "/img/14.jpg", "kate" => "/img/15.jpg", "erica" => "/img/16.jpg"); //print_r(count($data)."<br />"); $mycount = count($data); echo "my count: $mycount\n\n<br />"; //$size=(count($data)); if($data > "") foreach ($data as $index => $image){ echo "<div><h2>Begin wrapping code here</h2><br />\n\n<img src=\"$image\" />\n\n<br />End wrapping here</div>\n\nValue in array for each image: ->"; var_export($image); } ?> If you only wanted to do it per key in the index, although much more code, you have granular control if you wanted to say, call only a specific authors image to go with a blog post or such:<?php $data=array("justin" => "/img/1.jpg", "bob" => "/img/2.jpg", "tim" => "/img/3.jpg", "mike" => "/img/4.jpg", "josh" => "/img/5.jpg", "joe" => "/img/6.jpg", "jim" => "/img/7.jpg", "jiji" => "/img/8.jpg", "steve" => "/img/9.jpg", "stove" => "/img/10.jpg", "stitch" => "/img/11.jpg", "rierie" => "/img/12.jpg", "alvin" => "/img/13.jpg", "sara" => "/img/14.jpg", "kate" => "/img/15.jpg", "erica" => "/img/16.jpg"); /* if($data > "") { foreach ($data as $index => $image){ echo "\n<div><h2>Begin wrapping code here</h2><br />\n\n<img src=\"$image\" />\n\n<br />End wrapping here</div>\n\nValue in array for each image: ->"; var_export($image); } } if($data > "") { //return only one index ("key") value $key = "bob"; $result = @$data[$key] ?: null; echo $result; } */ ?> <div class="col-xs-3 col-xs-B-2"> <div id="homeCarousel1" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="<?php if($data > "") { $key = "justin"; $result = @$data[$key] ?: null; echo htmlspecialchars($result,ENT_QUOTES);} ?>" /> <h6>justin</h6> </div> <div class="item"> <img src="<?php if($data > "") { $key = "bob"; $result = @$data[$key] ?: null; echo htmlspecialchars($result,ENT_QUOTES);} ?>" /> <h6>bob</h6> </div> <div class="item"> <img src="<?php if($data > "") { $key = "tim"; $result = @$data[$key] ?: null; echo htmlspecialchars($result,ENT_QUOTES);} ?>" /> <h6>tim</h6> </div> <div class="item"> <img src="<?php if($data > "") { $key = "mike"; $result = @$data[$key] ?: null; echo htmlspecialchars($result,ENT_QUOTES);} ?>" /> <h6>mike</h6> </div> </div> </div> </div> Edited May 22, 2015 by digip Quote Link to comment Share on other sites More sharing options...
cooper Posted May 22, 2015 Share Posted May 22, 2015 Whenever you see repetition with modest to no variation in code, it means you should've created either a function or a loop to handle that. Quote Link to comment Share on other sites More sharing options...
i8igmac Posted May 23, 2015 Author Share Posted May 23, 2015 (edited) I'm away from my computer at the moment, I have some pretty clean examples... I hate to start threads and solve the problem a few minutes later ;-p I do appreciate the quick response... one of the issues I ran into was array chunkc preserve key = true So instead of output 0,1,2,3 the string name is now preserved and output... this has been a frustrating problem I consistently run into and now the solution is stuck in my brain... I have successfully organized the data into its proper locations for the gallery... So, a new problem has surfaced, I'm using bootstrap , homecarousel1, 2,3,4 My page has about 30 of these gallery's as you scroll down so carousel4*30 would sufice but I hope for a better solution With jquery, if a div is in focus then can I write to the current div gallery that is in focus 'div id=homecarousel1' Im about to try some examples in a online jsfiddle Edited May 23, 2015 by i8igmac Quote Link to comment Share on other sites More sharing options...
i8igmac Posted May 25, 2015 Author Share Posted May 25, 2015 jquery... So, i have been at this for a few hours, searching for jsfiddle examples i can modify to fit my needs... if a div scrolls out of view, i want to trigger a example event like (hide,fade, alert or anything) if the div is above the screen? if the div is below the screen? if the div is center of the screen? the example bellow is missing the "if the div is above the screen?" else if (objectBottom < windowBottom-500) {//the div is above screen} this was my attempt, but i fail... its as close i could get... http://jsfiddle.net/b7qnrsrz/117/ link or here is source .fade { margin: 50px; padding: 50px; background-color: lightgreen; opacity: 0; } <div> <div class="fade">Fade In 01</div> <div class="fade">Fade In 02</div> <div class="fade">Fade In 03</div> <div class="fade">Fade In 04</div> <div class="fade">Fade In 05</div> <div class="fade">Fade In 06</div> <div class="fade">Fade In 07</div> <div class="fade">Fade In 08</div> <div class="fade">Fade In 09</div> <div class="fade">Fade In 10</div> </div> $(window).on("load",function() { function fade() { $('.fade').each(function() { /* Check the location of each desired element */ var objectBottom = $(this).offset().top + $(this).outerHeight(); var windowBottom = $(window).scrollTop() + $(window).innerHeight(); /* If the object is completely visible in the window, fade it in */ if (objectBottom < windowBottom) { //object comes into view (scrolling down) if ($(this).css('opacity')==0) {$(this).fadeTo(1,1);} } if (objectBottom > windowBottom) { //object goes bellow the screen (scrolling up) if ($(this).css('opacity')==1) {$(this).fadeTo(1,0);} }else if (objectBottom < windowBottom-500) { //object goes above the screen (scrolling down) if ($(this).css('opacity')==1) {$(this).fadeTo(1,0);} } }); } fade(); //Fade in completely visible elements during page-load $(window).scroll(function() {fade();}); //Fade in elements during scroll }); Quote Link to comment Share on other sites More sharing options...
i8igmac Posted May 25, 2015 Author Share Posted May 25, 2015 http://jsfiddle.net/tovic/vVaat/light/ I found what I need... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.