SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: media bar error

  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    media bar error

    when I click on the right and left arrows of the media bar it does not scroll through the bar for me.

    I have a site where it shows the working code and my site where it is not working if that helps

    my site is:

    http://salafiwales.co.uk

    and the working site is

    http://www.elegantthemes.com/preview/Chameleon/

    I'd really appreciate it if someone could tell me how to fix it
    Many thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    In the working example you have two sets of .media-slide divs each containing the number of thumbs that fit across the width. In the non working version you have only one .media-slide div containing all the thumbs. If you create two .media-slide divs then it starts working.
    e.g.

    Code:
    <div id="multi-media-bar">
    		<h3 class="title">Multi Media Bar</h3>
    		<div id="et-multi-media" class="clearfix"> <a id="left-multi-media" href="#">Previous</a> <a id="right-multi-media" href="#"Next></a>
    				<div id="media-slides">
    						<div class="media-slide">
    								<div class="thumb"> <a href="#et_video_post_146" class="et-video fancybox" title="Abu Talha presents"> <img src="http://salafiwales.co.uk/wp-content/uploads/et_temp/abut1-203452_48x48.png" class='multi-media-image'  alt='Abu Talha presents' width='48' height='48' /> <span class="more"></span> </a>
    										<div class="media-description">
    												<p>Abu Talha presents – Explanation of Aqeedah Tahawiyyah </p>
    												<span class="media-arrow"></span> </div>
    								</div>
    								<!-- end .thumb -->
    								
    								<div class="thumb"> <a href="#et_video_post_129" class="et-video fancybox" title="Advice of Ibn Al Qayyim"> <img src="http://salafiwales.co.uk/wp-content/uploads/et_temp/advice-32117_48x48.jpg" class='multi-media-image'  alt='Advice of Ibn Al Qayyim' width='48' height='48' /> <span class="more"></span> </a>
    										<div class="media-description">
    												<p>Hasan as-Somali lecture – The advice of Ibn Qayyim to Ahlus Sunnah From His an-nooni</p>
    												<span class="media-arrow"></span> </div>
    								</div>
    								<!-- end .thumb -->
    								
    								<div class="thumb"> <a href="#et_video_post_72" class="et-video fancybox" title="Ibn Uthaimeen"> <img src="http://salafiwales.co.uk/wp-content/uploads/et_temp/albaaniaqida-76938_48x48.png" class='multi-media-image'  alt='Ibn Uthaimeen' width='48' height='48' /> <span class="more"></span> </a>
    										<div class="media-description">
    												<p>Shaikh Ibn Uthaymeen – Aqidah
    														&nbsp; </p>
    												<span class="media-arrow"></span> </div>
    								</div>
    								<!-- end .thumb -->
    								
    								<div class="thumb"> <a href="#et_video_post_67" class="et-video fancybox" title="What Is As – Salafiyyah?"> <img src="http://salafiwales.co.uk/wp-content/uploads/et_temp/uthaimeen-154335_48x48.png" class='multi-media-image'  alt='What Is As – Salafiyyah?' width='48' height='48' /> <span class="more"></span> </a>
    										<div class="media-description">
    												<p>Shaikh Uthaimeen – What Is Salafiyyah? </p>
    												<span class="media-arrow"></span> </div>
    								</div>
    								<!-- end .thumb -->
    								
    								<div class="thumb"> <a href="#et_video_post_62" class="et-video fancybox" title="The Day We Stand Before Allah"> <img src="http://salafiwales.co.uk/wp-content/uploads/et_temp/theday-170988_48x48.png" class='multi-media-image'  alt='The Day We Stand Before Allah' width='48' height='48' /> <span class="more"></span> </a>
    										<div class="media-description">
    												<p>The Day We Stand Before Allah – Hasan As – Somali </p>
    												<span class="media-arrow"></span> </div>
    								</div>
    								<!-- end .thumb --> 
    								
    						</div>
    						<!-- end .media-slide -->
    						<div class="media-slide">
    								<div class="thumb"> <a href="#et_video_post_1" class="et-video fancybox" title="What Is As – Salafiyyah?"> <img src="http://salafiwales.co.uk/wp-content/uploads/et_temp/whatissalalafiyyah-208720_48x48.png" class='multi-media-image'  alt='What Is As – Salafiyyah?' width='48' height='48' /> <span class="more"></span> </a>
    										<div class="media-description">
    												<p>What Is A – Salafiyyah? – Naasir – Ad – Deen Al Albaani </p>
    												<span class="media-arrow"></span> </div>
    								</div>
    								<!-- end .thumb -->
    								<div class="thumb"> <a href="http://www.elegantthemes.com/preview/Chameleon/wp-content/uploads/2010/09/s-2.png" rel="media" class="fancybox" title="Summer Wheat"> <img src="http://www.elegantthemes.com/preview/Chameleon/wp-content/uploads/et_temp/s-2-458164_48x48.png" class='multi-media-image'  alt='Summer Wheat' width='48px' height='48px' /> <span class="more"></span> </a>
    										<div class="media-description">
    												<p>Donec sed metus ipsum, laoreet suscipit purus. Fusce ante lorem, luctus et tincidunt vel,...</p>
    												<span class="media-arrow"></span> </div>
    								</div>
    								<!-- end .thumb -->
    								
    								<div class="thumb"> <a href="#et_video_post_253" class="et-video fancybox" title="Calm Before The Storm"> <img src="http://www.elegantthemes.com/preview/Chameleon/wp-content/uploads/et_temp/shutterstock_5055934-183251_48x48.jpg" class='multi-media-image'  alt='Calm Before The Storm' width='48px' height='48px' /> <span class="more"></span> </a>
    										<div class="media-description">
    												<p>Donec auctor ullamcorper nunc, vitae pellentesque mi fringilla posuere. Maecenas semper...</p>
    												<span class="media-arrow"></span> </div>
    								</div>
    								<!-- end .thumb -->
    								
    								<div class="thumb"> <a href="http://elegantthemes.com/preview/DeepFocus/wp-content/uploads/2010/09/shutterstock_20951311.jpg" rel="media" class="fancybox" title="Bamboo Shoots"> <img src="http://www.elegantthemes.com/preview/Chameleon/wp-content/uploads/et_temp/shutterstock_20951311-105492_48x48.jpg" class='multi-media-image'  alt='Bamboo Shoots' width='48px' height='48px' /> <span class="more"></span> </a>
    										<div class="media-description">
    												<p>Etiam cursus, nibh in suscipit tincidunt, ante enim scelerisque lacus, sed consectetur...</p>
    												<span class="media-arrow"></span> </div>
    								</div>
    								<!-- end .thumb --> 
    								
    						</div>
    						<!-- end .media-slide --> 
    				</div>
    				<!-- end #media-slides --> 
    		</div>
    		<!-- end #et-multi-media --> 
    </div>
    <!-- end #multi-media-bar -->
    However, I don't think that's the right answer and you should probably refer to the documentation that comes with that slider as it seems a bit strange to have to do that.

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    great!!! I will try and sort that out... Only problem is the file is a php file so now I have to figure out where to find the html but thank you very much, I am now a step closer


Bookmarks

Posting Permissions

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