Advanced Search

Results 1 to 8 of 8

Thread: Text and Image Crawler & FancyBox

  1. #1
    Join Date
    Jul 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Text and Image Crawler & FancyBox

    I have installed 'Text and Image Crawler'.
    http://www.dynamicdrive.com/dynamici...wler/index.htm
    I really like it but I am having a little issue with it.

    I have also installed fancybox.js

    I think that 'Text and image Crawler', somehow duplicate the images (at least that seems to appear as such to me). I can't work out if it is in the loop, or in my links.

    I use this sort of links in my html. All my links use a small thumb images and link to a big image to open in the fancybox. I have 10 links like this.

    HTML Code:
    Code:
    <a href="photos/big/image1.jpg" rel="lyteshow[landscape]" ><img src="photos/small/image1-s.jpg" border="0" width="120" height="150" alt=""></a>
    I tend to believe there is something in the loop, but this is based on behaviours' observations rather than reading the code as I do not know javascript.

    fancybox indicate 20 images, while there is only 10 of my links.
    It doesn't matter where I click in the loop, for example image2, or image '12' (repeat of image2), the slide show starts at image2 up and finishes at 20.

    If I do not use Crawler, fancybox will count 10 images, and will start at image2 (if click on it) and the slide show finishes at 10.

    Please help...
    Last edited by jscheuer1; 07-22-2012 at 07:51 AM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    Yes Crawler does duplicate the images. It makes a copy of the content so that there may be a continuous scrolling.

    FancyBox doesn't usually use the:

    Code:
    rel="lyteshow[landscape]"
    syntax. Are you sure you're using FancyBox?

    Also, FancyBox and other box type scripts often have routines for removing duplicates from galleries. If they don't, often they can be added without too much trouble. Or we could probably use jQuery (if you are using FancyBox or another Box script that uses jQuery) and/or Crawler itself to give a different gallery name to the copied set of images once Crawler has created them.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    Last edited by jscheuer1; 07-22-2012 at 08:07 AM. Reason: detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    This is the website link

    http://www.peacockbrand.in/demo/art-execut.html

    In this web page, i have used only 8 images in crawler

    But when i click the image,in fancy box pop up it shows "16" images

    When i click the last 8th image, it jus get repeated til 16th image

    I dont want this to happen...

    Please help

  4. #4
    Join Date
    Jul 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Please give me a solution soon....

    I will be very thankful to you.....

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    .

    Your page is in violation of Dynamic Drive's usage terms, which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.


    Change this:

    Code:
    <script type="text/javascript" src="js/crawler.js"></script>
    to:

    Code:
    <script type="text/javascript" src="js/crawler.js">
    // Text and/or Image Crawler Script v1.5 (c)2009-2012 John Davenport Scheuer
    // as first seen in http://www.dynamicdrive.com/forums/
    // username: jscheuer1 - This Notice Must Remain for Legal Use
    // updated: 4/2011 for random order option, more (see below)
    // updated 7/2012 for integration with 3rd party initializing scripts
    </script>
    That said, I think the easiest approach would be to have crawler make a new group when it copies the images and then have crawler initialize the fancybox.

    Get rid of all of this:

    Code:
    	<script type="text/javascript">
    		$(document).ready(function() {
    			/*
    			*   Examples - images
    			*/
    
    			$("a#example1").fancybox();
    
    			$("a#example2").fancybox({
    				'overlayShow'	: false,
    				'transitionIn'	: 'elastic',
    				'transitionOut'	: 'elastic'
    			});
    
    			$("a#example3").fancybox({
    				'transitionIn'	: 'none',
    				'transitionOut'	: 'none'	
    			});
    
    			$("a#example4").fancybox({
    				'opacity'		: true,
    				'overlayShow'	: false,
    				'transitionIn'	: 'elastic',
    				'transitionOut'	: 'none'
    			});
    
    			$("a#example5").fancybox();
    
    			$("a#example6").fancybox({
    				'titlePosition'		: 'outside',
    				'overlayColor'		: '#000',
    				'overlayOpacity'	: 0.9
    			});
    
    			$("a#example7").fancybox({
    				'titlePosition'	: 'inside'
    			});
    
    			$("a#example8").fancybox({
    				'titlePosition'	: 'over'
    			});
    
    			$("a[rel=example_group]").fancybox({
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none',
    				'titlePosition' 	: 'over',
    				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
    					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    				}
    			});
    
    			/*
    			*   Examples - various
    			*/
    
    			$("#various1").fancybox({
    				'titlePosition'		: 'inside',
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none'
    			});
    
    			$("#various2").fancybox();
    
    			$("#various3").fancybox({
    				'width'				: '75%',
    				'height'			: '75%',
    				'autoScale'			: false,
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none',
    				'type'				: 'iframe'
    			});
    
    			$("#various4").fancybox({
    				'padding'			: 0,
    				'autoScale'			: false,
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none'
    			});
    		});
    	</script>
    You're only using a small part of it. We will bring that part back at the end of this process.

    Also, these scripts and styles are all either not used, and/or not found. Remove them:

    Code:
    <!--<script type="text/javascript" src="javascript/prototype.js"></script>
    <script type="text/javascript" src="javascript/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="javascript/lightbox.js"></script>-->
    
    <script type="text/javascript" src="js/effects.js" ></script>
    <script type="text/javascript" src="js/builder.js"></script>
    
    <link href="css/lightbox.css"  rel="stylesheet" type="text/css" />
    
    
    <script language="JavaScript" src="js/mm_menu.js" type="text/javascript"></script>
    and:

    Code:
    <script src="zoom/javascript/jquery-1.8.js" type="text/javascript"></script>
    Also get rid of:

    Code:
    <script type="text/javascript">
    marqueeInit({
    	uniqueid: 'mycrawler2',
    	style: {
    		'padding': '2px',
    		'width': '700px',
    		'height': '240px'
    		
    	},
    	inc: 40, //speed - pixel increment for each iteration of this marquee's movement
    	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
    	moveatleast: 3,
    	neutral:700,
    	savedirection: true,
    	random: false
    });
        </script>
    We will move it and change it.

    Use this updated version of crawler.js (right click and 'Save As'):

    Attachment 4559

    Now and only now, after you've taken care of all of the rest of these changes, add the highlighted as shown just before the closing </body> tag:

    Code:
     . . . gn="middle" class="footerbg"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td align="left" valign="middle" class="copytxt">STANDARD PRESS (INDIA) PVT. LTD. © 2012 . All Rights Reserved.</td>
            <td align="right" valign="middle" class="copytxt">Powered By <a href="http://www.bowandbaan.com/" target="_blank" style=" color:#dfb943;">www.bowandbaan.com</a></td>
          </tr>
        </table></td>
      </tr>
    </table>
    <script type="text/javascript">
    marqueeInit({
    	uniqueid: 'mycrawler2',
    	style: {
    		'padding': '2px',
    		'width': '700px',
    		'height': '240px'
    		
    	},
    	inc: 20, //speed - pixel increment for each iteration of this marquee's movement
    	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
    	moveatleast: 3,
    	neutral: 150,
    	savedirection: true,
    	random: false,
    	initcontent: function(contentarray){
    		var $ = jQuery;
    		if(typeof $ !== 'undefined' && typeof $.fn.fancybox === 'function'){
    			$(contentarray[1]).find('a[rel=example_group]').attr('rel', 'example_group2');
    			$("a[rel^=example_group]").fancybox({
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none',
    				'titlePosition' 	: 'over',
    				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
    					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    				}
    			});
    		}
    	}
    });
        </script>
    </body>
    <!-- InstanceEnd --></html>
    The browser cache may need to be cleared and/or the page refreshed to see changes.

    I know this is a lot to take in. Make sure you don't miss any steps. It is working here in a local markup of your page in Firefox, Chrome and IE. If there are problems or you have any questions, let me know.
    Last edited by jscheuer1; 07-22-2012 at 06:58 PM. Reason: Updat update code with a link to this post
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ashwini223 (07-23-2012)

  7. #6
    Join Date
    Jul 2012
    Posts
    12
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile Thousands of thanks

    Thanks alot..

    You helped me in right time...

    Thank you soooooooooooooooooooooooooooooooooooooooooooooooo much

  8. #7
    Join Date
    Mar 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I can't add more no. of icon

    dear in image crawler i have a problem
    check this link "http://almoltaqa.com.eg/beta/en/index.html"
    i can't add more images than the the crawler round then the images enter on each others

    thanks

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    Please start a new thread for a new question.

    When you do, please give us the address to a page where there is a problem and explain the problem better, including which browser and version, also anything special you have to do to see the problem. I looked at the page from your post, and everything seems to be working fine. So either there is no problem on that page, or it isn't obvious.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •