Search the Community
Showing results for tags 'slider'.
Found 6 results
-
Hi all, I have this slider in a project which was working great till I removed a small bit of inline css and tried to put it in an external file. That produced a distortion in the slider as it moves up n down. Earlier the slider tab moved uniformly ( it's size remained the same as it opened or closed). But now the slider becomes smaller as it opens. and comes back to the original size and place as it closes. Further the x in a circle is slightly eaten when the slide tab is in the open state. The HTML that worked great :- <!-- The tab on top --> <div class="tab"> <ul class="login"> <li class="left"> </li> <li>Hello <?php echo isset($user)? $user : 'Guest';?>!</li> <li class="sep">|</li> <li id="toggle"> <a id="open" class="open" href="#"><?php echo isset($id)?'Open Panel':'Log In | Register';?></a> <a id="close" style="display:none"; class="close" href="#">Close Panel</a> </li> <li class="right"> </li> </ul> </div> <!-- / top --> The accomanying CSS: .tab a.open,.tab a.close { height: 20px; line-height: 20px !important; padding-left: 30px !important; cursor: pointer; display: block; width: 100px; position: relative; top: 11px; } .tab a.open {background: url(../images/bt_open.png) no-repeat left 0;} .tab a.close {background: url(../images/bt_close.png) no-repeat left 0;} .tab a:hover.open {background: url(../images/bt_open.png) no-repeat left -19px;} .tab a:hover.close {background: url(../images/bt_close.png) no-repeat left -19px;} Once I removed the in line CSS style = " ..." , show in red in the code, and added the following bit of code in the external css file: .tab a.close { display: none; } the distortion that I have described above, crept in. I am not sure how I can make the slider work perfect as before. Please someone help me overcome this. Thanks all !
-
I bought a slider script and need to merge it in the website. What is the best to put the script in the header or in the footer? And where i have to put it on wich line? I tried a lot and i have almost no more hair left on my head! One time i managed to get the images below header but not in a slider, it added the images below each other. It's not loading jquery or something else i don't know... this is the slider script: <?php echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\"> <head> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /> <title>JQuery-Image-Slider</title> <link href=\"css/default.css\" rel=\"stylesheet\" type=\"text/css\" /> <script src=\"js/jquery.js\" type=\"text/javascript\"></script> <script src=\"js/yslider.js\" type=\"text/javascript\"></script> <script src=\"js/init.js\" type=\"text/javascript\"></script> </head> <body> <div id=\"content\"> <div class=\"slider\"> <div class=\"sliderContent\"> <div class=\"item\"> <img src=\"img/img1.jpg\" alt=\"\" /> </div> <div class=\"item\"> <img src=\"img/img2.jpg\" alt=\"\" /> </div> <div class=\"item\"> <img src=\"img/img3.jpg\" alt=\"\" /> </div> <div class=\"item\"> <img src=\"img/img4.jpg\" alt=\"\" /> </div> <div class=\"item\"> <img src=\"img/img5.jpg\" alt=\"\" /> </div> <div class=\"item\"> <img src=\"img/img6.jpg\" alt=\"\" /> </div> </div> </div> </div> </body> </html> "; ?> The header and footer script are atached footer.php header.php
-
Hi all This is my first post but I hope someone can help. I am building a website using a theme that uses a template builder that includes a client scrolling carousel. When using it once it works fine... I need to use it 3 times. The second and third instance doesn't scroll and appears huge on the page. I am a novice at php but after a bit of research I believe its something to do with how the builder calls for the carousel and the ID. I am not sure how to amend the php to make each instance of the carousel have a different ID and consequently js and css div classes are called correctly. I hope this make sense and any help would be much appreciated Craig
-
Hey guys, I'm still very much a noob in learning. I need help big time. As you will see, this code is designed to make an apple like slider on a webpage. I'm looking to put the slider part with the thumbnails on the top of it instead of the bottom. Here is what I have: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <title>Welcome To Provision Records</title> <div id="main"> <div id="gallery"> <div id="slides"> <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" /></div> <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" /></div> <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" /></div> </div> <div id="menu"> <ul> <li class="fbar"> </li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li> <li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" /></a></li> </ul> </div> </div> </div> <style type="text/css"> body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{ /* Page reset */ margin:0px; padding:0px; } body{ /* Setting default text color, background and a font stack */ color:#444444; font-size:13px; background: #f2f2f2; font-family:Arial, Helvetica, sans-serif; } /* Gallery styles */ #gallery{ /* CSS3 Box Shadow */ -moz-box-shadow:0 0 3px #AAAAAA; -webkit-box-shadow:0 0 3px #AAAAAA; box-shadow:0 0 3px #AAAAAA; /* CSS3 Rounded Corners */ -moz-border-radius-bottomleft:4px; -webkit-border-bottom-left-radius:4px; border-bottom-left-radius:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; border:1px solid white; background:url(img/panel.jpg) repeat-x bottom center #ffffff; display:block; margin-left:auto; margin-right:auto; margin-north:auto; max-width: 100%; max-height:100%; height:auto; margin-top:180px; /* The width of the gallery <______________________________________________________*/ width:900px; overflow:hidden; } #slides{ /* This is the slide area */ height:400px; /* jQuery changes the width later on to the sum of the widths of all the slides. */ width:920px; overflow:hidden; } .slide{ float:left; } #menu{ /* This is the container for the thumbnails */ height:45px; } ul{ margin:0px; padding:0px; } li{ /* Every thumbnail is a li element */ width:60px; display:inline-block; list-style:none; height:45px; overflow:hidden; } li.inact:hover{ /* The inactive state, highlighted on mouse over */ background:url(img/pic_bg.png) repeat; } li.act,li.act:hover{ /* The active state of the thumb */ background:url(img/active_bg.png) no-repeat; } li.act a{ cursor:default; } .fbar{ /* The left-most vertical bar, next to the first thumbnail */ width:2px; background:url(img/divider.png) no-repeat right; } li a{ display:block; background:url(img/divider.png) no-repeat right; height:35px; padding-top:10px; } a img{ border:none; } /* THIS IS WHERE MY CODING SITS */ html{ overflow:hidden } body{ background-image:url(); background-repeat: no repeat; background-size:110%; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript" > $(document).ready(function(){ /* This code is executed after the DOM has been completely loaded */ var totWidth=0; var positions = new Array(); $('#slides .slide').each(function(i){ /* Loop through all the slides and store their accumulative widths in totWidth */ positions= totWidth; totWidth += $(this).width(); /* The positions array contains each slide's commulutative offset from the left part of the container */ if(!$(this).width()) { alert("Please, fill in width & height for all your images!"); return false; } }); $('#slides').width(totWidth); /* Change the cotnainer div's width to the exact width of all the slides combined */ $('#menu ul li a').click(function(e){ /* On a thumbnail click */ $('li.menuItem').removeClass('act').addClass('inact'); $(this).parent().addClass('act'); var pos = $(this).parent().prevAll('.menuItem').length; $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450); /* Start the sliding animation */ e.preventDefault(); /* Prevent the default action of the link */ }); $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact'); /* On page load, mark the first thumbnail as active */ }); </script> </head> <body bgcolor="#FFFFFF"> </body> </html> Also, here is the website where I got this code (I changed it a little, but not much). http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/#comment-1084 Any ideas?
-
Hope this is the right topic for my problem and maybe someone can help me with this! My blog is in wordpress and when you look at the default category page it looks empty, just plain post list so i figured it would be nice to have last few category posts before the content. With the theme which I'm using silverOrchid i already have front page slider which i like so i would like to copy that slider in the category.php which i created earlier and change it to show and change latest posts per category which users are reading. Here is slider code from index.php //include slider if ( $gazpo_settings['gazpo_show_slider'] == 1 ) { get_template_part('includes/slider'); } So my question is how to change this code (if possible) to show latest posts from category which users are reading? I tried a few different forum threads but non of them seams understandable enough for me so i would appreciate help .... thanx
-
Heya guys, I have this dynamic image slider thingy where users upload photos of their products, which means that the photos' sizes vary from very little to very large ones and I've tried a handful of solutions but none of them worked as I demand. All I need is to resize the image to match the user's screen ( or window size ) but not stretch in either width or height, can you please help me?
