Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How scroll a portion of an image and add links

    I am trying to make a forum signature.
    I want a section of the image to scroll.
    The scrolling section will contain multiple pictures containing links.

    If you still can't visualize it, I've made this:


    So I barely know any coding, I'm pretty sure Tumblr doesn't give you any credentials so please dumb it down for me. Thanks for the trouble in advance.


    Also, if this wasn't hard enough, I'd like to know if there is a way to restrict the amount of characters displayed in the code.

  • #2
    New Coder
    Join Date
    Oct 2014
    Location
    Youngstown, Ohio
    Posts
    18
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Code:
     </script>
    
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    
    <script type="text/javascript">
    
    $(document).ready(function(){
    	
    	setInterval(function(){
    	$('#carousel ul').animate({marginLeft:'-600px'},2000,function(){
    	
    	
    		$(this).find("li:last").after($(this).find("li:first"));
    		$(this).css({marginLeft:0});
    		
    		 });
    	},4000);
    	
    	});
    
    </script>
    
    <style type="text/css">
    @import url("jquery-1.11.1.min.js.css");
    
    *{
    	padding: 0; 
    	margin: 0;
    }
    
    #main {
    	padding: 10px;
    	box-shadow: 0 0 22px #000000;
    	width: 600px;
    	height: 300px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	background-image: url(images/container_image.png);
    }
    #carousel {
    	width: 600px;
    	height: 300px;
    	overflow: hidden
    }
    
    #carousel ul {
    	list-style: none;
    	width: 3600px;
    	height: 300px;
    }
    
    #carousel ul li {
    	float: left;
    	width: 600px;
    	height: 300px;
    }
    
    #carousel ul li img {
    	
    	width: 600px;
    	height: 300px;
    }
    </style>
    
       <div id="main">
    
    <div id="carousel">
    <ul>
    <li><img src="images/assasins creed unity.jpg" />
    <li><img src="images/MKXlogo.jpg" />
    <li><img src="images/hearthstone (1).jpg" />
    <li><img src="images/mordheim.jpg" />
    <li><img src="images/destiny.jpg" />
    <li><img src="images/company of heros 2.jpg" />
    
    </ul>
    </div>
    	</div>
    This is how I have mine set up. since I have 6 jpg and each are 600px thats how I got my width for #carousel. You do not need to resize all your pics,
    Code:
     #carousel ul li img {
    	
    	width: 600px;
    	height: 300px;
    }
    will resize them.

    I'd also add a div tag next to this for your text. You can choose the width and the height for your project, but for what I am doing I went with a bigger image slider. You can also add in a <a href="#" for your link.

    You will also need a jquery library, I can't upload one to the site, but I can email it to you, or just go to jquery and download one.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •